【CSS】flexの子要素のレスポンシブ対応の簡単な書き方

サイト運営

2021.10.302021.12.25

横並びのブロックをレイアウトする場合は、display:flexを使うのが当たり前になってきています。

この時に横方向にいくつ並べるか考えてflexコンテナーの子要素の幅を指定する必要があります。

この書き方はいろいろありますが、簡単な方法がありますので、まとめておきたいと思います。

この記事で分かること

flexプロパティを使う
1. flexプロパティのパラメータ
2. flexプロパティを使用した記述例
まとめ

flexプロパティを使う

flexプロパティを使うと記述量が少なく、確実に動きます。

flexプロパティのパラメータ

3つの要素は、以下のような割り当てになっています。

値を3つ指定: flex-grow | flex-shrink | flex-basis

flexプロパティを使用した記述例

横方向に3つずつ並べる場合の記述になります。

<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>

<style>
.parent{
display:flex;
}
.child{
/*値を3つ指定: flex-grow | flex-shrink | flex-basis*/
flex:0 1 calc(100% / 3);
}

</style>

子要素を均等サイズに割り付ける場合は、

flex:0 1 幅

をflexの子要素に指定すれば、期待通りに動きます。