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.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.

Please take two minutes to fill out our short survey.

flex-direction は CSS のプロパティで、主軸の方向や向き（通常または逆方向）を定義することにより、フレックスコンテナー内でフレックスアイテムを配置する方法を設定します。

試してみましょう

flex-direction: row;

flex-direction: row-reverse;

flex-direction: column;

flex-direction: column-reverse;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    <div>Item One</div>
    <div>Item Two</div>
    <div>Item Three</div>
  </div>
</section>

#example-element {
  border: 1px solid #c5c5c5;
  width: 80%;
  display: flex;
}

#example-element > div {
  background-color: rgba(0, 0, 255, 0.2);
  border: 3px solid blue;
  width: 60px;
  margin: 10px;
}

なお、 row および row-reverse の値は、フレックスコンテナーの書字方向に影響されます。 dir 属性が ltr である場合は、 row は左から右へ向かう水平軸を表し、また row-reverse は右から左へ向かう水平軸を表します。一方、 dir 属性が rtl である場合は、 row は右から左へ向かう水平軸を表し、また row-reverse は左から右へ向かう水平軸を表します。

構文

css

/* 行のテキストの方向に配置 */
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`
適用対象	フレックスコンテナー
継承	なし
計算値	指定通り
アニメーションの種類	離散値

形式文法

flex-direction = 
  row             |
  row-reverse     |
  column          |
  column-reverse

例

フレックスコンテナーの列と行の反転

HTML

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

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