子要素で使うflexプロパティは、flex-grow, flex-shrink, flex-basisのショートハンド（省略形）となります。

例えば横並びのflexディスプレイの子要素に以下の設定をすると、

flex: 0 0 18%　（flex-grow = 0, flex-shrink = 0, flex-basis = 18%）

その子要素は、横に伸びない（flex-growしない=元の横幅のまま）、縮まない（flex-shrinkしない）、横幅は親要素の18%、ということになります。

また、flexプロパティで、大きさを%（相対値）にするときは、他の２つは0にするのが基本。

flex-growは、横に並ぶためのスペース（親要素の幅）にまだ余裕がある時に、兄弟要素と比較して当該要素をどのぐらい伸ばすか（正確には係数）を指定するもの。伸ばさないときは0、兄弟要素より伸ばしたいときは、2とか3とかより大きい数にしよう！初期値は０（伸びない）！

flex-shrinkは、親要素が当該要素がはみ出すほど縮んだときに、当該要素をどのぐらいを縮ませるかを決めるもの。縮ませたくないときは0、優先して縮ませたいときはより2とか3とか大きい数字にしよう！初期値は１（縮む）！

flex-basisは、当該要素の初期サイズ！

このflexプロパティを使って便利に！

例えばA要素（幅は一定）とB要素（A要素を引いた残り幅）を横並びにしたい時は、

Aに flex: 0 0 18%;　Bに flex: 1;

にするだけで解決！スゴ！！（ちなみに flex: 1; = flex: 1 1 auto; ）

flex propatyの詳細は、こちら！