Flex Grow/Shrink/Basis

Flexboxのコンテイナー

display:flex;
flex-direction:row;

Flexboxの各アイテム

flex:{flex-grow} {flex-shrink} {flex-basis};

flex-growとflex-shrinkは単位なしの数
flex-basisは幅/高さなので単位がある。

⇒ One value, unitless number => flex-growと解釈される。flex-basisは０。
flex: 2;

⇒ One value, width/height => flex-growと解釈される。
flex: 10em;
flex: 30%;
flex: min-content;

⇒ Two values => flex-grow | flex-basis と解釈される。
flex: 1 30px;

⇒ Two values => flex-grow | flex-shrink と解釈される。
flex: 2 2;

⇒ Three values => flex-grow | flex-shrink | flex-basis と解釈される。
flex: 2 2 10%;

flex-growのdefault値は0、つまりdefaultでは、大きくならないということである。
flex-shrinkのdefault値は1、従ってdefaultで、小さくなれる。

flex:1 200px;

flex:2 150px;

flex:3 100px;

上の例では、最小では、幅が200px,150px,100pxにそれぞれなる。
増加は、1:2:3の割合で増える。