flexboxには、flex item(子要素)に指定してそれぞれのitemのサイズを変更するプロパティがあります。flexboxの機能で自動的に各itemの大きさを調整して表示してくれるので便利ですが、注意すべき点もあります。
親要素(flex container)に指定するプロパティは こちらを参照してください。
flex
flex itemの余白サイズの振り割りを変更したい場合に使うプロパティで、伸長係数（flex-grow）や縮小係数（flex-shrink）、基本サイズ（flex-basis）の３つの値を一括して指定することができます。
構文と値
３つの値とその順番
値は、省略することができますが、指定の順序は守らなくてはいけません。
キーワード値
none
flex: none; は、flex: 0 0 auto; と同じ指定になります。
<div class="container">
<div class="item-A">item-A</div>
<div class="item-B">item-B</div>
<div class="item-C">item-C</div>
</div>
.container {
display: flex;
background: #eee; /* 灰色部分が余白 */
}
.item-A {
background: #fdd;
}
.item-B {
flex: none;
background: #efc;
}
.item-C {
flex: 0 0 auto;
background: #cff;
}
itemの大きさは固定されます。flexを設定しない場合の表示です。親要素のプロパティで余白の管理ができます。
.container {
display: flex;
background: #eee;
justify-content: space-around; /* 前後余白付き均等割り付け */
}
指定値が１つ
数のみならば、伸長係数とみなされ
flex: [伸長係数] 1 0%; と同じ設定になります。
単位か％が付いていれば、基本サイズとみなされ
flex: 1 1 [基本サイズ];と同じ設定になります。
縮小係数のみの指定はできません。
指定値が２つ
数のみならば、伸長係数と縮小係数とみなされ、
flex: [伸長係数] [伸長係数] 0%; と同じ設定になります。
数と単位付きの数ならば、伸長係数と基本サイズとみなされ、
flex: [伸長係数] 1 [基本サイズ];と同じ設定になります。
個別指定のプロパティ
flex-basis
itemの主軸方向のサイズを指定するプロパティです。主軸の向きが縦ならばheight、横ならばwidthに相当します。
構文
flex-basis: 値;
値
content
itemのcontentを基に自動的に大きさが決まります。
auto
初期値です。主軸が横方向であればwidth、縦方向であればheightの値になります。設定がなければ、contentになります。
長さ
絶対的な 長さを指定します。
%
親要素（flex container）の幅（主軸が横）または高さ（主軸が縦）に対する百分率割合で指定します。
.item-A {
flex-basis: content;
background: #fdd;
}
.item-B {
width: 35%;
background: #efc;
}
.item-C {
flex-basis: 35%;
background: #cff;
}
値contentは、内容そのもので「サイズは固定」です。
親要素のflex containerの余白指示 space-aroundに従って各item間には余白が設定されます。
flex-grow
伸長係数を指定するプロパティです。
値
flex container（親要素）がflex item（子要素）の合計サイズよりも大きい場合に生じる余白を、主軸上(横幅、縦ならば高さ)で、指定したitemに割り当てます。割り当てる量は、全部のitemとの割合で決まり、その基になる係数を０より大きい数で指定します。
初期値は０、「伸び縮みしない」です。
（指定した伸長係数）÷（すべてのitemの伸長係数の合計）の割合分、itemが伸びます。
.item-A {
background: #fdd;
flex-grow: 3;
}
.item-B {
background: #efc;
flex-grow: 2;
}
.item-C {
background: #cff;
flex-grow: 0;
}
割合に応じて余白分がそれぞれのitemに割り付けられ、親要素に由来する余白はなくなっています。itemのflex指定の方が、flex containerの指定よりも優先されます。
flex-shrink
縮小係数の指定をするプロパティです。
値
flex container（親要素）がflex item（子要素）の合計サイズよりも小さい（負の余白が生じた）とき、指定したitemの相対的な縮小割合の基になる係数を０より大きい数で指定します。
初期値は１「必要最低限の大きさは確保するが１の分縮小する」です。０とすると、「縮小はしない」となり、指定した大きさを保持します。
itemは、（そのitemの縮小係数）÷（すべてのitemの縮小係数の合計）の割合分縮みます。係数が大きいほど縮むことになります。
.container {
display: flex;
width: 75%; /* 親要素の幅を75%にします */
align-items: flex-end; /* 子要素を下側で表示させます */
height: 36px; /* 親要素を高くして、親要素の幅が分かるようにします */
background: #eee; /* 灰色部分が親要素の幅です */
}
.item-A {
flex-basis: 50%; /* 親要素の幅の半分 */
background: #fdd;
flex-shrink: 0; /* 大きさを保持させます */
}
.item-B {
flex-basis: 50%;
background: #efc;
flex-shrink: 3; /* 減少割合が大きくなります */
}
.item-C {
flex-basis: 50%; /* 子要素の幅合計は150%で、親要素の1.5倍です */
background: #cff;
flex-shrink: 1; /* 減少割合の初期値です */
}
親要素flex containerの幅の中で、各々のitemは縮小係数に応じて自動的に大きさが縮小されて表示されます。大きさを変えたくないitemには、０を指定します。
flexの指定は、flex container(親要素)の余白をflex item(子要素)内に取り込みitem自体の大きさを変えます。その場合、flex containerの余白はなくなります。
余白を余白として利用したい場合には、注意が必要です。