Flex Grow、Shrink、Basis

flex アイテムに指定する flex の短縮記法は、3つの値を設定します。flex-grow、flex-shrink、flex-basis です。

flex-basis は、アイテムが拡大または縮小される前の初期サイズを設定します。row 方向では width を上書きします。auto を指定すると、アイテムの幅またはコンテンツのサイズが使用されます。

flex-grow は、空きスペースがある場合に、兄弟要素と比較してアイテムがどれだけ拡大するかを決定します。値が 0 の場合は拡大しません。値が大きいほど、比例して多くのスペースを受け取ります。

コンテナに 300px の空きスペースがあり、2つのアイテムの flex-grow がそれぞれ 1 と 2 の場合、最初のアイテムには 100px、2番目のアイテムには 200px が追加されます（比率は 1:2 です）。

flex-shrink は、スペースが不足したときにアイテムがどれだけ縮小するかを制御します。デフォルト値は 1 で、すべてのアイテムが均等に縮小します。0 を指定すると縮小しません。

次のよく使うパターンを覚えておきましょう。

• flex: 1 = 均等に拡大・縮小し、basis は 0%
• flex: auto = flex: 1 1 auto
• flex: none = flex: 0 0 auto（固定）
• flex: 0 0 200px = 200px 固定で、拡大・縮小しない

すべての子要素に flex: 1 を設定すると、利用可能なスペースが均等に分配されます。basis は 0% になるため、アイテムは何もない状態から拡大し、スペースを比例して分け合います。

主軸方向では、flex-basis が width より優先されます。両方を設定した場合は flex-basis が優先されます（ただし flex-basis が auto の場合は width に委ねられます）。

flex-basis: 0（flex: 1 など）では、アイテムは 0 から始まり、比例して拡大します。これは真の比例配分です。flex-basis: auto では、アイテムはコンテンツ本来のサイズから始まり、その後拡大します。

固定されたサイドバー、柔軟なメイン領域、固定されたサイドバーで構成される、典型的なレイアウトです。

min-width と max-width を flex-grow と組み合わせて使用すると、拡大の上限と下限を制御できます。

flex-grow は余ったスペースを比例して分配します。flex-shrink はアイテムの縮小方法を制御します。flex-basis は開始時のサイズを設定します。短縮記法の flex: 1 は、スペースを均等に分配します。同じコンテナ内で、固定サイズのアイテムには flex: 0 0 Xpx を、柔軟なアイテムには flex: 1 を使用します。