CSSにおけるフレックス要素の主軸に沿った配置
プロパティjustify-contentは、主軸に沿った要素の配置を可能にします。以前に値center、space-between、space-around、space-evenlyについては学びました。ここではさらにいくつかの値について学びましょう。
値flex-startは要素を主軸の始端に、値flex-endは要素を主軸の終端に寄せます。例を見てみましょう。
例
主軸を左から右に向けます。プロパティflex-directionに値rowを設定します。
ブロックを軸の始端に寄せます。そのためにjustify-contentを値flex-startに設定します:
.parent {
display: flex;
flex-direction: row; /* 主軸は左から右へ */
justify-content: flex-start; /* ブロックを主軸の始端に */
}
コードの実行結果:
例
では、ブロックを軸の終端に寄せてみましょう。
そのためにjustify-contentを値flex-endに設定します:
.parent {
display: flex;
flex-direction: row; /* 主軸は左から右へ */
justify-content: flex-end; /* ブロックを主軸の終端に */
}
コードの実行結果:
例
次に、主軸を右から左に向けてみましょう。
プロパティflex-directionに値row-reverseを設定します。
ブロックを軸の始端、つまり右端に寄せます。そのためにjustify-contentを値flex-startに設定します:
.parent {
display: flex;
flex-direction: row-reverse; /* 主軸は右から左へ */
justify-content: flex-start; /* ブロックを主軸の始端に */
}
コードの実行結果:
例
では、ブロックを主軸の終端、つまり左端に寄せてみましょう。そのためにjustify-contentを値flex-endに設定します:
.parent {
display: flex;
flex-direction: row-reverse; /* 主軸は右から左へ */
justify-content: flex-end; /* ブロックを主軸の終端に */
}
コードの実行結果:
例
これまでの例では、主軸は水平方向でした。では、軸を回転させて垂直方向に向けてみましょう。
主軸を下向きに設定します。プロパティflex-directionに値columnを設定します。
ブロックを主軸の始端、つまり上端に寄せます。そのためにjustify-contentを値flex-startに設定します:
.parent {
display: flex;
flex-direction: column; /* 主軸は上から下へ */
justify-content: flex-start; /* ブロックを主軸の始端に */
}
コードの実行結果:
例
では、ブロックを主軸の終端、つまり下端に寄せてみましょう。そのためにjustify-contentを値flex-endに設定します:
.parent {
display: flex;
flex-direction: column; /* 主軸は上から下へ */
justify-content: flex-end; /* ブロックを主軸の終端に */
}
コードの実行結果:
例
主軸を反転させ、下から上に向けてみましょう。そのためにプロパティflex-directionに値column-reverseを設定します。
この場合、ブロックの順序が変わります - 軸の始端にはHTMLコードで最後にあるブロックが配置されます。
ブロックを主軸の始端、つまり下端に寄せてみましょう。そのためにjustify-contentを値flex-startに設定します:
.parent {
display: flex;
flex-direction: column-reverse; /* 主軸は下から上へ */
justify-content: flex-start; /* ブロックを主軸の始端に */
}
コードの実行結果:
例
ブロックを主軸の終端、つまり上端に寄せてみましょう。そのためにjustify-contentを値flex-endに設定します:
.parent {
display: flex;
flex-direction: column-reverse; /* 主軸は下から上へ */
justify-content: flex-end; /* ブロックを主軸の終端に */
}
コードの実行結果:
