CSS | display: flexで子要素のサイズを固定幅にする方法
CSSのFlexBoxで子要素のサイズを固定幅にする方法とサンプルを紹介しています。
FlexBoxで子要素のサイズを固定幅にする
FlexBoxで子要素のサイズの横幅を固定幅にする動作サンプルとサンプルコードになります。
See the Pen CSS Vertical and horizontal center (display:flex)2 by yochans (@yochans) on CodePen.
HTMLにはサンプル用にコンテナ要素としてclass名「container」、子要素として<div>タグで設置しています。
<div class="container">
<div>Apple</div>
<div>Banana</div>
<div>Pine</div>
<div>Grape</div>
<div>Orange</div>
<div>Strawberry</div>
<div>Melon</div>
<div>kiwi</div>
</div>子要素の各横幅を固定するには通常の要素と同じく「width」で指定するだけで問題ありません。
子要素の幅を固定すると折り返しを付けないと画面幅を超えた時に画面からはみ出してスクロールバーが必要な状態となります。
折り返したい場合はコンテナ要素に「flex-wrap: wrap;」を指定しておきます。
.container {
display: flex;
flex-wrap: wrap;
gap: 1px;
}
.container div{
padding: 5px;
width: 150px;
color: #FFF;
background: #1e90ff;
}