【初心者向け】CSSのFlexboxで要素の並び方を設定する方法

2022年12月5日

URLをコピーしました！

生徒

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-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の値}

よかったらシェアしてね！

URLをコピーしました！