CSS Flexboxにおける主軸と交差軸
Flexboxについて、2つの用語で説明することができます: 1つ目は「行(row)」または「列(column)」、 2つ目は「軸(axis)」です。行と列については すでに説明しましたので、次に軸について見ていきましょう。 軸を理解することは、要素を水平方向または垂直方向に 配置するために必要です。
Flex要素を扱う際には、常に主軸と交差軸が存在します。
要素を主軸に沿って、または主軸に対して垂直方向に
配置することができます。主軸は4つの方向を
持つことができます: 左から右、右から左、
上から下、下から上です。
交差軸の方向は、主軸の方向に依存します: 主軸が水平方向の場合、交差軸は上から下へ向かい、 主軸が垂直方向の場合、交差軸は左から右へ向かいます。 交差軸が他の方向になることはありません。
主軸の方向は、flex-directionプロパティで
制御されます。このプロパティの値がrowの場合、
主軸は左から右へ向かい、値がrow-reverseの場合、
右から左へ向かいます。値columnは軸を上から下へ、
値column-reverseは下から上へ向けます。
主軸が水平方向であるとします。 交差軸はどの方向を向きますか？
主軸が垂直方向であるとします。 交差軸はどの方向を向きますか？
交差軸が右方向を向いているとします。 その場合、主軸はどの方向を向く可能性がありますか？
交差軸が下方向を向いているとします。 その場合、主軸はどの方向を向く可能性がありますか？
交差軸は右から左に向くことができますか？
交差軸は下から上に向くことができますか？
flex-directionプロパティの値が
rowであるとします。
主軸はどの方向を向きますか？
交差軸はどの方向を向きますか？
flex-directionプロパティの値が
columnであるとします。
主軸はどの方向を向きますか？
交差軸はどの方向を向きますか？
flex-directionプロパティの値が
row-reverseであるとします。
主軸はどの方向を向きますか？
交差軸はどの方向を向きますか？
flex-directionプロパティの値が
column-reverseであるとします。
主軸はどの方向を向きますか？
交差軸はどの方向を向きますか？
