

Flexboxで要素の並び方を指定する方法を教えてください



Flexboxの子要素の並び方を設定するプロパティについて説明します
- Flexboxの要素の並び方を設定するためのプロパティ
- 各プロパティの設定値によって表示がどう変わるのか
親要素に display: flex; を設定するとFlexboxになる
並び方を設定したい要素の親要素に display: flex; を設定すると親要素はFlexboxになります。
Flexboxに何も設定しない場合、中の子要素は左から右に横向きに並びます。
order は子要素の並び順を指定する
Flexbox内の子要素の順番を設定するには、order を設定します。order の数字が小さい順に並びます。設定の無い要素は order: 1; の要素より前に並びます。order の値が同じ場合は HTMLに書かれている順の並びになります。
flex-grow は要素を伸張する割合を設定する
flex-glow は要素が伸びる割合を指定します。flex-glow が指定された要素は、その要素が親要素いっぱいまで伸びて大きくなります。複数の要素で flex-grow が設定されている場合、その値の割合で伸び率が決まります。
flex-shrink は要素を収縮する割合を設定する
flex-shrink は flex-grow とは逆に要素が縮む割合を指定します。flex-shrink が指定された要素は、子要素の合計サイズが親要素をはみ出す時に flex-shrink の割合で縮みます。複数の要素で flex-shrink が設定されている場合、その値の割合で伸び率が決まります。
以下の例では、flex-basisを変えて親要素をはみ出すようにすると、flex-shrinkの割合で各要素が縮むことを確認できます。
flex-basis は子要素のサイズを指定
flex-basis は基準とするサイズを指定します。子要素の合計サイズが親要素をはみ出す場合 flex-basis の値に沿って各要素の大きさがきまります。
align-self は垂直方向の揃え方を設定
align-self は各要素の垂直方向の揃え方を指定します。auto, stretch の場合、高さ指定がない要素は、親要素いっぱいまで伸びて大きくなります。
flex は設定をまとめて指定できる
上のプロパティのいくつかはまとめて以下の書き方でまとめて指定することができます。
flex: {fex-growの値} {flex-shrinkの値} {flex-basisの値}

