フレックスボックス における交差軸 (cross axis / クロス軸) は、主軸 (main axis / メイン軸) と交差する軸で、 flex-direction
が row
または row-reverse
であるとき (つまり主軸が横方向であるとき)、縦方向の軸のことです。
主軸が column
または column-reverse
の場合は、交差軸は横方向となります。
交差軸方向のアイテムの位置合わせは、フレックスコンテナーの align-items
プロパティかアイテムの align-self
プロパティによって行われます。交差軸方向に余白がある複数行のフレックスコンテナーでは、 align-content
を使って行間を制御することができます。
理解を深める
プロパティリファレンス
関連情報
- CSS フレックスボックスガイド: フレックスボックスの基本概念
- CSS フレックスボックスガイド: フレックスコンテナー内のアイテムの配置
- CSS フレックスボックスガイド: フレックスアイテムの折り返しのマスター