Main Axis (主軸)
flexbox における主軸は、flex-direction
プロパティの設定方向によって定義されます。flex-direction
が取り得る値は以下の四つです。
row
row-reverse
column
column-reverse
row
または row-reverse
を選んだ場合は、主軸はインライン要素の並ぶ方向に伸びる軸となります。
column
または column-reverse
を選んだ場合は、ページの上から下に向かってブロック要素の並ぶ方向に伸びる軸となります。
アイテムの flex
プロパティを使って、flex アイテム自体が使える幅を指定することで、主軸に沿ったサイズを制御することができます。また、アイテム間そしてアイテムの周囲の余白について、justify-content
プロパティを使って制御することができます。
関連項目
プロパティリファレンス
参考文献
- CSS Flexbox Guide: Basic Concepts of Flexbox
- CSS Flexbox Guide: Aligning items in a flex container
- CSS Flexbox Guide: Controlling Ratios of flex items along the main axis