フレックスアイテムの操作

フレックスアイテムは、フレックスコンテナの子要素。 これらはもはやインライン要素やブロックレベル要素ではありません。 そのため、アイテムのプロパティを変更して正しい位置に配置可能。

flex-basis

]flex-basis] は、追加のスペースが分配される前のフレックスアイテムの初期サイズを定義。 px、%、em、または auto（内容に基づくサイズ）で設定可能。

flex-basis: auto | value;

flex-grow

flex-grow プロパティは、フレックスコンテナ内で余分なスペースがある場合に、各フレックスアイテムが他のアイテムと比較してどれだけ成長できるかを決定する。

flex-grow プロパティは単位なしの値を受け取り、他のアイテムと比較した際のフレックスアイテムの相対的な大きさを示す。例えば、あるアイテムの flex-grow の値が 2、別のアイテムが 1 の場合、フレックスコンテナに余分なスペースがあるとき、最初のアイテムは2番目のアイテムの2倍の割合で成長する。

order

orderプロパティは、コンテナ内のフレックスアイテムの表示順序を定義するために使用。デフォルトでは、フレックスアイテムはHTMLドキュメントに記載された順序で表示されるが、orderプロパティを使うことでこの順序を変更可能。

orderの値は任意の数値を指定可能。要素が3つしかなくても、2番目の要素にorder: 1000;を指定しても1000個の要素があることにはならず、2番目の要素が最後の位置に配置されることを意味する。また、複数の要素に同じorder値を指定した場合、ブラウザはHTMLドキュメントに記載された順序でそれらを配置。次のリストでアイテムのorderを並べ替える。課題は3番目のアイテムを最初の位置に配置すること。