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