flex

Flexboxの子要素の伸び方・縮み方・基準幅をまとめて指定するプロパティです。

遊んでみよう

親：display: flex

CSS

.element flex: 1 1 120px;

値のパターン

伸びる比率 flex-grow1

縮む比率 flex-shrink1

基準幅 flex-basis

flexの構成要素

01flex-grow

余った幅を受け取る

0なら伸びず、1以上なら兄弟要素との比率に応じて空き幅を分けます。

02flex-shrink

狭いときに縮む

0なら縮まず、1以上なら必要に応じて基準幅より小さくなります。

03flex-basis

分配前の基準幅

空き幅を計算する前に、子要素がどれくらいの幅を持つか決めます。

早見表

基本形はgrow → shrink → basis。flexはFlexboxの子要素に指定します。

011よく使う均等分配1 1 0%

02auto内容を基準に伸縮1 1 auto

03initial初期状態0 1 auto

04none伸び縮みしない0 0 auto

よくある使い方

カードを均等に伸ばす

兄弟要素へflex: 1を指定すると、利用できる幅を均等に分けられます。

flex: 1;

入力欄だけを伸ばす

ラベルやボタンの間で、入力欄へ残りの幅を渡せます。

flex: 1 1 0%;

固定幅の項目を守る

アイコンなどへnoneを指定すると、狭くても伸び縮みしません。

flex: none;

ポイント

親要素にはdisplay: flexが必要。

flexは子要素側のプロパティです。並べる親要素がFlexboxでなければ効果がありません。親へdisplay: flex;、子へflexを指定します。