
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-basisを変えて親要素をはみ出すようにすると、flex-shrinkの割合で各要素が縮むことを確認できます。
flex-basis は子要素のサイズを指定
flex-basis
は子要素のサイズを指定します。
子要素の合計サイズが親要素をはみ出す場合はflex-basis
の値から伸縮します。
align-self は垂直方向の揃え方を設定
align-self
プロパティは各要素の垂直方向の揃え方を指定します。
auto
やstretch
の場合、高さの指定がない要素は親要素いっぱいまで伸びた大きさになります。
flex
でプロパティをまとめて設定できる
上のプロパティのいくつかは、以下の書き方でまとめて設定することができます。
flex: {fex-growの値} {flex-shrinkの値} {flex-basisの値}