Flexboxのプロパティ（flex-grow、flex-shrink、flex-basis)

■flex-grow
flex-growプロパティはflexのアイテムの伸長数を設定でき、数値で指定します。

Flexのコンテナがアイテムを格納して、余りがある場合、指定されたプロパティに沿って、自動的に余白を埋めるよう伸縮します。

ただし、flexアイテムでないときは伸縮しません。

■flex-shrink
flex-shrinkプロパティはflexアイテムの縮短数を設定でき、数値で指定します。

先ほどの「flex-grow」とは違い、数値が大きいほど幅が狭くなります。

そして、「flex-shrink」は「flex-wrap:nowrap」と同時に使用しないといけません。

■flex-basis
flex-basisの使い方は、width、heightと同じです。

flexアイテムの幅をwidthで指定しても、別のプロパティで比率を指定している場合、widthの値が反映されません。
その場合に幅を固定してくれるのが、このflex-basisプロパティです。

「flex-direction」が、row、row-reverseのときは「flex-basis」は横幅を指定します。
「flex-direction」が、columnやcolumn-reverseのときは「flex-basis」は縦の長さを指定することになります。

値に指定できるのは数値と、初期値である『auto』です。