flex
flex は、フレックスボックスの項目の伸び方（flex-grow）・縮み方（flex-shrink）・元の大きさ（flex-basis）をまとめて書くショートハンドです。flex: 1 で余った幅を項目どうしで分け合うのがよくある使い方です。
構文
none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]プレビュー
1234
プリセット
見本
右下の角をドラッグするとサイズを変えられます
ショートハンドの内訳
flex1flex-grow
1flex-shrink
0%flex-basis
コード
.box {
display: flex;
}
.box > :nth-child(2) {
flex: 1;
}コントロール
flex1
flex-grow1
flex-shrink1
flex-basis0%
1234
解説
値の書き方
none：0 0 autoと同じです。伸びも縮みもせず、元の大きさのままです。auto：1 1 autoと同じです。中身や width で決まる大きさから、伸びも縮みもします。- 数値で書くときは、伸びる比率・縮む比率・元の大きさの順に書きます。元の大きさは比率の前に書いてもかまいません。単位の無い数は比率として読まれるので、元の大きさを 0 にするときは
0pxや0%と単位を付けます（比率を 2 つ書いたあとの0だけは元の大きさになります）。 - 省いた部分は、各プロパティの初期値ではなく、flex-grow と flex-shrink は
1、flex-basis は0%になります。そのためflex: 1は1 1 0%、flex: 200pxは1 1 200pxです。 - flex を書かないときの値（各プロパティの初期値）は
0 1 autoで、伸びずに、あふれるときだけ縮みます。
このページのプレビューは、補助の宣言で箱を display: flex にして、2 番目の項目だけに flex を書いています。
よく使う場面
flex: 1：元の大きさを 0% にしてから余りを分け合うので、中身の量にかかわらず、flex: 1 の項目どうしが同じ幅になります。flex: auto：中身の大きさを元にして、残った余りを分け合います。中身の多い項目ほど広くなります。flex: none：アイコンやボタンなど、まわりの項目に押されても大きさを変えたくない項目に使います。
気をつけること
- フレックスボックスの項目は、overflow が visible のとき min-width（縦に並べるときは min-height）の初期値 auto によって中身より小さく縮みません。flex: 1 にしても長い単語や URL があると幅がそろわないときは、項目に
min-width: 0を足します。 - ショートハンドなので、flex を書くと flex-grow・flex-shrink・flex-basis の 3 つともが上書きされます。前に書いた flex-basis なども、省いた部分の値（0% など）に置き換わります。