flex-*の伸び縮み系を理解するぞ！
flex-grow / flex-shrink / flex-basisの三つについて整理しました。
- flex-grow：余白を均等に広がる割合を指定
- flex-shrink：はみ出した際に縮む割合を指定
- flex-basis：子要素の基準幅を指定
それぞれ詳しく見ていきます 
flex-growとは
flex-grow は CSS のプロパティで、フレックスコンテナー内の正の余白のうち、フレックスアイテムの主軸長に割り当てる量を指定するフレックス成長率を設定します。
MDNではこのように説明されていますが、簡単に言うと
-
display:flex;で並んでいる子要素がある - 親要素には余っている幅（子要素が成長できる幅）があるとする
-
flex-growを子要素に指定すると、「余ったスペース（余白）をどの割合で分け合うか」を指定できる
では、値がどのように影響するかを見ていきましょう。
子要素に何も指定しない場合
flex-growの初期値は0なので、余っている幅があっても子要素は伸びません。
See the Pen Untitled by 加藤璃子 (@kbsovgkd-the-solid) on CodePen.
子要素①にflex-grow:1、子要素②には何も指定しない場合
何も指定しない場合、初期値は0なので、1:0で子要素①だけが余っている幅を使って伸びています。
See the Pen Untitled by 加藤璃子 (@kbsovgkd-the-solid) on CodePen.
子要素①②、それぞれにflex-grow:1を指定する場合
1:1で余っている幅を分け合って、それぞれ伸びています。
See the Pen grow1:1 by 加藤璃子 (@kbsovgkd-the-solid) on CodePen.
子要素①にflex-grow:1、子要素②にflex-grow:2を指定する
1:2で余っている幅を分け合って、それぞれ伸びています。
See the Pen Untitled by 加藤璃子 (@kbsovgkd-the-solid) on CodePen.
数値を色々指定してみて、flex-growの値は割合を指定しているという意味が掴めました。
同じflex-grow:1を指定していても、他要素のflex-growの値次第で伸びる幅が変わってきます。
2カラム構成にしたい時などにwidthを指定しなくても伸びてくれるので、便利そうですね 
flex-shrinkとは
flex-shrink は CSS のプロパティで、フレックスアイテムのフレックス縮小係数を設定します。すべてのフレックスアイテムの寸法がフレックスコンテナーより大きい場合、フレックスアイテムは flex-shrink 値に従って収縮します。それぞれのフレックス行の負の余白は、その行の flex-shrink 値が 0 より大きいフレックスアイテム間で分配されます。
簡単にいうと、はみ出た時に子要素それぞれが負担する縮みの比率を決めるプロパティです。
子要素に何も指定しない場合
実行結果だけでは分かりにくいですが、親要素が600pxに対して、子要素は二つとも800pxを指定しています。
はみ出ていない！？
See the Pen Untitled by 加藤璃子 (@kbsovgkd-the-solid) on CodePen.
実は、flex-shrinkのデフォルト値は1なので、子要素が同じ割合負担して縮んだ結果こうなっています。
flex-growと同様に、flex-shrinkの値も割合として機能します。
子要素①にflex-shrink:0,子要素②には何も指定しない場合
子要素①めちゃくちゃはみ出ている！！
子要素②が頑張って縮んでいることに泣けます。
0を指定している子要素①は、のびのびと元のwidthになって、親要素を突き抜けています
See the Pen Untitled by 加藤璃子 (@kbsovgkd-the-solid) on CodePen.
※子要素②は分かりやすいように赤色にしています
子要素①にflex-shrink:1,子要素②にflex-shrink:2を指定する場合
はみ出ちゃった分を1:2で負担して縮んでいます
See the Pen Untitled by 加藤璃子 (@kbsovgkd-the-solid) on CodePen.
flex-growが伸びる割合を指定するのに対して、flex-shrinkは縮める割合を指定することがわかりました。
デフォルト値が1なので、表示幅が小さくなっても、幅を変えたくない要素には0を指定すると良さそうです。
flex-basisとは
flex-basis は CSS のプロパティで、フレックスアイテムの主要部分の初期の寸法を設定します。 box-sizing で設定していない限り、このプロパティはコンテンツボックスの寸法を定義します。
このプロパティは比較的理解しやすいでしょう。flexbox内の子要素の基準幅を指定するプロパティです。
初期値はautoで、width/heightに基づいて初期サイズを決定します。
値は~~pxなどの絶対値や親要素に対する%を持ちます。
子要素①にflex-basis:300pxを指定
widthとflex-basisではflex-basisが優先される
（flex-basisがautoの場合はwidthが適用される）
子要素①には②と同じように、width: 100pxが指定されています。
しかし、widthとflex-basisではflex-basisが優先されるので、300pxになっています。
意図しない挙動が起きないように注意が必要そうです！
See the Pen Untitled by 加藤璃子 (@kbsovgkd-the-solid) on CodePen.
親要素でflex-direction: column;が指定されている場合
先ほどと同じく、子要素①にはflex-basis:300pxを指定しています
子要素が縦並びになると、flex-basisは高さ（縦幅）に影響する
子要素①にはheight:100pxが指定されていますが、flex-basis: 300pxの指定によって高さが300pxになっています。
heightの場合もflex-basisが優先されるようです。
See the Pen Untitled by 加藤璃子 (@kbsovgkd-the-solid) on CodePen.
flexで三つを一括指定できる
flex は CSS の一括指定プロパティで、フレックスアイテムをフレックスコンテナーの領域に収めるために、どのように伸長・収縮させるかを指定します。
これまで紹介した3種のプロパティを一括で指定できます。
値を一つ指定
See the Pen Untitled by 加藤璃子 (@kbsovgkd-the-solid) on CodePen.
子要素①にflex: 1を指定しています。
この1行で、三つ指定されています
- flex-grow: 1
- flex-shrink: 1
- flex-basis: 0%
flex-basis: 0から始まり、flex-grow: 1によって余白を均等に分配されて伸びた結果、この幅になっています。
値の指定が一つの場合、数値はflex-growに影響する
flex: 2であれば、flex-grow: 2となり、他の数値は変わりません
値を二つ指定
See the Pen Untitled by 加藤璃子 (@kbsovgkd-the-solid) on CodePen.
子要素①にflex: 1 30px;を指定しています。
この場合、三つの指定は以下のようになります。
- flex-grow: 1
- flex-shrink: 1 // 初期値と同じ
- flex-basis: 30px
上記の指定では、30pxを基準として余白を分配するため、結果として値を一つ指定した場合と似たような見た目になっています。
また、flex: 2 2のように、整数値を二つ入れると、flex-growとflex-shrinkを指定することになります。
値の指定が二つの場合、影響するのは flex-grow ＋ flex-shrink or flex-basis
値を三つ指定
三つとも値を指定する場合は、flex: 2 2 10%;のようになります.
この場合、三つの指定は以下のようになります。
- flex-grow: 2
- flex-shrink: 2
- flex-basis: 10%
その他、グローバル値なども入ります。詳しくは↓
flexで一括指定できるのは便利ですが、指定しなくて良いものまで指定していないか注意が必要そうです。
まとめ
-
flex-grow：余白を均等に広がる割合を指定 -
flex-shrink：はみ出した際に縮む割合を指定 -
flex-basis：子要素の基準幅を指定 -
flex：上記三つを一括指定できるプロパティ
上記のプロパティを実際に使った中で気づきがあれば、また追記します 
最後までお読みいただき、ありがとうございます 
参考