flex-direction
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
flex-direction
は CSS のプロパティで、主軸の方向や向き(通常または逆方向)を定義することにより、フレックスコンテナー内でフレックスアイテムを配置する方法を設定します。
試してみましょう
なお、 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: revert;
flex-direction: revert-layer;
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 の) 順序が重要である場合は、スクリーンリーダーの利用者は正しい読み上げ順序でアクセスすることができなくなります。
公式定義
初期値 | row |
---|---|
適用対象 | フレックスコンテナー |
継承 | なし |
計算値 | 指定通り |
アニメーションの種類 | 離散値 |
形式文法
例
フレックスコンテナーの列と行の反転
HTML
<h4>これは Column-Reverse です</h4>
<div id="col-rev" class="content">
<div class="box red">A</div>
<div class="box lightblue">B</div>
<div class="box yellow">C</div>
</div>
<h4>これは Row-Reverse です</h4>
<div id="row-rev" class="content">
<div class="box red">A</div>
<div class="box lightblue">B</div>
<div class="box yellow">C</div>
</div>
CSS
.content {
width: 200px;
height: 200px;
border: 1px solid #c3c3c3;
display: flex;
}
.box {
width: 50px;
height: 50px;
}
#col-rev {
flex-direction: column-reverse;
}
#row-rev {
flex-direction: row-reverse;
}
.red {
background-color: red;
}
.lightblue {
background-color: lightblue;
}
.yellow {
background-color: yellow;
}
結果
仕様書
Specification |
---|
CSS Flexible Box Layout Module Level 1 # flex-direction-property |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
flex-flow
はflex-direction
およびflex-wrap
プロパティの一括指定プロパティです。- CSS フレックスボックスガイド: フレックスボックスの基本概念
- CSS フレックスボックスガイド: フレックスアイテムの順序