生徒Flexboxで要素の並び順やサイズを指定できますか？
先生Flexboxで子要素の並び順やサイズなどの設定方法を説明します
目次
CSSのFlexboxについて
CSSのFlexboxは要素を列方向や行方向にレイアウトするためのコンテナです。
Flexboxを利用すると、かんたんに要素を横並びにしたり要素ごとにサイズを変えたりできます。
親要素に display: flex; を設定するとFlexboxになる
並び方を設定したい要素の親要素に display: flex; を設定すると親要素はFlexboxになります。
Flexboxに何も設定しない場合、中の子要素は左から右に横向きに並びます。
order は子要素の並び順を指定する
Flexbox内の要素の順番を設定するにはorderプロパティ を設定します。
orderの値が小さい順に並びます。- 設定の無い要素は
order: 1;より前に並びます。 orderの値が同じ場合、HTMLに書かれている順に並びます。
flex-grow は要素を伸張する割合を設定する
flex-glowは子要素が伸びる割合を設定するプロパティです。
複数の要素にflex-growを設定した場合、その値の割合で伸び率が決まります。
flex-shrink は要素を収縮する割合を設定する
flex-shrinkはflex-growと逆に、要素が縮む割合を指定します。
flex-shrinkを指定した要素は、子要素の合計サイズが親要素をはみ出した時に親要素に収まるように縮みます。
複数の要素にflex-shrinkを設定すると、各子要素の縮む割合を指定できます。