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 2020.

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

試してみましょう
--------

なお、 `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 の) 順序が重要である場合は、スクリーンリーダーの利用者は正しい読み上げ順序でアクセスすることができなくなります。

* Flexbox & the keyboard navigation disconnect — Tink
* Source Order Matters | Adrian Roselli
* MDN "WCAG を理解する ― ガイドライン 1.3 の解説"
* Understanding Success Criterion 1.3.2 | W3C Understanding WCAG 2.0
公式定義
----

|  |  |
| --- | --- |
| 初期値 | `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 |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `flex-flow` は `flex-direction` および `flex-wrap` プロパティの一括指定プロパティです。
* CSS フレックスボックスガイド: *フレックスボックスの基本概念*
* CSS フレックスボックスガイド: *フレックスアイテムの順序*