path: root/files/ja/web/css/flex-direction/index.md

---
title: flex-direction
slug: Web/CSS/flex-direction
tags:
  - CSS
  - CSS Flexible Boxes
  - CSS Property
  - Reference
  - 'recipe:css-property'
translation_of: Web/CSS/flex-direction
---
<div>{{CSSRef}}</div>

<p><span class="seoSummary"><strong><code>flex-direction</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、主軸の方向や向き (通常または逆方向) を定義することにより、フレックスコンテナー内でフレックスアイテムを配置する方法を設定します。</span></p>

<div>{{EmbedInteractiveExample("pages/css/flex-direction.html")}}</div>

<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>

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

<h2 id="Syntax" name="Syntax">構文</h2>

<pre class="brush:css no-line-numbers notranslate">/* 行のテキストの方向に配置 */
flex-direction: row;

/* &lt;row&gt; と同様だが、逆向き */
flex-direction: row-reverse;

/* 積み重なるように配置する */
flex-direction: column;

/* &lt;column&gt; と同様だが、逆向き */
flex-direction: column-reverse;

/* グローバル値 */
flex-direction: inherit;
flex-direction: initial;
flex-direction: unset;
</pre>

<h3 id="Values" name="Values">値</h3>

<p>以下の値を指定できます。</p>

<dl>
 <dt><code>row</code></dt>
 <dd>フレックスコンテナーの主軸は、書字方向と同じに定義されます。 <strong>main-start</strong> および <strong>main-end</strong> の位置は、コンテンツの書字方向と同様になります。</dd>
 <dt><code>row-reverse</code></dt>
 <dd><code>row</code> と同様ですが、<strong>main-start</strong> および <strong>main-end</strong> の位置が入れ替わります。</dd>
 <dt><code>column</code></dt>
 <dd>フレックスコンテナーの主軸は、ブロック軸と同じになります。 <strong>main-start</strong> および <strong>main-end</strong> の位置は、 writing-mode における <strong>before</strong> および <strong>after</strong> の位置と同じになります。</dd>
 <dt><code>column-reverse</code></dt>
 <dd><code>column</code> と同様ですが、 <strong>main-start</strong> および <strong>main-end</strong> の位置が入れ替わります。</dd>
</dl>

<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2>

<p><code>flex-direction</code> プロパティを <code>row-reverse</code> または <code>column-reverse</code> の値で使うと、視覚上の表示と DOM の順序が一致しなくなります。これは、スクリーンリーダーなどの支援技術を使っている視覚障害者に不利な影響を及ぼします。視覚的な (CSS の) 順序が重要である場合は、読み上げソフトの利用者は正しい読み上げ順序でアクセスすることができなくなります。</p>

<ul>
 <li><a class="external external-icon" href="https://tink.uk/flexbox-the-keyboard-navigation-disconnect/" rel="noopener">Flexbox &amp; the keyboard navigation disconnect — Tink</a></li>
 <li><a class="external external-icon" href="http://adrianroselli.com/2015/09/source-order-matters.html" rel="noopener">Source Order Matters | Adrian Roselli</a></li>
 <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">MDN "WCAG を理解する ― ガイドライン 1.3 の解説"</a></li>
 <li><a class="external external-icon" href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-sequence.html" rel="noopener">Understanding Success Criterion 1.3.2 | W3C Understanding WCAG 2.0</a></li>
</ul>

<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>

<p>{{cssinfo}}</p>

<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>

{{csssyntax}}

<h2 id="Examples" name="Examples">例</h2>

<h3 id="Reversing_flex_container_columns_and_rows" name="Reversing_flex_container_columns_and_rows">フレックスコンテナーの列と行の反転</h3>

<h4 id="HTML" name="HTML">HTML</h4>

<pre class="brush: html notranslate">&lt;h4&gt;This is a Column-Reverse&lt;/h4&gt;
&lt;div id="content"&gt;
  &lt;div class="box" style="background-color:red;"&gt;A&lt;/div&gt;
  &lt;div class="box" style="background-color:lightblue;"&gt;B&lt;/div&gt;
  &lt;div class="box" style="background-color:yellow;"&gt;C&lt;/div&gt;
&lt;/div&gt;
&lt;h4&gt;This is a Row-Reverse&lt;/h4&gt;
&lt;div id="content1"&gt;
  &lt;div class="box1" style="background-color:red;"&gt;A&lt;/div&gt;
  &lt;div class="box1" style="background-color:lightblue;"&gt;B&lt;/div&gt;
  &lt;div class="box1" style="background-color:yellow;"&gt;C&lt;/div&gt;
&lt;/div&gt;
</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush: css notranslate">#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;
}</pre>

<h4 id="Result" name="Result">結果</h4>

<p>{{EmbedLiveSample('Reversing_flex_container_columns_and_rows', '', '550')}}</p>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Flexbox', '#flex-direction', 'flex-direction')}}</td>
   <td>{{Spec2('CSS3 Flexbox')}}</td>
   <td>初回定義</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<p>{{Compat("css.properties.flex-direction")}}</p>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li>CSS フレックスボックスガイド: <em><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">フレックスボックスの基本概念</a></em></li>
 <li>CSS フレックスボックスガイド: <em><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">フレックスアイテムの並べ替え</a></em></li>
</ul>