flex-direction
は CSS のプロパティで、主軸の方向や向き (通常または逆方向) を定義することにより、フレックスコンテナー内でフレックスアイテムを配置する方法を設定します。
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
なお、 row
および row-reverse
の値は、フレックスコンテナーの書字方向に影響されます。 dir
属性が ltr
である場合は、 row
は左から右へ向かう水平軸を表し、また row-reverse
は右から左へ向かう水平軸を表します。一方、 dir
属性が rtl
である場合は、 row
は右から左へ向かう水平軸を表し、また row-reverse
は左から右へ向かう水平軸を表します。
構文
/* 行のテキストの方向に配置 */
flex-direction: row;
/* <row> と同様だが、逆向き */
flex-direction: row-reverse;
/* 積み重なるように配置する */
flex-direction: column;
/* <column> と同様だが、逆向き */
flex-direction: column-reverse;
/* グローバル値 */
flex-direction: inherit;
flex-direction: initial;
flex-direction: unset;
値
以下の値を指定できます。
row
- フレックスコンテナーの主軸は、書字方向と同じに定義されます。 main-start および main-end の位置は、コンテンツの書字方向と同様になります。
row-reverse
row
と同様ですが、main-start および main-end の位置が入れ替わります。column
- フレックスコンテナーの主軸は、ブロック軸と同じになります。 main-start および main-end の位置は、 writing-mode における before および after の位置と同じになります。
column-reverse
column
と同様ですが、 main-start および main-end の位置が入れ替わります。
アクセシビリティの考慮
flex-direction
プロパティを row-reverse
または column-reverse
の値で使うと、視覚上の表示と DOM の順序が一致しなくなります。これは、スクリーンリーダーなどの支援技術を使っている視覚障害者に不利な影響を及ぼします。視覚的な (CSS の) 順序が重要である場合は、読み上げソフトの利用者は正しい読み上げ順序でアクセスすることができなくなります。
公式定義
形式文法
例
フレックスコンテナーの列と行の反転
HTML
<h4>This is a Column-Reverse</h4>
<div id="content">
<div class="box" style="background-color:red;">A</div>
<div class="box" style="background-color:lightblue;">B</div>
<div class="box" style="background-color:yellow;">C</div>
</div>
<h4>This is a Row-Reverse</h4>
<div id="content1">
<div class="box1" style="background-color:red;">A</div>
<div class="box1" style="background-color:lightblue;">B</div>
<div class="box1" style="background-color:yellow;">C</div>
</div>
CSS
#content {
width: 200px;
height: 200px;
border: 1px solid #c3c3c3;
display: flex;
flex-direction: column-reverse;
}
.box {
width: 50px;
height: 50px;
}
#content1 {
width: 200px;
height: 200px;
border: 1px solid #c3c3c3;
display: flex;
flex-direction: row-reverse;
}
.box1 {
width: 50px;
height: 50px;
}
結果
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Flexible Box Layout Module flex-direction の定義 |
勧告候補 | 初回定義 |
ブラウザーの互換性
BCD tables only load in the browser
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
関連情報
- CSS フレックスボックスガイド: フレックスボックスの基本概念
- CSS フレックスボックスガイド: フレックスアイテムの並べ替え