flex-directionプロパティの説明
CSSのflex-directionプロパティは、フレックス・コンテナの主軸方向やアイテムの並び方向を指定します。ここで指定する値は、フレックス・ボックス・モジュールのアイテムとしてレイアウトされる全ての子要素に影響します。
フレックス・ボックスを扱う時は、垂直方向と水平方向、つまり縦と横という考え方ではなく、主軸（main axis）と交差軸（cross axis）という概念を使います。主軸はコンテナ内の空間でアイテムの並び順を決定する軸です。通常は行と同じ横へ伸びます。交差軸は主軸に対して垂直に交わる軸で、通常は列と同じ縦へ伸びます。これらには、先頭から末尾へと流れる向きがあります。つまり、主軸の方向や向きが変われば、交差軸が表す意味も変わります。
flex-directionは、この主軸の方向や向きを定義するものです。ここで指定された値が基準となってアイテムが配置されます。フレックス・ボックスを使う祭は、よく理解しておくことを推奨します。
flex-directionに指定できる値
row- コンテナの主軸を行方向と同じ横に伸ばします。
main-startおよびmain-endの位置は、コンテンツの書字方向と同じになります。 column- コンテナの主軸を列方向と同じ縦に伸ばします。
main-startおよびmain-endの位置は、writing-modeにおけるbeforeおよびafterの位置と同じになります。 row-reverse- コンテナの主軸を
rowと同じにし、main-startおよびmain-endの位置を逆にします。 column-reverse- コンテナの主軸を
columnと同じにし、main-startおよびmain-endの位置を逆にします。
flex-directionの使い方とサンプルコード
flex-directionプロパティの構文は以下の通りです。
/* 主軸を行方向に指定 */
flex-direction: row;
/* 主軸を列方向に指定 */
flex-direction: column;
/* 行方向の逆向き */
flex-direction: row-reverse;
/* 列方向の逆向き */
flex-direction: column-reverse;
/* グローバル値 */
flex-direction: inherit;
flex-direction: initial;
flex-direction: revert;
flex-direction: unset;
flex-directionの実例
それでは実際にflex-directionプロパティの書き方を見ていきましょう。以下の例では、単純なフレックス・ボックスを用意して、コンテナに異なる値のflex-directionを指定した場合の挙動です。アイテムの並び方や方向が変わっているのが確認できます。
<h2>flex-direction: row;</h2>
<div class="flex_box fd_1">
<div class="flex_item">1</div>
<div class="flex_item">2</div>
<div class="flex_item">3</div>
</div>
<h2>flex-direction: column;</h2>
<div class="flex_box fd_2">
<div class="flex_item">1</div>
<div class="flex_item">2</div>
<div class="flex_item">3</div>
</div>
<h2>flex-direction: row-reverse;</h2>
<div class="flex_box fd_3">
<div class="flex_item">1</div>
<div class="flex_item">2</div>
<div class="flex_item">3</div>
</div>
<h2>flex-direction: column-reverse;</h2>
<div class="flex_box fd_4">
<div class="flex_item">1</div>
<div class="flex_item">2</div>
<div class="flex_item">3</div>
</div>
h2 {
margin-top: 1rem;
font-size: 1rem;
}
.flex_box {
overflow: auto;
display: flex;
gap: 1rem;
margin-top: 1rem;
padding: 1rem;
background: #eee;
}
.flex_item {
width: 100px;
padding: .3rem;
background: #09f;
color: #fff;
flex: 1 1 auto;
}
.fd_1 {
flex-direction: row;
}
.fd_2 {
flex-direction: column;
}
.fd_3 {
flex-direction: row-reverse;
}
.fd_4 {
flex-direction: column-reverse;
}