CSSフレキシブルボックスレイアウトモジュール レベル1

W3C 候補勧告草案,

この文書の詳細
このバージョン:
https://www.w3.org/TR/2025/CRD-css-flexbox-1-20251014/
最新公表バージョン:
https://www.w3.org/TR/css-flexbox-1/
編集者草案:
https://drafts.csswg.org/css-flexbox/
履歴:
https://www.w3.org/standards/history/css-flexbox-1/
実装レポート:
https://wpt.fyi/results/css/css-flexbox
フィードバック:
CSSWG イシューレポジトリ
仕様内インライン
編集者:
Tab Atkins Jr. (Google)
Elika J. Etemad / fantasai (Apple)
(Microsoft)
前編集者:
(Microsoft Corporation)
L. David Baron (Mozilla)
(Mozilla Corporation)
(以前 Opera Software)
(以前 Netscape Corporation)
この仕様の編集提案:
GitHub 編集者
課題リスト:
https://drafts.csswg.org/css-flexbox-1/issues
テストスイート:
https://wpt.fyi/results/css/css-flexbox/

Copyright © 2025 World Wide Web Consortium. W3C® liability, trademark and permissive document license rules apply.

概要

この仕様は、ユーザーインターフェースデザインに最適化されたCSSボックスモデルについて記述しています。フレックスレイアウトモデルでは、フレックスコンテナの子要素は任意の方向に配置でき、サイズを「フレックス」させることができ、未使用のスペースを埋めるために拡大したり、親要素からはみ出さないように縮小したりします。子要素の水平方向および垂直方向の整列も簡単に操作できます。これらのボックス（水平内に垂直、または垂直内に水平）をネストすることで、2次元レイアウトを構築できます。

CSSは、構造化文書（HTMLやXMLなど）のレンダリングを画面や紙などで記述するための言語です。

この文書のステータス

このセクションは、発行時点でのこの文書のステータスについて説明しています。 現在のW3C出版物の一覧やこの技術レポートの最新の改訂版は、W3C標準と草案インデックスで確認できます。

この文書は CSS作業グループ によって 候補勧告草案 として 勧告トラックを使用して公開されました。 候補勧告として公開されたことは、W3Cおよびそのメンバーによる承認を意味するものではありません。 候補勧告草案は、作業グループが次の候補勧告スナップショットに含める予定の、前回の候補勧告からの変更を統合したものです。

この文書はドラフトであり、 今後更新・差替え・廃止される可能性があります。 この文書を進行中の作業以外として引用することは適切ではありません。

フィードバックは GitHubでIssueを提出（推奨） し、タイトルに仕様コード「css-flexbox」を含めてください。例：「[css-flexbox] …コメント要約…」。 すべての課題やコメントはアーカイブされています。 または、フィードバックを(アーカイブ済み) 公開メーリングリスト www-style@w3.org に送ることもできます。

この文書は 2025年8月18日 W3Cプロセス文書に従って運用されています。

この文書はW3C特許ポリシーの下で活動するグループによって作成されました。 W3Cは、グループの成果物に関連して作成された特許開示の公開リストを管理しています。 そのページには特許開示方法も記載されています。 個人が本質的クレームを含むと考える特許を実際に知っている場合は、 W3C特許ポリシー第6節に従って情報を開示する必要があります。

1. はじめに

このセクションは規範的ではありません。

CSS 2.1では4つのレイアウトモードが定義されています。これらは、兄弟や祖先ボックスとの関係に基づいてボックスのサイズと位置を決定するアルゴリズムです：

このモジュールは新しいレイアウトモードであるフレックスレイアウトを導入します。これはより複雑なアプリケーションやウェブページのレイアウト用に設計されています。

1.1. 概要

このセクションは規範的ではありません。

フレックスレイアウトは表面的にはブロックレイアウトに似ていますが、floatやcolumnのような、ブロックレイアウトで使える複雑なテキスト／文書中心のプロパティは多くありません。 その代わり、ウェブアプリや複雑なウェブページでよく必要とされる、スペースの分配やコンテンツの整列に強力でシンプルなツールを提供します。 フレックスコンテナの内容：

以下はカタログの例です。各アイテムにはタイトル、写真、説明、購入ボタンがあります。 デザイナーの意図は、各エントリの全体サイズを同じにし、写真をテキストの上に配置し、購入ボタンを説明文の長さに関係なく下に揃えることです。 フレックスレイアウトにより、このデザインの多くの要件が容易になります： 
#deals {
  display: flex;        /* フレックスレイアウト（アイテムを同じ高さにする）*/
  flex-flow: row wrap;  /* アイテムの複数行折り返しを許可 */
}
.sale-item {
  display: flex;        /* 各アイテムをフレックスレイアウトで配置 */
  flex-flow: column;    /* アイテム内容を縦方向に配置 */
}
.sale-item > img {
  order: -1;            /* 画像を他の内容より前に（視覚順で）移動 */
  align-self: center;   /* 画像を横方向（副軸）中央に揃え */
}
.sale-item > button {
  margin-top: auto;     /* 自動上マージンでボタンを下部へプッシュ */
}

<section id="deals">
  <section class="sale-item">
    <h1>パソコン スターターキット</h1>
    <p>予算が限られている方におすすめのパソコンセットです。
    <ul>
      <li>パソコン
      <li>モニター
      <li>キーボード
      <li>マウス
    </ul>
    <img src="images/computer.jpg"
         alt="付属品：白いパソコンと周辺機器一式。">
    <button>今すぐ購入</button>
  </section>
  <section class="sale-item">
    …
  </section>
  …
</section>
付属品：白いパソコン、キーボード、モニター。

パソコン スターターキット

予算が限られている方におすすめのパソコンセットです。

  • パソコン
  • モニター
  • キーボード
  • マウス
美しいASCIIアートが印刷できます。

プリンター

印刷できるのはASCIIアートのみです。

  • 用紙・インクは付属しません
上記コードのレンダリング例。

1.2. モジュールの相互作用

このモジュールはdisplayプロパティ[CSS2]の定義を拡張し、新しいブロックレベル型・インラインレベル型のdisplay値を追加し、新しいフォーマットコンテキストの種類とそれを制御するプロパティを定義します。 本モジュールで定義されたプロパティは、::first-lineや::first-letter疑似要素には適用されません。

CSS Box Alignment Moduleはここで導入された整列プロパティ (justify-content, align-items, align-self, align-content) の定義を拡張・上書きしています。

テスト

1.3. 値の定義

本仕様はCSSプロパティ定義の規約（[CSS2]）と値定義構文（[CSS-VALUES-3]）に従います。 仕様で定義されていない値型はCSS Values & Units [CSS-VALUES-3]に定義されています。 他のCSSモジュールとの組み合わせで、これらの値型定義が拡張される場合があります。

各プロパティ定義に記載された値以外にも、 本仕様で定義されるすべてのプロパティはCSS全域キーワードも値として受け付けます。 可読性のため、明示的な記載は省略しています。

2. フレックスレイアウトのボックスモデルと用語

フレックスコンテナは、displayプロパティの値が flex または inline-flexとなる要素によって生成されるボックスです。 フレックスコンテナの通常フロー内の子要素はフレックスアイテムと呼ばれ、フレックスレイアウトモデルで配置されます。

ブロック／インラインレイアウトとは異なり、 それらのレイアウト計算はブロック方向／インライン方向に偏っていますが、 フレックスレイアウトはフレックス方向に偏っています。 フレックスレイアウトについて説明しやすくするため、 このセクションではフレックスフロー相対の用語を定義します。 flex-flow値やwriting modeによって、これらの用語が物理方向（上/右/下/左）、軸（縦/横）、サイズ（幅/高さ）にどう対応するかが決まります。

rowフレックスコンテナに適用される各方向・サイズ用語の図例。
主軸
主寸法
フレックスコンテナの主軸は、フレックスアイテムが並ぶ主要な軸です。 主寸法に沿って広がります。
主開始(main-start)
主終了(main-end)
フレックスアイテムはコンテナ内で 主開始側から 主終了側に向かって配置されます。
主サイズ
主サイズプロパティ
フレックスコンテナやフレックスアイテムの主サイズは、幅または高さ（主寸法側）を指します。 主サイズプロパティは、widthまたはheightプロパティのうち主寸法側のものです。 同様に、min主サイズプロパティおよびmax主サイズプロパティは、 min-width/max-width または min-height/max-height（主寸法側）で決まります。 主寸法側の値です。 それらは、min主サイズ/max主サイズとなります。

フレックスレイアウトでは、主サイズはflexプロパティで制御され、主サイズプロパティで直接制御されません。

注: これは、主寸法（width, height, inline-size, block-size) に関するフレックスアイテムの使用サイズの参照は、フレックス処理後の主サイズを指すことになります。

副軸
副寸法
主軸に垂直な軸は副軸と呼ばれます。 副寸法に沿って広がります。
副開始(cross-start)
副終了(cross-end)
フレックスラインはアイテムで埋められ、コンテナ内で副開始側から副終了側に向かって配置されます。
副サイズ
副サイズプロパティ
フレックスコンテナやフレックスアイテムの副サイズは、幅または高さ（副寸法側）を指します。 副サイズプロパティは、widthまたはheightプロパティのうち副寸法側のものです。 同様に、min副サイズプロパティおよびmax副サイズプロパティは、 min-width/max-width または min-height/max-height（副寸法側）で決まります。 副寸法側の値です。 それらは、min副サイズ/max副サイズとなります。

本仕様で使われている追加のサイズ用語はCSS Intrinsic and Extrinsic Sizingで定義されています。[CSS-SIZING-3]

テスト

3. フレックスコンテナ: flex および inline-flex display値

名前: display
新しい値: flex | inline-flex
テスト
flex
この値を指定すると、要素はフレックスコンテナボックスを生成し、 フローレイアウト内で配置されるときはブロックレベルとなります。
テスト
inline-flex
この値を指定すると、要素はフレックスコンテナボックスを生成し、 フローレイアウト内で配置されるときは インラインレベルになります。
テスト

フレックスコンテナは、その内容に対して新しいフレックス整形コンテキストを確立します。 これはブロック整形コンテキストを確立するのと同じですが、ブロックレイアウトの代わりにフレックスレイアウトが使用されます。 例えば、フロートはフレックスコンテナ内に侵入せず、フレックスコンテナのマージンはその内容のマージンと折り畳まれません。フレックスコンテナは、その内容に対してブロックコンテナと全く同じように包含ブロックを形成します。[CSS2] overflowプロパティはフレックスコンテナに適用されます。

テスト

フレックスコンテナはブロックコンテナではないため、ブロックレイアウトを前提として設計された一部のプロパティはフレックスレイアウトの文脈では適用されません。特に：

テスト

要素のdisplayプロパティが inline-flexに指定されている場合、 displayプロパティは特定の状況下でflexに算出されます。 CSS 2.1 セクション9.7の表に行が追加され、 「Specified Value（指定値）」列にinline-flex、 「Computed Value（算出値）」列にflexが入ります。

4. フレックスアイテム

ざっくり言えば、フレックスアイテムは フレックスコンテナのフロー内内容を表すボックスです。

フレックスコンテナ のインフローの子要素はそれぞれ フレックスアイテム となり、各子 テキストシーケンス は 匿名 の ブロックコンテナ フレックスアイテム にラップされます。 ただし、テキストシーケンス 全体が 文書の空白文字（つまり white-space プロパティの影響を受ける文字）のみで構成されている場合は、 代わりに描画されません（テキストノード が display:none であるかのように扱われます）。

テスト

フレックスアイテムの例：

<div style="display:flex">

    <!-- フレックスアイテム: ブロック子要素 -->
    <div id="item1">block</div>

    <!-- フレックスアイテム: float要素 (floatは無視される) -->
    <div id="item2" style="float: left;">float</div>

    <!-- フレックスアイテム: インライン内容の周りの匿名ブロックボックス -->
    anonymous item 3

    <!-- フレックスアイテム: インライン子要素 -->
    <span>
        item 4
        <!-- フレックスアイテムは ブロックの周りで分割されない -->
        <q style="display: block" id=not-an-item>item 4</q>
        item 4
    </span>
</div>
上記コードブロックから決定されるフレックスアイテム
  1. blockを含むフレックスアイテム。
  2. floatを含むフレックスアイテム。
  3. （匿名、スタイル不可）anonymous item 3を含むフレックスアイテム。
  4. 連続する3つのブロックを含むフレックスアイテム：
    • item 4を含む匿名ブロック。
    • <q>要素ブロック（item 4を含む）。
    • item 4を含む匿名ブロック。

要素間の空白は消えることに注意してください。 この空白は独立したフレックスアイテムにはなりませんが、要素間テキスト自体は匿名フレックスアイテムにラップされます。

また、匿名アイテムのボックスにはスタイルを割り当てることができないため、スタイル不可であることにも注意してください。 ただし、その内容はフレックスコンテナから（フォント設定などの）スタイルを継承します。

フレックスアイテムはその内容に対して独立した整形コンテキストを確立します。 ただし、フレックスアイテム自身はフレックスレベルボックスであり、ブロックレベルボックスではありません。 それらはコンテナのフレックス整形コンテキストに参加し、ブロック整形コンテキストには参加しません。

注: この仕様を読む著者は以下のボックス生成と静的位置の詳細を飛ばしてもよいでしょう。

要素の最も近い先祖要素（display:contentsの先祖は飛ばす）の算出されたdisplay値が flexまたはinline-flexの場合、 その要素自身のdisplay値はblockified（ブロック化）されます。 （この型のdisplay値変換の詳細はCSS2.1§9.7 [CSS2]や CSS Display 3 § 2.7 自動ボックスタイプ変換を参照してください。）

注: flexやinline-flex要素が最終的にフレックスコンテナボックスを生成しない場合（例：置換要素やdisplay: noneのサブツリーの場合）でも、ブロック化は発生します。

注: displayの一部の値は通常、元のボックスの周囲に匿名ボックスの生成を引き起こします。 そのようなボックスがフレックスアイテムである場合、 まずブロック化されるため、匿名ボックス生成は発生しません。 例えば、2つの隣接するフレックスアイテムがdisplay: table-cellの場合、1つの匿名テーブルにラップされるのではなく、2つの独立したdisplay: blockのフレックスアイテムになります。

display: table のフレックスアイテムの場合、 テーブルラッパーボックスがフレックスアイテムとなり、 align-selfプロパティはそれに適用されます。 キャプションボックスの内容は テーブルラッパーボックスのmin-contentおよびmax-contentサイズの計算に寄与します。 ただし、widthやheightと同様に、flexのロングハンドはテーブルボックスに次のように適用されます： フレックスアイテムの最終サイズは、 テーブルラッパーボックスの端とテーブルボックスの内容端との間の距離がすべてテーブルボックスのborder+padding領域の一部であるかのようにレイアウトを行い、 テーブルボックスがフレックスアイテムであるかのように計算されます。

テスト

4.1. 絶対位置指定されたフレックスの子要素

絶対位置指定の子要素はフロー外であるため、フレックスコンテナのフレックスレイアウトには参加しません。

フレックスコンテナの絶対位置指定の子要素の交差軸の端は、静的位置レクトのコンテンツ端（フレックスコンテナのもの）です。 静的位置レクトの主軸側の端は、子要素がそのフレックスコンテナ内で唯一のフレックスアイテムであり、かつ子要素とコンテナの両方が使用サイズの固定サイズボックスであると仮定した場合に、子要素のマージン端が配置される位置です。 （この目的のため、子要素のautoマージンはゼロとして扱われます。）

テスト
この効果により、例えば絶対配置された align-self: center; を フレックスコンテナ の子要素に指定した場合、 子要素の auto オフセットは フレックスコンテナ の 交差軸で中央寄せとなります。

4.2. フレックスアイテムのマージンとパディング

隣接する フレックスアイテム のマージンは 相殺されません。

フレックスアイテム 上のパーセンテージマージンとパディングは、 ブロックボックス 上のものと同様に、 包含ブロックのインラインサイズに対して解決されます。 例えば left/right/top/bottom の各パーセンテージは、 横書き writing-mode の場合、 すべて 包含ブロック の 幅に対して解決されます。

auto マージンは、対応する次元の余剰スペースを吸収するよう拡張されます。 アラインメントのために使ったり、 隣接するフレックスアイテム同士を離すためにも利用できます。 auto マージンによる整列も参照。

テスト

4.3. フレックスアイテムのZ順序

フレックスアイテムは、インラインブロックと全く同じように描画されます [CSS2] が、 orderで修正された文書順が生の文書順の代わりに使われ、 z-indexがauto以外の場合は positionがstaticであってもスタッキングコンテキストが作られます （positionがrelativeであるかのように振る舞います）。

注: フレックスアイテムの外側に配置された子孫も、フレックスアイテムが確立したスタッキングコンテキストに依然として参加します。

テスト

4.4. 折りたたまれたアイテム

フレックスアイテムにvisibility:collapseを指定すると、 それは折りたたまれたフレックスアイテムとなり、 visibility:collapseがテーブル行やテーブル列に与える効果と似た動作になります。 折りたたまれたフレックスアイテムは描画から完全に除外されますが、 フレックスラインの交差サイズを維持する「支柱」が残されます。 このため、フレックスコンテナが1つのフレックスラインしか持たない場合、 アイテムを動的に折りたたみ／展開しても フレックスコンテナの主サイズは変化することがありますが、 交差サイズには影響せず、ページ全体のレイアウトが「揺れる」ことはありません。 ただしフレックスラインの折り返しは折りたたみ後に再計算されるため、 複数行ある場合はコンテナの交差サイズが変化することもあります。

折りたたまれたフレックスアイテムは描画されませんが、 整形構造には現れます。 そのため、display:noneアイテムとは異なり [CSS2]、 ボックスが整形構造に現れることに依存する効果（カウンターの増分やアニメーション・トランジションの実行など）は 折りたたまれたアイテムにも適用されます。

テスト
次の例では、 サイドバーはその内容に合わせてサイズ設定されます。visibility: collapse を使用すると、 ナビゲーションサイドバーの一部を動的に非表示にしても幅には影響しません。最も幅の広い項目（「Architecture」）が折りたたみセクションにある場合でも同様です。
下記サンプルコードのライブレンダリング例
左のメニューにカーソルを合わせると、 各セクションが展開されてサブ項目が表示されます。 サイドバーの幅（およびこのメインエリアの幅）を安定させるために、 visibility: collapse を display: none の代わりに使用します。 これにより、サイドバーは常に「建築」という語句の幅に十分な広さとなり、 実際に表示されていない場合でも幅は維持されます。 
@media (min-width: 60em) {
  /* 十分な余白がある場合のみ二列レイアウト（デフォルトの文字サイズ相対）*/
  div { display: flex; }
  #main {
    flex: 1;         /* メインが残りスペースをすべて占める */
    order: 1;        /* ナビゲーションの右（後）に配置 */
    min-width: 12em; /* メインエリアの最適なサイズ調整 */
  }
}
/* メニュー項目はflexレイアウトを使うので visibility:collapse が機能する */
nav > ul > li {
  display: flex;
  flex-flow: column;
}
/* ターゲットでないサブメニューを動的に折りたたむ */
nav > ul > li:not(:target):not(:hover) > ul {
  visibility: collapse;
}

<div>
  <article id="main">
    面白い読み物
  </article>
  <nav>
    <ul>
      <li id="nav-about"><a href="#nav-about">概要</a>
        …
      <li id="nav-projects"><a href="#nav-projects">プロジェクト</a>
        <ul>
          <li><a href="…">アート</a>
          <li><a href="…">建築</a>
          <li><a href="…">音楽</a>
        </ul>
      <li id="nav-interact"><a href="#nav-interact">交流</a>
        …
    </ul>
  </nav>
</div>
<footer>
…

支柱のサイズを計算するには、まずすべてのアイテムを折りたたまない状態でフレックスレイアウトを実行し、 次に各折りたたまれたフレックスアイテムを元のラインの交差サイズを維持する支柱に置き換えて再度実行します。 visibility:collapseがフレックスレイアウトとどのように相互作用するかの規範定義は フレックスレイアウトアルゴリズムを参照してください。

注: フレックスアイテムにvisibility:collapseを使うと フレックスレイアウトアルゴリズムが途中から再実行され、 最もコストが高いステップが再度実施されます。 動的に折りたたみ／展開しない場合は、レイアウトエンジンの効率のためにdisplay:noneで非表示にすることを推奨します。 （visibility変更時は一部のみ再実行されるため、 動的ケースでは 'visibility: collapse' の利用が推奨されます。）

4.5. フレックスアイテムの自動最小サイズ

注: auto キーワードは 自動最小サイズを表し、 min-widthおよびmin-heightプロパティの新しい初期値です。 このキーワードは以前は本仕様で定義されていましたが、 現在はCSS Sizingモジュールで定義されています。

より妥当なデフォルトの最小サイズをフレックスアイテムに提供するため、 主軸の自動最小サイズ（フレックスアイテムで算出されたoverflow値が非スクロール可能の場合）は内容ベースの最小サイズとなります。 スクロールコンテナの場合、 自動最小サイズは通常通りゼロです。

内容ベースの最小サイズは フレックスアイテムが 置換要素か否かによって異なります：

置換要素の場合

内容サイズ候補と転送サイズ候補（存在すれば）のうち小さい方を使用し、 指定サイズ候補（存在すれば）で上限を設けます。

非置換要素の場合

内容サイズ候補と転送サイズ候補（存在すれば）のうち大きい方を使用し、 指定サイズ候補（存在すれば）で上限を設けます。

どちらの場合も、 最大主サイズが明確であれば、その値で制限されます。

テスト

内容サイズ候補、 指定サイズ候補、 転送サイズ候補では、 関連する min/max/推奨サイズプロパティを考慮することで、 内容ベースの最小サイズが作者指定の制約と干渉しません。 それぞれの定義は以下の通りです：

指定サイズ候補
アイテムの推奨主サイズが明確かつ自動でない場合、 指定サイズ候補はそのサイズとなります。 それ以外の場合は未定義です。
転送サイズ候補
アイテムに推奨アスペクト比があり、かつ推奨 交差サイズが明確であれば、 転送サイズ候補はそのサイズになります （そのサイズが最小および最大交差サイズが明確な場合は、それらで制限されます）、 アスペクト比を使って変換されます。 それ以外の場合は未定義です。
内容サイズ候補
内容サイズ候補は、min-contentサイズ （主軸において）です。 アイテムに推奨アスペクト比がある場合は、 明確な最小および最大 交差サイズ（アスペクト比で変換）で制限されます。
テスト

注: 内容ベースの最小サイズは内在サイズ寄与の一種であり、CSS Sizing 3 § 5.2 内在寄与の循環パーセンテージ規定が適用されます。

ボックスの内在サイズ（例：ボックスのmin-contentサイズ）を計算する目的では、 内容ベースの最小サイズは、その軸のサイズを不定にします （たとえwidthプロパティが明確なサイズを指定していても）。 つまり、このサイズに対して計算されるパーセンテージは autoとして振る舞うことになります。

内在サイズの計算以外の目的では、 内容ベースの最小サイズは（明示的なmin-contentや最小サイズとは異なり）ボックスのサイズを不定にはしません。 しかし、この最小サイズの適用前にボックスのサイズに対して解決されたパーセンテージがあれば、 適用後の新しいサイズに対して再解決しなければなりません。

内容ベースの最小サイズは多くの場合適切で、 コンテンツが重なったりコンテナからはみ出したりするのを防ぐのに役立ちますが、 場合によってはそうでないこともあります:

特に、ドキュメントの主要なコンテンツ領域にフレックスサイズを使う場合は、 min-width: 12emのような明示的なフォント相対の最小幅を指定した方が良いでしょう。 内容ベースの最小幅では、大きなテーブルや画像がコンテンツ領域全体のサイズを広げてしまい、 テキストの行が不必要に長くなって読みにくくなる可能性があります。

また、内容ベースのサイズ指定を大量の内容を持つアイテムに使う場合、 レイアウトエンジンは最小サイズを見つけるまでその全内容を走査しなければならず、 著者が明示的な最小値を設定した場合はこの必要がありません。 （内容が少ない場合はこの走査はほぼ無視できるので、パフォーマンス上の懸念はありません。）

テスト

5. 並び順と方向

フレックスコンテナの内容は、どの方向にも、どの順序にも配置することができます。 これにより、以前は複雑または壊れやすい方法で実現していた効果―― 例えばfloatや clear プロパティを使ったハックなど――を、容易に実現できるようになります。 この機能は、flex-direction、flex-wrap、order プロパティによって提供されています。

注: フレックスレイアウトの並び替え機能は、意図的に表示上のみに影響し、 音声順やソース順に基づくナビゲーションには影響しません。 これにより、著者は視覚的な表示を操作しつつ、 CSS非対応のUAや、音声・逐次ナビゲーションといった線形モデルでは ソース順を維持することができます。 この二面性によってアクセシビリティが向上する例については、 CSS Display 3 § 3.1 並び替えとアクセシビリティや Flex Layout Overviewを参照してください。

著者は、絶対に orderや *-reverse の値を flex-flow/flex-direction で、正しいソース順の代用として使用してはなりません。 これは文書のアクセシビリティを損なう可能性があります。

5.1. フレックスフローの方向：flex-direction プロパティ

名前: flex-direction
値: row | row-reverse | column | column-reverse
初期値: row
適用対象: flex containers
継承: no
パーセンテージ: n/a
算出値: 指定されたキーワード
正規順序: 構文に従う
アニメーション型: 離散

flex-direction プロパティは、flex items がフレックスコンテナ内にどのように配置されるかを、 フレックスコンテナの主軸の方向を設定することで指定します。 これによって、フレックスアイテムがどの方向に並ぶかが決まります。

row
フレックスコンテナの主軸は、現在のインライン軸 と同じ向きになります。 main-startとmain-endの方向は、 現在の書字モードにおける inline-startとinline-end の方向にそれぞれ一致します。 現在の書字モードです。
テスト
row-reverse
rowと同じですが、 main-start方向と main-end方向が入れ替わります。
テスト
column
フレックスコンテナの主軸は、 現在の書字モードにおける ブロック軸 と同じ向きになります。 main-start方向と main-end方向は、 現在の書字モードにおける block-start方向および block-end 方向にそれぞれ一致します。
テスト
column-reverse
columnと同じですが、 main-start方向と main-end方向が入れ替わります。
テスト

注: reverse値はボックスの並び順を逆にしません。 writing-modeやdirection [CSS3-WRITING-MODES]と同様に、 フローの方向だけを変更します。 描画順序、音声順序、逐次ナビゲーションの順序には影響しません。

注: justify-contentの値によっては、 flex-directionのreverse値が、 flex containers かつ scroll containersである場合の初期スクロール位置を変化させることがあります。 詳細は CSS Box Alignment 3 § 5.3 Alignment Overflow and Scroll Containersを参照してください。

テスト

5.2. フレックス行の折り返し：flex-wrapプロパティ

名前: flex-wrap
値: nowrap | wrap | wrap-reverse
初期値: nowrap
適用対象: flex containers
継承: no
パーセンテージ: n/a
算出値: 指定されたキーワード
正規順序: 構文に従う
アニメーション型: 離散

flex-wrapプロパティは、フレックスコンテナが単一行か複数行か、 そして新しい行が積み重なる交差軸の方向を制御します。

nowrap
フレックスコンテナは単一行になります。
wrap
フレックスコンテナは複数行になります。
wrap-reverse
wrapと同じです。

wrap-reverse以外の値の場合、 cross-start方向は、 現在の書字モードにおける inline-startまたは block-start のいずれか（どちらが交差軸かによる）に一致し、 cross-end方向は cross-startの反対方向になります。 flex-wrapが wrap-reverseの場合は、 cross-start方向と cross-end方向が入れ替わります。

注: align-contentの値によっては、 wrap-reverse値のflex-wrapが、 flex containersかつ scroll containersである場合の初期スクロール位置を変化させることがあります。 詳細は CSS Box Alignment 3 § 5.3 Alignment Overflow and Scroll Containersを参照してください。

テスト

5.3. フレックス方向と折り返し：flex-flowショートハンド

名前: flex-flow
値: <'flex-direction'> || <'flex-wrap'>
初期値: 各プロパティを参照
適用対象: 各プロパティを参照
継承: 各プロパティを参照
パーセンテージ: 各プロパティを参照
算出値: 各プロパティを参照
アニメーション型: 各プロパティを参照
正規順序: 構文に従う
テスト

flex-flowプロパティは、flex-directionプロパティとflex-wrapプロパティを 一括で設定するためのショートハンドです。 これらはあわせて、フレックスコンテナの主軸と交差軸を定義します。

英語（左から右、横書き）の文書における有効なフローの例： 
div { flex-flow: row; }
/* 初期値。主軸はインライン方向で、折り返しなし。
   （アイテムは収まるように縮小するか、はみ出します。） */

div { flex-flow: column wrap; }
/* 主軸はブロック方向（上から下）
   行はインライン方向（右方向）に折り返されます。 */

div { flex-flow: row-reverse wrap-reverse; }
/* 主軸はインライン方向の逆
   （右から左）。新しい行は上方向に折り返されます。 */
注: flex-flowの方向は書字モードに依存します。 例えば縦書きの日本語では、 rowのフレックスコンテナは内容を上から下に配置します。 以下の例を参照してください：
英語 日本語 
flex-flow: row wrap;        
writing-mode: horizontal-tb;
 
flex-flow: row wrap;        
writing-mode: vertical-rl;

5.4. 並び替えとアクセシビリティ： order プロパティ

フレックスアイテムは、デフォルトでは ソース文書に現れる順序で表示・配置されます。 これは論理順序を表します。 この順序は、非視覚メディア（音声など）でのレンダリングや、 シーケンシャルナビゲーションのデフォルトの巡回順序（例えばリンクの巡回、 tabindex [HTML]参照）、 そして非CSS UAで内容が表現される場合にも使われます。

orderプロパティを使うことで、 フレックスアイテムの並び順を変更できます。 これにより、アイテムはorder-modified document orderで配置され、 2Dのビジュアルキャンバス上での空間的な並びと、 音声やシーケンシャルナビゲーションといった線形プレゼンテーションでの論理順序を 異ならせることができます。 詳細はCSS Display 3 § 3 Display Order: the order propertyを参照してください。 [CSS-DISPLAY-3]

注: 視覚的な認知は二次元かつ非線形なので、 望ましいボックス順序は、非視覚メディアや非CSS UAで使われる論理順序と常に一致するわけではありません。

著者はorderを 論理順序ではなく、視覚上での並び替えのみに使う必要があります。 orderを使って論理並び替えを行うスタイルシートは非準拠となります。

多くのウェブページは、マークアップの形が似ていて、 上部にヘッダー、 下部にフッター、 そして中央にコンテンツ領域と、1〜2つの追加カラムがあります。 一般的には、 コンテンツをページのソースコードで最初に置くことが望ましいですが、 これにより、追加カラムを左側、コンテンツ領域を右側にするような よくあるデザインを実現するのが困難になります。 この問題はこれまで様々な方法で解決されてきましたが、 2つの追加カラムがある場合は「Holy Grail Layout」と呼ばれることも多いです。 orderを使えばこれが簡単に実現できます。 例えば、ページのコードと望ましいレイアウトのスケッチを見てみましょう： 
<!DOCTYPE html>
<header>...</header>
<main>
   <article>...</article>
   <nav>...</nav>
   <aside>...</aside>
</main>
<footer>...</footer>
このページではヘッダーが上部、フッターが下部にあり、記事が中央にあり、ナビが右、アサイドが左に配置されています。

このレイアウトはフレックスレイアウトで簡単に実現できます：

main { display: flex; }
main > article { order: 2; min-width: 12em; flex:1; }
main > nav     { order: 1; width: 200px; }
main > aside   { order: 3; width: 200px; }

さらに、 カラムはデフォルトで高さが揃うようになり、 メインコンテンツは画面いっぱいに広がります。 また、メディアクエリを組み合わせることで、狭い画面では全て縦並びに切り替えることも可能です：

@media all and (max-width: 600px) {
  /* 3カラム対応には幅が狭すぎる */
  main { flex-flow: column; }
  main > article, main > nav, main > aside {
    /* ドキュメント順に戻す */
    order: 0; width: auto;
  }
}

（さらに高度な折り返しを実現するための複数行フレックスコンテナの利用は読者への課題です。）

6. フレックス行

フレックスアイテムは、フレックスコンテナ内で フレックス行 に沿って配置・整列されます。 これはレイアウトアルゴリズムによるグループ化と整列のための仮想的なコンテナです。 フレックスコンテナは単一行または複数行のいずれかになり、 それはflex-wrapプロパティによって決まります：

この例では、横並びでは収まらない4つのボタンが 複数行に折り返されます。 
#flex {
  display: flex;
  flex-flow: row wrap;
  width: 300px;
}
.item {
  width: 80px;
}

<div id="flex">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

このコンテナは幅が300pxなので、1行には3つしか収まりません。 3つで240px、残り60pxの余白が生じます。 flex-flowプロパティで 複数行のフレックスコンテナ （値にwrapキーワードが含まれるため）が指定されているので、 最後のアイテム用に新たな行が作られます。

複数行フレックスコンテナのレンダリング例。

内容が行に分割されると、 各行は独立してレイアウトされます。 フレキシブルな長さやjustify-contentプロパティ、 align-selfプロパティは いずれも1行ごとにアイテムのみを考慮します。

複数行のフレックスコンテナ（1行だけの場合も含む）では、 各行の交差サイズは その行内のフレックスアイテムを収めるのに必要な最小サイズとなります （align-selfによる整列後）。 行はフレックスコンテナ内でalign-contentプロパティで整列されます。 単一行のフレックスコンテナでは、 行の交差サイズはフレックスコンテナの交差サイズと同じで、 align-contentは効果を持ちません。 行の主サイズは 常にフレックスコンテナのコンテンツボックスの主サイズと同じです。

テスト
前の例と同じですが、 フレックスアイテムにすべてflex: autoが指定されています。 1行目には60pxの余白があり、 すべてのアイテムは同じ柔軟性を持つため、 その行の3つのアイテムはそれぞれ20pxずつ追加の幅を受け取り、 最終的に各アイテムは100px幅になります。 残りのアイテムは単独の行に配置され、 行全体の幅（つまり300px）まで広がります。
上記と同じレンダリングですが、 すべてのアイテムにflex: autoが指定されています。

7. 柔軟性

フレックスレイアウトの特徴は、フレックスアイテムを「フレックス」させる能力です。 これは、主次元において利用可能なスペースを満たすように 幅や高さを調整することです。 これにはflexプロパティを使用します。 フレックスコンテナは、アイテムに対して（flex grow factorに比例して） 空きスペースを分配し、コンテナを満たします。 または（flex shrink factorに比例して）アイテムを縮小し、 はみ出しを防ぎます。

フレックスアイテムは、 完全に非柔軟 なのは、flex-grow値と flex-shrink値の両方がゼロの場合です。 それ以外の場合は柔軟となります。

テスト

7.1. flexショートハンド

名前: flex
値: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
初期値: 0 1 auto
適用対象: フレックスアイテム
継承: no
パーセンテージ: 各プロパティを参照
算出値: 各プロパティを参照
アニメーション型: 算出値型による
正規順序: 構文に従う
テスト

flexプロパティは、柔軟なサイズの構成要素―― フレックス係数（growとshrink） およびflex basisを指定します。 ボックスがフレックスアイテムの場合、flexは 主サイズプロパティ の代わりに参照され、ボックスの主サイズが決定されます。 ボックスがフレックスアイテムでない場合、flexは効果を持ちません。

注: flexロングハンドの初期値は flex: 0 1 autoと同等です。 これは、flexショートハンドで省略された場合のデフォルト値 （実質的に1 1 0px）とは異なります。 そのため、flexショートハンドは 最も一般的なケースにより適した仕様となっています。

<'flex-grow'>
この<number [0,∞]>要素はflex-grow ロングハンドを設定し、 flex grow係数を指定します。 これは、フレックスコンテナ内で正の空きスペースが分配される際に、 フレックスアイテムが 他のフレックスアイテムに対してどのくらい成長するかを決定します。 省略された場合は1になります。
テスト
0から1の間のFlex値は少し特殊な挙動をします： 行上のflex値の合計が1未満の場合、 それらは空きスペースの100％未満しか使用しません。

アイテムのflex-grow値は、 実質的に空きスペースの割合を要求するものであり、 1は「空きスペースの100％」を意味します。 そして、行上のアイテムが合計で100％以上を要求している場合、 要求は同じ比率を保ったまま、ちょうど100％になるように再配分されます。 しかし、アイテムが満額より少ない量を要求している場合 （例えば3つのアイテムがそれぞれflex-grow: .25など）、 それぞれが要求した分だけ（各アイテムに空きスペースの25％ずつ、残りの25％は未充填）割り当てられます。 空きスペースの分配の詳細については § 9.7 柔軟長の解決を参照してください。

このパターンはflex-growがゼロに近づく際の連続的な挙動のために必要です （つまりアイテムが空きスペースを全く欲しがらない時）。 これがないと、flex-grow: 1のアイテムが 空きスペースをすべて取得するだけでなく、 flex-grow: 0.1のアイテムや flex-grow: 0.01のアイテムも そうなり、最終的に値が十分小さくなってゼロにアンダーフローすると アイテムは突然空きスペースを全く取得しなくなります。 この挙動によって、 アイテムはflex-growが1未満になるにつれて 徐々に空きスペースの取得量が減り、 ゼロでは滑らかに空きスペースを全く取得しなくなります。

この「部分的な充填」挙動が特に望まれるのでなければ、 著者は値を1以上にすることを推奨します。 例えば、1と2を使う方が .33や.67を使うよりも アイテムの追加・削除・折り返しが発生した場合に 意図通りの挙動になる可能性が高いです。

<'flex-shrink'>
この<number [0,∞]>要素はflex-shrink ロングハンドを設定し、 flex shrink係数を指定します。 これは、負の空きスペースが分配される際に フレックスコンテナ内で他のフレックスアイテムに対して フレックスアイテムが どのくらい縮小するかを決定します。 省略された場合は1になります。
テスト

注: flex shrink係数は、 負のスペース分配時にflex 基本サイズで乗算されます。 これにより、アイテムがどれだけ縮小できるかに比例して負のスペースが分配されるため、 例えば小さいアイテムがゼロになる前に、大きいアイテムが目に見えて縮小されることが保証されます。

テスト
<'flex-basis'>
このコンポーネントはflex-basis ロングハンドを設定します。 これはflex basis（基準値）を指定します。 フレックスアイテムの初期の主サイズであり、 フレックス係数に従って空きスペースが分配される前の値です。
テスト

<'flex-basis'>はwidthプロパティや heightプロパティと同じ値（ただしautoは扱いが異なる）、 さらにcontentキーワードを受け付けます。

auto
フレックスアイテムに指定された場合、 autoキーワードは 主サイズプロパティの値を取得し、それを使用するflex-basisとします。 その値自体がautoの場合、使用される値はcontentになります。
content
自動サイズで、フレックスアイテムの内容に基づきます。 （これは通常max-contentサイズと等価ですが、 推奨アスペクト比、内在サイズ制約、直交フロー等に対応する調整が加わります。 § 9 フレックスレイアウトアルゴリズムの詳細参照。）

注: この値はFlexible Box Layoutの初期リリースには存在せず、 古い実装ではサポートされていない場合があります。 同等の効果はautoと主サイズ（widthまたはheight）にautoを指定することで再現可能です。

<'width'>
その他の値については、flex-basisは widthやheightと同じ方法で解決されます。

flexショートハンドで省略された場合、指定値は0になります。

none
noneキーワードは0 0 autoに展開されます。
「絶対」フレックス（基準値ゼロから開始）と「相対」フレックス（アイテムの内容サイズから開始）の違いを示す図。 3つのアイテムのフレックス係数はそれぞれ1、1、2です。 2のアイテムが他より2倍速く成長することに注目してください。

単位無しのゼロが2つのフレックス係数の直後でない場合は、フレックス係数として解釈されます。 誤解や無効な宣言を避けるため、 著者は<'flex-basis'>コンポーネントとしてゼロを指定する場合は 単位を付けるか、2つのフレックス係数の後に記述してください。

7.1.1. flexの基本値

この節は参考情報です。

下記は、最も一般的な効果を表す4つのflex値の効果をまとめています：

flex: initial
flex: 0 1 autoと同等。（これが初期値です。） アイテムのサイズはwidth/height プロパティに基づきます。 （アイテムの主サイズプロパティがautoの場合は、内容に基づきます。） 正の空きスペースがある場合アイテムは非柔軟となり、 空間が不足している場合は最小サイズまで縮小できます。 整列機能やautoマージンにより、フレックスアイテムを主軸上で整列可能です。
flex: auto
flex: 1 1 autoと同等。 アイテムのサイズはwidth/height プロパティに基づきますが、主軸の空きスペースを吸収する完全な柔軟性を持ちます。 全アイテムがflex: auto、flex: initial、flex: noneのいずれかなら、 サイズ計算後の正の空きスペースはflex: autoのアイテムに均等に分配されます。
flex: none
flex: 0 0 autoと同等。 この値はwidth/height プロパティでサイズを決定し、 完全に非柔軟なフレックスアイテムになります。 initialと似ていますが、 フレックスアイテムはオーバーフロー時でも縮小できません。
flex: <number [1,∞]>
flex: <number [1,∞]> 1 0と同等。 アイテムを柔軟にし、flex basisをゼロに設定します。 フレックスコンテナ内の空きスペースの指定割合をアイテムが取得します。 コンテナ内の全アイテムがこのパターンを使う場合、 サイズは指定したフレックス係数に比例します。
テスト

デフォルトでは、フレックスアイテムは最小内容サイズ（最も長い単語や固定サイズ要素の長さ）未満には縮小されません。 これを変更するには、min-widthやmin-heightプロパティを設定してください。 （§ 4.5 フレックスアイテムの自動最小サイズ参照。）

7.2. 柔軟性の構成要素

柔軟性の各構成要素は、個別のロングハンドプロパティで制御できます。

著者は、柔軟性の制御には直接ロングハンドプロパティを使うよりも flexショートハンドの使用を推奨します。 ショートハンドは未指定の構成要素を正しくリセットし、 一般的な用途に適した動作となるためです。

7.2.1. flex-growプロパティ

名前: flex-grow
値: <number [0,∞]>
初期値: 0
適用対象: フレックスアイテム
継承: no
パーセンテージ: n/a
算出値: 指定された数値
正規順序: 構文に従う
アニメーション型: 算出値型による
テスト

著者は、柔軟性の制御にflexショートハンドを使うことが推奨されます。 flex-growを直接設定するよりも、 ショートハンドは未指定の構成要素を正しくリセットし、 一般的な用途に適した挙動となるためです。

flex-growプロパティは、 指定された<number>で flex grow係数を設定します。 負の値は許可されません。

7.2.2. flex-shrinkプロパティ

名前: flex-shrink
値: <number [0,∞]>
初期値: 1
適用対象: フレックスアイテム
継承: no
パーセンテージ: n/a
算出値: 指定値
正規順序: 構文に従う
アニメーション型: 数値
テスト

著者は柔軟性の制御にflexショートハンドを使うことが推奨されます。 flex-shrinkを直接用いるよりも、 ショートハンドは未指定の構成要素を正しくリセットし、 一般的な用途に合わせた挙動になります。

flex-shrinkプロパティは 指定された<number>によって flex shrink係数を設定します。 負の値は許可されません。

7.2.3. flex-basisプロパティ

名前: flex-basis
値: content | <'width'>
初期値: auto
適用対象: フレックスアイテム
継承: no
パーセンテージ: フレックスコンテナの内側の主サイズに対する割合
算出値: 指定されたキーワードまたは算出された<length-percentage>値
正規順序: 構文に従う
アニメーション型: 算出値型による
テスト

著者は、柔軟性の制御にはflexショートハンドを使うことが推奨されます。 flex-basisを直接設定するよりも、 ショートハンドは未指定の構成要素を正しくリセットし、 一般的な用途に適した動作となるためです。

flex-basisプロパティはflex basisを設定します。 このプロパティは、widthおよび heightプロパティと同じ値、さらにcontentを受け付けます。

autoやcontent（上記定義）以外の全ての値については、 flex-basisは横書きモードにおけるwidthと同じ方法で解決されます [CSS2]。 ただし、ある値がwidthでautoに解決される場合は、 flex-basisでは代わりに contentに解決されます。 例えば、flex-basisのパーセンテージ値は フレックスアイテムの包含ブロック（つまりflex container）に対して解決されます。 その包含ブロックのサイズが未定義の場合、 flex-basisの使用値は contentになります。 さらに、flex-basisは、他の指定がない限り コンテンツボックスのサイズを決定します。 例えばbox-sizingなどで上書きされていない場合です [CSS3UI]。

8. 整列

フレックスコンテナの内容がフレックスされた後、 すべてのフレックスアイテムの寸法が確定した時点で、 それらをフレックスコンテナ内で整列できます。

margin プロパティを使うことで、ブロックレイアウトのマージンよりも強力な方法で アイテムを整列できます。 フレックスアイテムは CSS Box Alignmentのアラインメントプロパティにも対応しており、 主軸main axisと交差軸cross axisの両方でキーワードによる簡単な整列が可能です。 これらのプロパティにより、CSS 2.1 では困難だった 水平方向・垂直方向の中央揃えなど、 多くの一般的な整列が容易に実現できます。

注: アラインメントプロパティは CSS Box Alignment [CSS-ALIGN-3]で定義されていますが、 Flexible Box Layout は関連する定義をここで再掲しています。 これは、仕様の進行を遅らせるような規範的な依存関係を作らないためです。 これらのプロパティは、CSS Box Alignment Level 3が完成し、 他のレイアウトモードにおける効果が定義されるまで、フレックスレイアウトのみに適用されます。 また、Box Alignment モジュールで新たに定義された値も Flexible Box Layout に適用されます。 つまり、Box Alignment モジュールが完成すれば、 ここの定義は置き換えられることになります。

テスト

8.1. autoマージンによる整列

この節は規範的ではありません。 マージンがフレックスアイテムに与える影響の規範的な定義はFlex Layout Algorithmの章にあります。

フレックスアイテム上のautoマージンは、ブロックフローにおけるautoマージンと非常によく似た効果を持ちます：

テスト

注: 空きスペースがautoマージンに分配される場合、 アラインメントプロパティはその次元では効果がありません。 なぜなら、マージンがフレックス後に残った全ての空きスペースを奪ってしまうためです。

主軸でautoマージンを使うひとつの用途は、 フレックスアイテムを異なる「グループ」に分割することです。 次の例はよくあるUIパターン――左揃えのアクションと右揃えのアクションがひとつのバーに並ぶ――の再現方法を示します。
下記コードのサンプルレンダリング。 
nav > ul {
  display: flex;
}
nav > ul > #login {
  margin-left: auto;
}

<nav>
  <ul>
    <li><a href=/about>概要</a>
    <li><a href=/projects>プロジェクト</a>
    <li><a href=/interact>交流</a>
    <li id="login"><a href=/login>ログイン</a>
  </ul>
</nav>
下図は、autoマージンとアラインメントプロパティで オーバーフロー時の交差軸整列の違いを示します。
概要
権威主義
ブログ
概要
権威主義
ブログ
左の図のアイテムはマージンで中央揃えされており、 右の図のアイテムはalign-selfで中央揃えされています。 このカラム方向フレックスコンテナがページ左端に配置された場合、 マージンの挙動の方が望ましく、 長いアイテムが完全に読める状態になります。 他の場合は、真の中央揃えの方が好ましいこともあります。

8.2. 軸の整列：justify-content プロパティ

名前: justify-content
値: flex-start | flex-end | center | space-between | space-around
初期値: flex-start
適用対象: flex containers
継承: no
パーセンテージ: n/a
算出値: 指定されたキーワード
正規順序: 構文に従う
アニメーション型: 離散
テスト

justify-contentプロパティは、フレックスコンテナの現在の行の主軸に沿ってフレックスアイテムを整列します。 これは、柔軟長やautoマージンの解決が済んだ後に実行されます。 通常、1行のフレックスアイテム全てが非柔軟、または柔軟でも最大サイズに達した場合に 余った空きスペースを分配するのに役立ちます。 また、アイテムが行からオーバーフローした場合の整列にも一定の制御を与えます。

flex-start
フレックスアイテムは行の先頭に詰めて配置されます。 行の最初のフレックスアイテムのmain-startマージン端は 行のmain-start端にぴったり合わせて配置され、 それ以降のフレックスアイテムは直前のアイテムにぴったり合わせて配置されます。
テスト
flex-end
フレックスアイテムは行の末尾に詰めて配置されます。 最後のフレックスアイテムのmain-endマージン端は 行のmain-end端にぴったり合わせて配置され、 それ以外のフレックスアイテムは次のアイテムにぴったり合わせて配置されます。
テスト
center
フレックスアイテムは行の中央に詰めて配置されます。 行上のフレックスアイテム同士はぴったり並べられ、 行の中央に揃えられます。 行のmain-start端と最初のアイテム、 行のmain-end端と最後のアイテムの間に 同じ量の余白が入ります。 （余った空きスペースが負の場合、フレックスアイテムは両端で均等にオーバーフローします。）
テスト
space-between
フレックスアイテムは行内で均等に分配されます。 余った空きスペースが負の場合や、行上にフレックスアイテムが1つだけの場合は この値はsafe flex-startにフォールバックします。 それ以外の場合は、 最初のフレックスアイテムのmain-startマージン端は 行のmain-start端にぴったり合わせて配置され、 最後のフレックスアイテムのmain-endマージン端は 行のmain-end端にぴったり合わせて配置され、 残りのフレックスアイテムは隣接するアイテム同士の間隔が均等になるように分配されます。
テスト
space-around
フレックスアイテムは行内で均等に分配されますが、 両端は半分の間隔になります。 余った空きスペースが負の場合や、行上にフレックスアイテムが1つしかない場合は この値はsafe centerにフォールバックします。 それ以外の場合、行上のフレックスアイテムは 隣接するフレックスアイテム同士の間隔が均等になるように分配され、 最初と最後のフレックスアイテムとフレックスコンテナの端との間隔は アイテム同士の間隔の半分となります。
テスト

3色のアイテムを持つフレックスコンテナに対する5つのjustify-contentキーワードとその効果を示すイラスト。

8.3. 交差軸の整列：align-itemsおよびalign-selfプロパティ

名前: align-items
値: flex-start | flex-end | center | baseline | stretch
初期値: stretch
適用対象: フレックスコンテナ
継承: no
パーセンテージ: n/a
算出値: 指定されたキーワード
正規順序: 構文に従う
アニメーション型: 離散
テスト
名前: align-self
値: auto | flex-start | flex-end | center | baseline | stretch
初期値: auto
適用対象: flex items
継承: no
パーセンテージ: n/a
算出値: 指定されたキーワード
正規順序: 構文に従う
アニメーション型: 離散
テスト

フレックスアイテムは、フレックスコンテナの現在の行の交差軸に沿って整列できます。 これはjustify-contentと似ていますが、垂直方向で行われます。align-itemsは、フレックスコンテナ内の全アイテム（匿名フレックスアイテムも含む）の デフォルトの整列方法を設定します。align-selfは、 個々のフレックスアイテムごとにこのデフォルト整列を上書きできます。 （匿名フレックスアイテムの場合、align-selfは常に そのコンテナのalign-items値と一致します。）

どちらか一方でもフレックスアイテムの交差軸マージンが autoの場合、align-selfは効果を持ちません。

値の意味は以下の通りです：

auto
交差軸の整列制御を親ボックスのalign-items値に委ねます。 （これはalign-selfの初期値です。）
テスト
flex-start
cross-startマージン端が cross-start行端にぴったり配置されます。
テスト
flex-end
cross-endマージン端が cross-end行端にぴったり配置されます。
テスト
center
フレックスアイテムのマージンボックスが 行内の交差軸の中央に揃えられます。 （フレックス行の交差サイズがアイテムより小さい場合、 両方向に均等にオーバーフローします。）
テスト
baseline
フレックスアイテムはベースライン整列に参加します。 行上の参加するフレックスアイテムのベースラインが揃うように整列され、 ベースラインからcross-startマージン端までの距離が最大のアイテムが 行のcross-start端にぴったり配置されます。 必要な軸にベースラインがない場合は、 ベースラインがアイテムのボーダーボックスから合成されます。
テスト
stretch
フレックスアイテムの交差サイズプロパティが autoに算出され、 交差軸のマージンのどちらもautoでない場合、 フレックスアイテムは伸長されます。 使用値は、アイテムのマージンボックスの交差サイズが行のサイズにできるだけ近づく長さになります。 ただし、min-height/min-width/max-height/max-widthの制約は守られます。

注: フレックスコンテナの高さが制約されている場合、 この値によってフレックスアイテムの内容がアイテムからオーバーフローすることがあります。

フレックスアイテムのcross-startマージン端が 行のcross-start端にぴったり配置されます。

テスト

4色のアイテムを持つフレックスコンテナに対する5つのalign-itemsキーワードとその効果を示すイラスト。

8.4. フレックス行の詰め方：align-content プロパティ

名前: align-content
値: flex-start | flex-end | center | space-between | space-around | stretch
初期値: stretch
適用対象: 複数行 フレックスコンテナ
継承: no
パーセンテージ: n/a
算出値: 指定されたキーワード
正規順序: 構文に従う
アニメーション型: 離散

align-contentプロパティは、フレックスコンテナの余った交差軸のスペースがある場合に、 フレックスコンテナ内の行を整列します。 これはjustify-contentが主軸でアイテムを整列するのと似ています。 このプロパティは単一行のフレックスコンテナには効果がありません。 値の意味は以下の通りです：

flex-start
行はフレックスコンテナの先頭に詰めて配置されます。 フレックスコンテナ内の最初の行のcross-start端は フレックスコンテナのcross-start端にぴったり合わせて配置され、 それ以降の行は直前の行にぴったり合わせて配置されます。
flex-end
行はフレックスコンテナの末尾に詰めて配置されます。 最後の行のcross-end端は フレックスコンテナのcross-end端にぴったり合わせて配置され、 それ以外の行は次の行にぴったり合わせて配置されます。
center
行はフレックスコンテナの中央に詰めて配置されます。 フレックスコンテナ内の行同士はぴったり並べられ、 フレックスコンテナの中央に揃えられます。 フレックスコンテナのcross-start内容端と最初の行、 フレックスコンテナのcross-end内容端と最後の行の間に 同じ量の余白が入ります。 （余った空きスペースが負の場合、行は両端で均等にオーバーフローします。）
space-between
行はフレックスコンテナ内で均等に分配されます。 余った空きスペースが負の場合や、フレックスコンテナ内にフレックス行が1つしかない場合は この値はsafe flex-startにフォールバックします。 それ以外の場合は、 最初の行のcross-start端は フレックスコンテナのcross-start内容端にぴったり合わせて配置され、 最後の行のcross-end端は フレックスコンテナのcross-end内容端にぴったり合わせて配置され、 残りの行は隣接する行同士の間隔が均等になるように分配されます。
space-around
行はフレックスコンテナ内で均等に分配されますが、両端は半分の間隔になります。 余った空きスペースが負の場合はsafe centerにフォールバックします。 それ以外の場合、フレックスコンテナ内の行は隣接する行同士の間隔が均等になるように分配され、 最初と最後の行とフレックスコンテナの端との間隔は 行同士の間隔の半分となります。
stretch
行は残りのスペースを埋めるように伸長されます。 余った空きスペースが負の場合はflex-startにフォールバックします。 それ以外の場合、余ったスペースは全ての行に均等に分配され、交差サイズが増加します。

注: 複数行のフレックスコンテナのみが 行を整列するための交差軸の空きスペースを持ちます。 単一行フレックスコンテナでは 唯一の行が自動的にスペースいっぱいに伸長されます。

align-contentキーワードと 複数行フレックスコンテナへの効果を示すイラスト。

テスト

8.5. フレックスコンテナのベースライン

フレックスコンテナ自身がベースライン整列に参加するためには（例えば、フレックスコンテナ自身が外側のフレックスコンテナ内のフレックスアイテムである場合など）、 内容を最もよく表すベースラインの位置を提出する必要があります。 このために、フレックスコンテナのベースラインは以下のように決定されます （orderによる並び替え後、 flex-directionも考慮します）：

first/last 主軸ベースライン集合
インライン軸がフレックスコンテナの主軸と一致する場合、 ベースラインは以下のように決定されます：

  1. フレックスコンテナのフレックスアイテムのうち、 最も開始側/最も終了側のフレックス行がベースライン整列に参加する場合、 フレックスコンテナのfirst/last 主軸ベースライン集合は、 それらのフレックスアイテムの共有整列用ベースラインから 生成されます。

  2. それ以外の場合、フレックスコンテナに少なくとも1つフレックスアイテムがある場合、 フレックスコンテナのfirst/last 主軸ベースライン集合は、 最も開始側/最も終了側のフレックスアイテムの 整列用ベースラインから 生成されます。 （アイテムがフレックスコンテナの主軸に平行な整列用ベースラインを持たない場合、 まずボーダー端から合成されます。）

  3. さらにそれ以外の場合、フレックスコンテナはfirst/last 主軸ベースライン集合を持たず、 必要に応じて、その整列コンテキストのルールに従って 合成されます。

first/last 交差軸ベースライン集合
インライン軸がフレックスコンテナの交差軸と一致する場合、 ベースラインは以下のように決定されます：

  1. フレックスコンテナに少なくとも1つフレックスアイテムがある場合、 フレックスコンテナのfirst/last 交差軸ベースライン集合は、 最も開始側/最も終了側のフレックスアイテムの 整列用ベースラインから 生成されます。 （アイテムがフレックスコンテナの交差軸に平行な整列用ベースラインを持たない場合、 まずボーダー端から合成されます。）

  2. それ以外の場合、フレックスコンテナはfirst/last 交差軸ベースライン集合を持たず、 必要に応じて、その整列コンテキストのルールに従って 合成されます。

上記のルールに従ってベースラインを計算する際、 ベースラインを提供するボックスのoverflow値がスクロールを許可する場合、 ベースラインの決定のためには、そのボックスを初期スクロール位置にあるものとして扱う必要があります。

テーブルセルのベースライン決定時には、 フレックスコンテナはline boxやtable-rowと同様にベースラインを提供します。 [CSS2]

ベースラインについての詳細は、CSS Writing Modes 3 § 4.1 ベースラインの概要およびCSS Box Alignment 3 § 9 ベースライン整列詳細を参照してください。

テスト

9. フレックスレイアウトアルゴリズム

このセクションでは、フレックスコンテナとその内容の正確なレイアウト動作を詳細に記述する規範的なアルゴリズムを示します。 ここに書かれているアルゴリズムは、可読性と理論的な単純さを重視して記述されており、 必ずしも最も効率的なものではありません。 実装はどのようなアルゴリズムを使用しても構いませんが、 ここで記載されたアルゴリズムと同じ結果を出さなければなりません。

注: このセクションは主に実装者向けです。 ウェブページを作成する著者は、個々のプロパティ説明を読めば十分であり、 CSSレイアウトの難解な詳細を深く理解したい場合以外は、このセクションを読む必要はありません。

以下のセクションでは、フレックスコンテナとその内容のレイアウトアルゴリズムを定義します。

注: フレックスレイアウトはフレックスアイテムをorderで変更された文書順で扱い、 元の文書順ではありません。

テスト

9.1. 初期設定

  1. 匿名フレックスアイテムを生成する（§ 4 フレックスアイテム参照）。

9.2. 行長の決定

  1. フレックスアイテムの主軸・交差軸の利用可能スペースを決定する。 各次元について、 その次元のフレックスコンテナの内容ボックスが確定サイズなら、それを使用する。 その次元のフレックスコンテナが minまたはmax-content制約下でサイズ決定中の場合、 その次元の利用可能スペースはその制約値とする。 それ以外の場合は、フレックスコンテナのマージン・ボーダー・パディングを フレックスコンテナの利用可能スペースから差し引き、その値を使う。この結果、値が無限大になることもある。

    例えば、利用可能スペースは、floatされたautoサイズのフレックスコンテナ内のフレックスアイテムに対して次の通り：

    • フレックスコンテナの包含ブロックの幅 － フレックスコンテナのマージン・ボーダー・パディング（横方向）
    • 縦方向は無限大
  2. 各アイテムのフレックス基準サイズと仮主サイズを決定する：
    テスト
    1. アイテムの使用確定flex basisがある場合、 それがflex base sizeとなります。
    2. フレックスアイテムが... この場合、flex base sizeは 使用usedcross sizeおよびflex itemのアスペクト比から計算します。
    3. 使用flex basisがcontentまたはavailable spaceに依存し、 かつフレックスコンテナがmin-contentまたはmax-content制約下でサイズ決定中の場合 （例： 自動テーブルレイアウト [CSS2]）、 その制約下でアイテムをサイズ決定します。 flex base sizeはアイテムの結果のmain sizeとなります。
    4. それ以外の場合、 使用flex basisがcontentまたはavailable spaceに依存し、 利用可能な主サイズが無限大で、 フレックスアイテムのインライン軸が主軸に平行な場合、 直交フローのボックスの規則 [CSS3-WRITING-MODES]に従ってアイテムをレイアウトします。 flex base sizeはアイテムのmax-contentmain sizeとなります。

      注: このケースは例えば、 英語文書（横書きwriting mode）内に カラムフレックスコンテナがあり、 その中に縦書き日本語（縦書きwriting mode）の flex itemが含まれる場合に発生します。

    5. その他の場合は、 アイテムを利用可能なavailable spaceに 使用flex basisをmain sizeの代わりに用いてサイズ決定します。 contentの値はmax-contentとして扱います。 cross sizeが main sizeの決定に必要な場合（例：flex itemのmain sizeがブロック軸にある時や、 preferred aspect ratioを持つ場合）、 かつflex itemの交差サイズがautoで確定していない場合、 この計算ではfit-contentを flex itemのcross sizeとして使用します。 flex base sizeはアイテムの結果のmain sizeとなります。
      テスト

    flex base sizeを決定する際、 アイテムのmin・max 主サイズは無視されます （クランプは行われません）。 さらに、box-sizingを適用する際に コンテンツボックスのサイズをゼロで下限する計算も無視されます。 （例えば、サイズがゼロ、パディングが正、box-sizing: border-box指定のアイテムは 外側のflex base sizeがゼロになり、内側のflex base sizeは負となります。）

    hypothetical main sizeは、 アイテムのflex base sizeを 使用されるmin・max 主サイズ（およびコンテンツボックスサイズのゼロ下限）に従ってクランプしたものです。

    テスト
  3. フレックスコンテナの主サイズを、その属するフォーマッティングコンテキストの規則に従って決定する。
    自動ブロックサイズは、 ブロックレベルのフレックスコンテナの場合、 max-contentサイズとなる。

    この等価性はBlock Layout仕様で定義されるべきだが、まだ存在しない。

9.3. 主サイズの決定

  1. フレックスアイテムをフレックス行にまとめる：
    • フレックスコンテナが単一行の場合、 全フレックスアイテムを1つのフレックス行にまとめる。
    • それ以外の場合、 最初の未収集アイテムから始めて、順番にアイテムを集めていき、 次に集めるアイテムが初めてフレックスコンテナの内側主サイズに収まらなくなるまで （または強制改ページが現れるまで、 § 10 フレックスレイアウトの分割参照）連続して集める。 もし最初の未収集アイテムが収まらない場合は、そのアイテムだけをその行に集める。

      このステップでは、 フレックスアイテムのサイズは外側 仮主サイズとする。（注：この値は負になる場合もある。）

      すべてのフレックスアイテムがフレックス行に収集されるまで繰り返す。

      「できるだけ多く集める」行は、ゼロサイズのフレックスアイテムも前の行の末尾に収集する。 たとえ最後の非ゼロアイテムがその行をぴったり埋めた場合でも。

  2. 柔軟長を解決することで、すべてのフレックスアイテムの使用主サイズを決定する。§ 9.7 柔軟長の解決参照。
テスト

9.4. 交差サイズの決定

  1. 各アイテムの仮交差サイズを決定する。 使用主サイズと指定された利用可能スペースを使い、アイテムをin-flowのブロックレベルボックスとしてレイアウトし、 autoはfit-contentとして扱う。
    テスト
  2. 各フレックス行の交差サイズを計算する。

    フレックスコンテナが単一行で、確定交差サイズを持つ場合、 フレックス行の交差サイズは フレックスコンテナの内側の交差サイズとなります。

    それ以外の場合、各フレックス行について：

    1. インライン軸が主軸に平行で、align-selfがbaselineであり、 かつ交差軸マージンが両方とも非autoである フレックスアイテムを全て集める。 各アイテムのベースラインと仮外側cross-start端までの距離の最大値、 ベースラインと仮外側cross-end端までの距離の最大値をそれぞれ求め、 それらの値を合計する。
    2. 前のステップで集められなかったアイテムの中から、 仮外側仮交差サイズの最大値を求める。
    3. フレックス行の使用交差サイズは、前の二つのステップで得られた値とゼロのうち最大のものとなる。

      フレックスコンテナが単一行の場合、 行の交差サイズをコンテナの算出min/max交差サイズの範囲にクランプする。CSS 2.1のmin/max-width/height定義がより一般的に適用されていれば、 この挙動は自動的に得られるはずです。

    テスト
  3. 'align-content: stretch'を扱う。 フレックスコンテナが確定交差サイズを持ち、align-contentがstretch、 かつフレックス行の交差サイズ合計がフレックスコンテナの内側交差サイズより小さい場合、 各フレックス行の交差サイズを等しく増やし、合計がコンテナの内側交差サイズと正確に一致するようにする。
  4. visibility:collapseアイテムを折り畳む。 もしフレックスアイテムにvisibility: collapseがあれば、 そのアイテムが属する行の交差サイズをstrut sizeとして記録し、レイアウトを最初からやり直す。

    2回目のレイアウトでは、 アイテムを行に集める際に、 折り畳まれたアイテムは主サイズゼロとして扱う。 以降のアルゴリズムでは、そのアイテムは完全に無視される （display:noneと同様）だが、 行の交差サイズ計算後に、 もし行の交差サイズがその行内の折り畳まれたアイテムのstrut size最大値未満なら、 その行の交差サイズをstrut sizeに設定する。

    2回目のレイアウトではこのステップはスキップする。

    テスト
  5. 各フレックスアイテムの使用交差サイズを決定する。 フレックスアイテムがalign-self: stretchであり、 算出された交差サイズプロパティがautoで、 交差軸マージンがどちらもautoでない場合、 使用外側交差サイズはそのフレックス行の使用交差サイズとなり、 アイテムの使用min/max交差サイズに従ってクランプする。 それ以外の場合、使用交差サイズはアイテムの仮交差サイズとなる。

    フレックスアイテムがalign-self: stretchの場合、 アイテム内容のレイアウトをやり直し、 この使用サイズを確定交差サイズとして扱い、 パーセンテージサイズの子要素を解決できるようにする。

    テスト

    このステップはフレックスアイテムの主サイズには影響しません。 たとえpreferred aspect ratioを持っていても。

テスト

9.5. 主軸の整列

  1. 残りの空きスペースを分配する。 各フレックス行について：
    1. 残りの空きスペースが正で、この行の主軸マージンのうち少なくとも1つがautoなら、 空きスペースをそれらのマージンに均等に分配する。 それ以外の場合、すべてのautoマージンをゼロにする。
    2. justify-contentに従って主軸方向にアイテムを整列する。

9.6. 交差軸の整列

  1. 交差軸autoマージンを解決する。 フレックスアイテムに交差軸autoマージンがある場合：
    • 外側交差サイズ（それらのautoマージンをゼロとして扱う）が フレックス行の交差サイズより小さければ、 その差分をautoマージンに均等に分配する。
    • それ以外の場合、 block-startまたはinline-startマージン（交差軸側のもの）がautoならゼロにし、 反対側のマージンをアイテムの外側交差サイズが行の交差サイズと等しくなるように設定する。
  2. 全てのフレックスアイテムを交差軸方向に整列する 両方の交差軸マージンがautoでない場合、align-selfに従う。
  3. フレックスコンテナの使用交差サイズを決定する 参加しているフォーマッティングコンテキストの規則に従う。 内容ベースの交差サイズが必要な場合は、 フレックス行の 交差サイズの合計を使う。
  4. 全てのフレックス行を整列する align-contentに従う。

9.7. 柔軟長の解決

フレックス行内のアイテムの柔軟長を解決するには：

  1. 使用フレックス係数を決定する。 行上のすべてのアイテムの仮主サイズ（外側）を合計する。 合計がフレックスコンテナの内側主サイズより小さければ、 このアルゴリズムの残りではflex grow係数を使う。 それ以外はflex shrink係数を使う。
  2. 各フレックス行のアイテムは、最初目標主サイズを flex base sizeに設定する。 各アイテムは最初未凍結で、凍結される可能性がある。

    注: アイテムの目標主サイズは、凍結後は変更されない。

  3. 非柔軟アイテムのサイズ決定。 凍結し、 目標主サイズを 仮主サイズに設定する…
  4. 初期空きスペースを計算。 行上のすべてのアイテムの外側サイズを合計し、 フレックスコンテナの内側主サイズからこれを引く。 凍結アイテムには外側目標主サイズを使い、 その他のアイテムには外側flex base sizeを使う。
  5. ループ：
    1. 柔軟アイテムの有無確認。 行上の全アイテムが凍結済みなら、このループを終了。
    2. 残り空きスペースを計算。初期空きスペースと同様に計算。 未凍結アイテムのflex係数合計が1未満なら、 初期空きスペースにこの合計を掛ける。 この値の絶対値が残り空きスペースの絶対値より小さければ、 これを残り空きスペースとして使う。
    3. 残り空きスペースがゼロでなければ、flex係数に比例して分配：
      flex grow係数使用時
      行上の未凍結アイテムごとに、 アイテムのflex grow係数と行上の未凍結アイテム全体のflex grow係数合計との比率を計算。 アイテムの目標主サイズを、 flex base sizeに、 この比率に応じた残り空きスペースの一部を加えて設定。
      flex shrink係数使用時
      行上の未凍結アイテムごとに、 flex shrink係数に内側flex base sizeを掛け、 拡大flex shrink係数として記録。 アイテムの拡大flex shrink係数と 行上の未凍結アイテム全体の拡大flex shrink係数合計との比率を計算。 アイテムの目標主サイズを、 flex base sizeから この比率に応じた残り空きスペース（絶対値）の一部を減算して設定。この計算で内側主サイズが負になる場合があるが、 次のステップで修正される。
    4. min/max違反を修正。 凍結されていない各アイテムの目標主サイズを 使用min・max主サイズでクランプし、コンテンツボックスサイズをゼロで下限する。 アイテムの目標主サイズが小さくなった場合はmax違反、 大きくなった場合はmin違反。
    5. 過度にflexされたアイテムを凍結。 前のステップの調整量∑(clamped size - unclamped size)の合計が 総違反量となる。 総違反量が：
      ゼロ
      全アイテムを凍結
      正
      min違反のアイテムを全て凍結
      負
      max違反のアイテムを全て凍結

      注: この処理で少なくとも1アイテムが凍結され、 ループが進行し必ず終了することが保証される。

    6. このループの最初に戻る。
  6. 各アイテムの使用主サイズを 目標主サイズに設定する。
テスト

9.8. 確定サイズと非確定サイズ

CSS Sizing [CSS-SIZING-3]では確定および非確定長が定義されていますが、 Flexboxでは、ある長さが確定とみなされる追加のケースがいくつかあります：

  1. フレックスコンテナに確定な主サイズがある場合、 フレックス処理後の主サイズはフレックスアイテムにとって 確定として扱われます。

  2. フレックスアイテムのflex basisが確定なら、 フレックス処理後の主サイズも 確定となります。

  3. 単一行のフレックスコンテナに確定した交差サイズがある場合、 自動優先外側交差サイズを持つ伸長したフレックスアイテムは、フレックスコンテナの内側交差サイズ（フレックスアイテムのmin/max交差サイズでクランプ）となり、 確定とみなされます。

  4. フレックス行の交差サイズが決定された時点で、 autoサイズのフレックスコンテナ内のアイテムの交差サイズもレイアウト目的では 確定とみなされます。 ステップ11参照。

テスト

注: これはflex layout内で 「確定」サイズの決定にレイアウト処理が必要となることを意味しています。 これはflex item内のパーセンテージ値が、著者の期待通りに解決されるようにするためです。

9.9. 内在サイズ

内在サイズは、フレックスコンテナが fit-content論理幅（fit-content式を使用）や内容ベースの論理高さ（max-contentサイズを使用）など 各種内容ベースの自動サイズ決定に使われます。 これらの計算では、フレックスアイテム上のautoマージンは0として扱われます。

この節の用語定義については[CSS-SIZING-3]を参照してください。

テスト

9.9.1. フレックスコンテナの内在主サイズ

max-content 主サイズのフレックスコンテナは、理論的には、フレックスレイアウトをそのコンテナサイズで実行したとき、 各フレックスアイテムが アイテムの柔軟性の範囲内で max-content寄与値以上のサイズになるような フレックスコンテナが取りうる最小サイズです。

min-content 主サイズのフレックスコンテナは、理論的には、フレックスコンテナが取りうる最小サイズであり、 どのアイテムもコンテナからはみ出さず、 どのアイテムの内容もアイテム自身からはみ出さないサイズです。 （ただし、ボックスレイアウトがoverflowするように定義されている場合は除く（例えば、負のマージンや合計が100%以上になるパーセンテージサイズ等）。）

テスト
9.9.1.1. 理想的なアルゴリズム

注: 以下のアルゴリズムはフレックスコンテナの理想的な内在主サイズを計算します。 しかし、最初に正しく実装されなかったため、 既存コンテンツが（残念ながら一貫した）誤った実装動作に依存するようになりました。これはWeb互換性がありません。 実装者やCSSワーキンググループは、 Webブラウザ実装がこの動作に安全に近づけるかどうかを調査しており、 更なる実験が歓迎されています。

非collapsedなフレックスアイテムのみを考慮：

  1. 各フレックスアイテムについて、 外側flex base sizeを max-content寄与値サイズから引き算する。 その結果が正の場合は、 アイテムのflex grow factorで割る（flex grow factorが1以上の場合）、 またはflex grow factorが1未満の場合は掛ける。 結果が負の場合は、 アイテムのscaled flex shrink factorで割る（ゼロ除算の場合は負の無限大とみなす）。 これがアイテムのdesired flex fractionです。
  2. すべてのフレックスアイテムを無限長の行に配置する。 各行内で、 すべてのフレックスアイテムのdesired flex fractionのうち最大（最も正）の値を求める。 これがその行のchosen flex fractionです。
  3. chosen flex fractionが正であり、 行のflex grow factorの合計が1未満なら、 chosen flex fractionをその合計で割る。

    chosen flex fractionが負であり、 行のflex shrink factorの合計が1未満なら、 chosen flex fractionにその合計を掛ける。

  4. 各アイテムのflex base sizeに flex grow factor（縮小の場合はscaled flex shrink factor）と chosen flex fractionの積を加算し、 その結果をmax main sizeでクランプし、min main sizeで下限する。
  5. フレックスコンテナの max-contentサイズは、 全行の中で 算出された各行内すべてのアイテムサイズの合計の最大値となる。

min-content 主サイズは、単一行 フレックスコンテナの場合、 max-content 主サイズと同じ方法で計算されますが、 アイテムのmin-content寄与値が max-content寄与値の代わりに使われます。

このアルゴリズムのflex合計が1未満の場合の影響

上記のアルゴリズムは特に2つのケースで正しい挙動を与え、 2つの間を連続的に遷移できるようにフレックスコンテナのサイズを設計しています：

  1. すべてのアイテムが非柔軟の場合、 フレックスコンテナは アイテムのflex base sizeの合計でサイズ決定されます。 （非柔軟なflex base sizeは、 width/heightの代用となり、 指定されていればBlock Layoutのmax-content寄与値の元になります。）

  2. すべてのアイテムがflex factor ≥ 1の柔軟アイテムの場合、 フレックスコンテナは アイテムのmax-content寄与値の合計（またはそれより大きいサイズ）で サイズ決定されます。 すべてのフレックスアイテムが少なくともmax-content寄与値以上のサイズになり、 かつ柔軟性に応じて他のアイテムとの比率も正しく保たれます。

例えば、フレックスコンテナに フレックスアイテムが1つあり、 flex-basis: 100px;だがmax-contentサイズが200pxの場合、 アイテムがflex-grow: 0なら フレックスコンテナ（およびフレックスアイテム）は 100px幅、 flex-grow: 1以上なら フレックスコンテナ（およびフレックスアイテム）は 200px幅となります。

この2つのケース間の全体挙動を連続化する方法は複数ありますが、 それぞれ欠点があります。 もっとも悪影響が少ないものを選んでいますが、 flex factorが1未満の場合は柔軟性が二重に適用されてしまいます。 上記例でアイテムがflex-grow: .5なら、 フレックスコンテナは 150px幅となり、 アイテムは最終的に125px幅になります。

この二重適用を完全に排除することはできません。 他のより重要な原則を犠牲にしない限り（特に原則3―flex-grow: .5のアイテムが2つあっても二重適用しないようにしつつ、 flex-grow: 0の兄弟アイテムがflex-grow: 1のアイテムに影響しないようにする―はできないようです）。

選択された具体的挙動についての詳細な補足

原則：

  1. サイズがゼロに近づく場合も、拡大・縮小とも爆発的なサイズにしない。

  2. flex factorがすべて1以上なら、すべてのアイテムがmax-contentサイズ以上になる最小サイズを返す。

  3. flex係数がゼロのアイテムはサイズに一切影響しない。

  4. flex係数やアイテムサイズの変化に対して連続的な挙動を保つ。

  5. 任意の入力変数（サイズ、flex係数）の線形変化に対して、サイズ変化もできるだけ線形にする。

  6. flex factorの合計が1以上なら、すべてのアイテムがmax-contentサイズ以上になる最小サイズを返す。

これらを両立させるためには、flex factorや行のflex factor合計が1未満の場合は補正を加える必要があります。

縮小は比較的簡単です。 0 shrinkの場合はdesired fractionが負の無限大になるので（常に最大値を取るので選ばれない）、 行レベルで補正を加えるだけでよく、合計が1未満の場合だけ二重適用になります。

拡大はより複雑です。 0 growの場合は正の無限大になってしまうので、個々のアイテムレベルで補正が必要です。 factorが1未満の場合はspaceにfactorを掛けますが、 それだけだとfactorが1未満＆合計が1以上の場合は二重適用、 合計が1未満だと三重適用になるので、 合計が1の場合は逆補正で割り算して二重適用に揃えます。

二重適用を完全には排除できませんが、 他の原則を守るために許容しています。

9.9.1.2. Web互換の内在サイズ決定アルゴリズム

注: 以下のアルゴリズムはWeb互換性があることが示されています。 今後、可能であれば上記の理想アルゴリズムに近づけるために変更される可能性があります。

Web互換アルゴリズムは後述予定。[Issue #8884]

9.9.1.3. 複数行min-contentアルゴリズム

複数行コンテナについては、 min-content 主サイズは、そのフレックスコンテナ内の 非collapsedなフレックスアイテムの min-content寄与値の最大値となります。 この目的では、 アイテムが伸長不可ならその寄与値はアイテムのflex base sizeで上限、 縮小不可ならflex base sizeで下限し、 さらにアイテムのmin/max主サイズでクランプします。

9.9.2. フレックスコンテナの内在交差サイズ

min-content/max-content 交差サイズは、 単一行のフレックスコンテナの場合、 アイテムのmin-content寄与値/max-content寄与値の最大値となります。

複数行のフレックスコンテナについては、 行方向・列方向で挙動が異なります：

row 複数行 フレックスコンテナ 交差サイズ

min-content/max-content 交差サイズは、 フレックスコンテナを交差軸方向の min-content制約／max-content制約下で サイズ決定したときに得られる フレックス行の交差サイズの合計です。

column 複数行 フレックスコンテナ 交差サイズ

min-content 交差サイズは、 すべてのフレックスアイテムの min-content寄与値の最大値です。

注: このヒューリスティックは、 min-contentサイズがmax-contentサイズより小さくなることを保証するために 実質的に単一行とみなしています。 フレックスコンテナに高さ制約がある場合はオーバーフローしますが、 フレックスコンテナが スクロールコンテナでもある場合は、 少なくとも任意のカラムを scrollport内に完全に収めるだけの大きさになります。

max-content 交差サイズは、 フレックスコンテナを 交差軸方向の max-content制約下でサイズ決定したときに得られる フレックス行の交差サイズの合計であり、 各フレックスアイテムのレイアウト時に available spaceとして アイテムのmax-content 交差サイズ寄与値の最大値を使います。

注: このヒューリスティックは、 フレックスコンテナが 各フレックスアイテムを max-content寄与値以上でレイアウトし、 各フレックス行が 最大のフレックスアイテムより大きくならないようにする サイズの合理的な近似を与えます。 完全には正確ではない場合もありますが、 完全に正確にするのは非常に高コストのため、 実用上は十分です。

テスト

9.9.3. フレックスアイテムの内在サイズ寄与値

min-content寄与値の主サイズ（main-size）は、フレックスアイテムの外側min-contentサイズと、外側preferredサイズ（それがautoでない場合）のうち大きい方で、 さらにmin／max主サイズによってクランプされます。

max-content寄与値の主サイズ（main-size）は、フレックスアイテムの外側max-contentサイズと、外側preferredサイズ（それがautoでない場合）のうち大きい方で、 さらにmin／max主サイズによってクランプされます。

10. フレックスレイアウトの分割

フレックスコンテナは、アイテム間、アイテムの行（複数行モード時）、アイテム内部でページ分割できます。 break-*プロパティは、ブロックレベルやインラインレベルのボックスと同様、フレックスコンテナにも通常通り適用されます。 このセクションでは、それらがフレックスアイテムやアイテム内容にどのように適用されるかを定義します。 詳細はCSS Fragmentation Moduleも参照 [CSS3-BREAK]。

以下の分割ルールでは、分割コンテナを「ページ」と呼びます。 同様のルールは他の分割コンテキストにも適用されます。 （必要に応じて「ページ」を適切な分割コンテナタイプに置き換えてください。） このセクションでは可読性のため、「row」と「column」は フレックスコンテナの ブロックフロー方向との相対的な向きを指し、 フレックスコンテナ自身の向きではありません。

分割されたフレックスコンテナの厳密なレイアウトは、このFlexible Box Layoutレベルでは定義されていません。 ただし、フレックスコンテナ内部での分割は以下のルールに従います （order-modified document orderで解釈）：

テスト

10.1. サンプルフレックス分断アルゴリズム

この参考セクションでは、フレックスコンテナ向けの分断アルゴリズム例を示します。 実装者はこのアルゴリズムを改良し、CSSワーキンググループへフィードバックを
提供することが推奨されます。

このアルゴリズムはページ分割が常に前方向に進むと仮定しています。 よって以下のアルゴリズムでは、分割前の整列は基本的に無視されます。 高度なレイアウトエンジンは断片間の整列も対応できるかもしれません。

単一行のカラムフレックスコンテナ
  1. フレックスレイアウトアルゴリズム（ページ分割を考慮せず）を交差サイズの決定まで実行する。
  2. 最初から、連続したフレックスアイテムまたはその断片をできる限り多く（最低1つまたは断片）レイアウトし、 ページの空きがなくなるか強制分割に遭遇するまで続ける。
  3. 前ステップで空きがなくなり、空きスペースが正の場合、 UAはこのページ上の分配された空きスペースを（ゼロまでだが通り越さず）減らして 次の分割不可フレックスアイテムまたは断片のための空きを作ってもよい。 それ以外の場合、入らないアイテムや断片は次ページに送られる。 UAは断片の50%以上が残り空きに入るなら「引き上げ」、そうでなければ「押し出し」するべき。
  4. 前ステップでレイアウトされなかったアイテムや断片があれば、 フレックスレイアウトアルゴリズムを 行長の決定から交差サイズの決定まで再実行し、 次ページサイズと全ての内容（既にレイアウト済も含む）で再開、 ただし未レイアウトの最初のアイテムや断片から始める。
  5. フレックスコンテナの各断片について、 主軸整列から最後までフレックスレイアウトアルゴリズムを続ける。

このアルゴリズムの意図は、カラム方向の単一行フレックスコンテナが ブロックフローと非常に似た分割動作をすることです。 テスト例として、justify-content:startかつ非柔軟アイテムのみの フレックスコンテナは、 同じ内容・サイズ・マージンのin-flow子を持つブロックと同じ分割動作となるべきです。

複数行のカラムフレックスコンテナ
  1. ページ分割を考慮してフレックスレイアウトアルゴリズムを実行 （フレックスコンテナの最大行長をページ残り空きに制限） 交差サイズの決定まで。
  2. フレックス行をできる限り多く（最低1行）レイアウトし、 フレックスコンテナの交差方向空きがなくなるか強制分割に遭遇するまで：
    1. 連続したフレックスアイテムをできるだけ多く（最低1つ）、 最初からページの空きがなくなるか強制分割まで続ける。 アイテム内の強制分割は無視。
    2. これが最初のフレックスコンテナ断片で、 この行が1つだけのアイテムでページ残り空きより大きく、 かつフレックスコンテナがページ上端でない場合は 次ページに移してレイアウトを最初から再開。
    3. 最初のステップでレイアウトされなかったアイテムがあれば、 主サイズの決定から交差サイズの決定まで 前行未レイアウトのアイテムのみで再実行・再開。
  3. 前ステップでレイアウトされなかったアイテムがあれば、 行長の決定から交差サイズの決定まで 次ページサイズと未レイアウトのアイテムのみで実行・再開。
  4. フレックスコンテナの各断片について、 主軸整列から最後までフレックスレイアウトアルゴリズムを続ける。

このサンプルアルゴリズムの欠点は、 フレックスアイテムが1ページに完全に収まらない場合、 複数行カラムフレックスコンテナでは ページ分割されないことです。

単一行のローフレックスコンテナ
  1. フレックスレイアウトアルゴリズム全体（ページ分割考慮せず）を実行、 ただしalign-selfが flex-startまたはbaseline以外はflex-startとみなす。
  2. 分割不可アイテムがページ残り空きに収まらず、 かつフレックスコンテナがページ上端でない場合は 次ページに移してレイアウトを最初から再開。
  3. 各アイテムについて、内容のうちページ残り空きに収まる部分までレイアウトし、 残りを次ページへ断片化。 フレックスレイアウトアルゴリズムを 行長の決定から主軸整列まで新ページサイズで再実行。

    前断片に完全に収まったフレックスアイテムも 後続断片では主軸スペースを消費する。

  4. フレックスコンテナの各断片について、 交差軸整列から最後までフレックスレイアウトアルゴリズムを再実行。 最初以外の断片では、 align-selfとalign-contentを 全断片・行でflex-startとして扱う。
  5. 元々のalign-self値で 全断片の合計交差サイズに アイテムを揃えた場合、アイテムが断片1つに完全に収まるなら その断片に移動して適切に整列してもよい。
複数行のローフレックスコンテナ
  1. フレックスレイアウトアルゴリズム（ページ分割考慮せず）を交差サイズの決定まで実行。
  2. フレックス行をできる限り多く（最低1行）、最初からページ空きまたは強制分割までレイアウト。

    行がページに収まらず、行がページ上端でなければ 次ページに移してレイアウトを最初から再開。 この行以降のアイテムのみ使用。

    フレックスアイテム自体が強制分割なら、 主サイズの決定から主軸整列まで この行以降のアイテムのみで再実行。 分割を起こしたアイテムは行分割ステップで自動で新行開始、 このステップに戻る。 アイテム内の強制分割は無視。

  3. 前ステップでレイアウトされなかったアイテムがあれば、 行長の決定から主軸整列まで 次ページサイズと未レイアウトアイテムのみで再実行。 前行未レイアウトから再開。
  4. 各断片について、 交差軸整列から最後までフレックスレイアウトアルゴリズムを続ける。

付録A: 軸マッピング

この付録は参考情報です。

ltr + horizontal-tb 書字モード（例：英語）の軸マッピング
flex-flow 主軸 開始 終了 交差軸 開始 終了
row + nowrap/wrap 横 左 右 縦 上 下
row-reverse + nowrap/wrap 右 左
row + wrap-reverse 左 右 下 上
row-reverse + wrap-reverse 右 左
column + nowrap/wrap 縦 上 下 横 左 右
column-reverse + nowrap/wrap 下 上
column + wrap-reverse 上 下 右 左
column-reverse + wrap-reverse 下 上
rtl + horizontal-tb 書字モード（例：ペルシャ語）の軸マッピング
flex-flow 主軸 main-start main-end 交差軸 cross-start cross-end
row + nowrap/wrap 横 右 左 縦 上 下
row-reverse + nowrap/wrap 左 右
row + wrap-reverse 右 左 下 上
row-reverse + wrap-reverse 左 右
column + nowrap/wrap 縦 上 下 横 右 左
column-reverse + nowrap/wrap 下 上
column + wrap-reverse 上 下 左 右
column-reverse + wrap-reverse 下 上
ltr + vertical-rl 書字モード（例：日本語）の軸マッピング
flex-flow 主軸 開始 終了 交差軸 開始 終了
row + nowrap/wrap 縦 上 下 横 右 左
row-reverse + nowrap/wrap 下 上
row + wrap-reverse 上 下 左 右
row-reverse + wrap-reverse 下 上
column + nowrap/wrap 縦 右 左 横 上 下
column-reverse + nowrap/wrap 左 右
column + wrap-reverse 右 左 下 上
column-reverse + wrap-reverse 左 右

付録B: -webkit-レガシープロパティ

この付録は規範的です。

これらのエイリアスは非推奨であり、著者は現役のレガシーUAに対応させる必要がない限り使用すべきではありません。

一般Webコンテンツとの互換性のため、 UAがWebブラウザであれば必須、それ以外は任意で 以下のレガシー名エイリアスを実装する必要があります：

エイリアス 標準
-webkit-align-content align-content
-webkit-align-items align-items
-webkit-align-self align-self
-webkit-flex flex
-webkit-flex-basis flex-basis
-webkit-flex-direction flex-direction
-webkit-flex-flow flex-flow
-webkit-flex-grow flex-grow
-webkit-flex-shrink flex-shrink
-webkit-flex-wrap flex-wrap
-webkit-justify-content justify-content
-webkit-order order
テスト

謝辞

フィードバック・貢献に感謝します：

Erik Anderson、 Christian Biesinger、 Tony Chang、 Phil Cupp、 Arron Eicholz、 James Elmore、 Andrew Fedoniouk、 Brian Heuston、 Shinichiro Hamaji、 Daniel Holbert、 Ben Horst、 John Jansen、 Brad Kemper、 Kang-hao Lu、 Markus Mielke、 Peter Moulder、 Robert O’Callahan、 Christoph Päper、 Ning Rogers、 Peter Salas、 Elliott Sprehn、 Morten Stenshorne、 Christian Stockwell、 Ojan Vafai、 Eugene Veselov、 Greg Whitworth、 Boris Zbarsky。

変更履歴

このセクションでは、以前の公開からの変更点を記録しています。

2018年11月19日 CR以降の変更点

コメント対応状況が公開されています。主な変更点：

2017年10月16日CR以降の変更点

コメント対応状況も公開されています。

2016年5月26日CR以降の変更点

コメント対応状況も公開されています。

主要な変更・バグ修正

明確化

2016年3月1日CR以降の変更点

Disposition of Comments も公開されています。

主要な変更とバグ修正

明確化

2015年5月14日LCWD以降の変更点

Disposition of Comments も公開されています。

主要な変更とバグ修正

明確化

2014年9月25日LCWD以降の変更点

Disposition of Comments も公開されています。

主要な変更とバグ修正

明確化

2014年3月25日 LCWD以降の変更点

コメント対応状況も公開されています。

主要な変更と バグ修正

2014年3月25日のLast Call Working Draft以降に、 以下の重要な変更が行われました。

明確化

2014年3月25日のLast Call Working Draft以降に、 次の重要な明確化も行われました。

2012年9月18日 Candidate Recommendation 以降の変更点

コメント対応状況も公開されています。

主要な変更と バグ修正

2012年9月18日のCandidate Recommendation 以降に、次の重要な変更が行われました：

明確化

以下の重要な明確化も行われました：

プライバシーに関する考慮事項

本仕様に関して新たなプライバシーに関する考慮事項は報告されていません。

セキュリティに関する考慮事項

本仕様に関して新たなセキュリティに関する考慮事項は報告されていません。

テスト

the order property, now in css-display-3

print stuff

non-specific crashers

need quirks mode

css box 3 tests

unsure/nonspecific

適合性

文書の規約

適合要件は、記述的な断定と RFC 2119 の用語を組み合わせて表現されます。規範部分における “MUST”、 “MUST NOT”、“REQUIRED”、“SHALL”、“SHALL NOT”、“SHOULD”、“SHOULD NOT”、“RECOMMENDED”、“MAY”、“OPTIONAL” といったキーワードは RFC 2119 に記載されたとおりに解釈されます。 ただし可読性のため、本仕様ではこれらの語がすべて大文字で現れるとは限りません。

本仕様の本文は、明示的に非規範と示された節、例、注記を除き、すべて規範です。 [RFC2119]

本仕様における例は “for example” の語で導入されるか、または class="example" により規範文から区別されます。 次に示すような形式です。

これは参考例の一例です。

参考注は “Note” の語で始まり、class="note" により規範文から区別されます。次に示すような形式です。

注: これは参考注です。

アドバイスは特別な注意喚起を促すためにスタイル付けされた規範節であり、<strong class="advisement"> により 他の規範文から区別されます。例: UA はアクセシブルな代替手段を提供しなければならない。

テスト

本仕様の内容に関連するテストは、このような “Tests” ブロックで文書化される場合があります。 そのようなブロックはすべて非規範です。

適合クラス

本仕様への適合性は、次の3つの適合クラスについて定義されます。

style sheet
CSS style sheet。
renderer
スタイルシートの意味を解釈し、それらを用いる文書をレンダリングする UA。
authoring tool
スタイルシートを作成する UA。

スタイルシートが本仕様に適合するのは、 本モジュールで定義された構文を使用するすべての宣言が、汎用 CSS 文法および本モジュールで定義される各機能の個別文法に 従って有効である場合です。

レンダラーが本仕様に適合するのは、 該当する仕様で定義されたとおりにスタイルシートを解釈することに加えて、本仕様で定義されたすべての機能を正しく パースして文書をそれに応じてレンダリングすることでサポートする場合です。ただし、デバイスの制限により 文書を正しくレンダリングできないことは、UA を非適合とするものではありません。（例えば、モノクロモニターで色を レンダリングすることは要求されません。）

オーサリングツールが本仕様に適合するのは、 本モジュールの汎用 CSS 文法および各機能の個別文法に従って文法的に正しいスタイルシートを書き、 かつ本モジュールで述べられるスタイルシートのその他のすべての適合要件を満たす場合です。

部分実装

著者が前方互換のパース規則を利用してフォールバック値を割り当てられるように、CSS レンダラーは、使用可能なレベルの サポートがない at-rule、プロパティ、プロパティ値、キーワード、およびその他の構文構成要素を無効として扱い（そして適切に無視）なければなりません。 特に、ユーザーエージェントは、単一の複数値プロパティ宣言の中で、サポートされないコンポーネント値のみを選択的に 無視し、サポートされる値のみを尊重するべきではありません。いずれかの値が無効と見なされる場合 （サポートされない値は無効と見なされます）、CSS は宣言全体を無視することを要求します。

不安定および独自機能の実装

将来の安定した CSS 機能との衝突を避けるため、 CSSWG は CSS への 不安定な機能や 独自拡張の実装において、ベストプラクティスに従うことを推奨します。

非実験的な実装

仕様が Candidate Recommendation 段階に達すると、 非実験的な実装が可能になり、実装者は仕様に従って正しく実装されていることを示せる CR レベルの機能については、 接頭辞なしの実装をリリースすべきです。

CSS の実装間の相互運用性を確立・維持するため、 CSS 作業グループは、非実験的な CSS レンダラーに対し、接頭辞なしの CSS 機能実装をリリースする前に、 実装報告（および必要に応じてその実装報告で用いたテストケース）を W3C に提出するよう要請します。 W3C に提出されたテストケースは、CSS 作業グループによるレビューおよび修正の対象となります。

テストケースおよび実装報告の提出に関する詳細は、 CSS 作業グループのウェブサイト https://www.w3.org/Style/CSS/Test/ にあります。 質問は public-css-testsuite@w3.org メーリングリストへお寄せください。

CR 退出基準

本仕様が Proposed Recommendation に進むためには、 各機能について少なくとも 2 つの独立した相互運用可能な実装が存在しなければなりません。 各機能は異なる製品群によって実装されてもよく、すべての機能が単一製品で実装される必要はありません。 この基準のために、以下の用語を定義します。

independent
各実装は異なる当事者によって開発され、他の適格実装のコードを共有・再利用・派生してはなりません。 本仕様の実装に関係しないコード部分はこの要件から除外されます。
interoperable
公式 CSS テストスイートの該当テストケースに合格すること、または Web ブラウザーでない実装の場合は同等のテストに合格すること。 そのような UA をもって相互運用性を主張する場合、テストスイートのすべての関連テストに対し同等のテストを作成する必要があります。 さらに、そのような UA をもって相互運用性を主張する場合は、同等テストに同様に合格できる追加の UA が 1 つ以上存在しなければなりません。 同等テストはピアレビューのために公開されていなければなりません。
implementation
次の条件を満たすユーザーエージェント:
  1. 仕様を実装していること。
  2. 一般公開されていること。実装は出荷製品または一般公開バージョン（ベータ版、プレビュー版、ナイトリービルド等）であってよい。 出荷されていない製品版は、安定性を示すため、少なくとも 1 か月の間その機能を実装していなければならない。
  3. 実験的でないこと（すなわち、テストスイートに合格するためだけに特別に設計され、今後の通常使用を意図しない版ではないこと）。

本仕様は少なくとも 6 か月間、Candidate Recommendation のままとなります。

索引

本仕様で定義される用語

参照で定義される用語

参照

規範参照

[CSS-ALIGN-3]
Elika Etemad; Tab Atkins Jr.. CSS Box Alignment Module Level 3. 11 March 2025. WD. URL: https://www.w3.org/TR/css-align-3/
[CSS-BOX-4]
Elika Etemad. CSS Box Model Module Level 4. 4 August 2024. WD. URL: https://www.w3.org/TR/css-box-4/
[CSS-BREAK-4]
Rossen Atanassov; Elika Etemad. CSS Fragmentation Module Level 4. 18 December 2018. FPWD. URL: https://www.w3.org/TR/css-break-4/
[CSS-CASCADE-5]
Elika Etemad; Miriam Suzanne; Tab Atkins Jr.. CSS Cascading and Inheritance Level 5. 13 January 2022. CR. URL: https://www.w3.org/TR/css-cascade-5/
[CSS-DISPLAY-3]
Elika Etemad; Tab Atkins Jr.. CSS Display Module Level 3. 30 March 2023. CR. URL: https://www.w3.org/TR/css-display-3/
[CSS-DISPLAY-4]
Elika Etemad; Tab Atkins Jr.. CSS Display Module Level 4. 19 December 2024. FPWD. URL: https://www.w3.org/TR/css-display-4/
[CSS-FLEXBOX-1]
Tab Atkins Jr.; et al. CSS Flexible Box Layout Module Level 1. 19 November 2018. CR. URL: https://www.w3.org/TR/css-flexbox-1/
[CSS-IMAGES-3]
Tab Atkins Jr.; Elika Etemad; Lea Verou. CSS Images Module Level 3. 18 December 2023. CRD. URL: https://www.w3.org/TR/css-images-3/
[CSS-INLINE-3]
Elika Etemad. CSS Inline Layout Module Level 3. 18 December 2024. WD. URL: https://www.w3.org/TR/css-inline-3/
[CSS-OVERFLOW-3]
Elika Etemad; Florian Rivoal. CSS Overflow Module Level 3. 7 October 2025. WD. URL: https://www.w3.org/TR/css-overflow-3/
[CSS-POSITION-3]
Elika Etemad; Tab Atkins Jr.. CSS Positioned Layout Module Level 3. 7 October 2025. WD. URL: https://www.w3.org/TR/css-position-3/
[CSS-PSEUDO-4]
Elika Etemad; Alan Stearns. CSS Pseudo-Elements Module Level 4. 27 June 2025. WD. URL: https://www.w3.org/TR/css-pseudo-4/
[CSS-SIZING-3]
Tab Atkins Jr.; Elika Etemad. CSS Box Sizing Module Level 3. 17 December 2021. WD. URL: https://www.w3.org/TR/css-sizing-3/
[CSS-SIZING-4]
Tab Atkins Jr.; Elika Etemad; Jen Simmons. CSS Box Sizing Module Level 4. 20 May 2021. WD. URL: https://www.w3.org/TR/css-sizing-4/
[CSS-TEXT-4]
Elika Etemad; et al. CSS Text Module Level 4. 29 May 2024. WD. URL: https://www.w3.org/TR/css-text-4/
[CSS-VALUES-3]
Tab Atkins Jr.; Elika Etemad. CSS Values and Units Module Level 3. 22 March 2024. CRD. URL: https://www.w3.org/TR/css-values-3/
[CSS-VALUES-4]
Tab Atkins Jr.; Elika Etemad. CSS Values and Units Module Level 4. 12 March 2024. WD. URL: https://www.w3.org/TR/css-values-4/
[CSS-WRITING-MODES-4]
Elika Etemad; Koji Ishii. CSS Writing Modes Level 4. 30 July 2019. CR. URL: https://www.w3.org/TR/css-writing-modes-4/
[CSS2]
Bert Bos; et al. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. 7 June 2011. REC. URL: https://www.w3.org/TR/CSS2/
[CSS3-BREAK]
Rossen Atanassov; Elika Etemad. CSS Fragmentation Module Level 3. 4 December 2018. CR. URL: https://www.w3.org/TR/css-break-3/
[CSS3-WRITING-MODES]
Elika Etemad; Koji Ishii. CSS Writing Modes Level 3. 10 December 2019. REC. URL: https://www.w3.org/TR/css-writing-modes-3/
[CSSOM-1]
Daniel Glazman; Emilio Cobos Álvarez. CSS Object Model (CSSOM). 26 August 2021. WD. URL: https://www.w3.org/TR/cssom-1/
[RFC2119]
S. Bradner. Key words for use in RFCs to Indicate Requirement Levels. March 1997. Best Current Practice. URL: https://datatracker.ietf.org/doc/html/rfc2119

参考（非規範）

[CSS-TEXT-DECOR-4]
Elika Etemad; Koji Ishii. CSS Text Decoration Module Level 4. 4 May 2022. WD. URL: https://www.w3.org/TR/css-text-decor-4/
[CSS3UI]
Tantek Çelik; Florian Rivoal. CSS Basic User Interface Module Level 3 (CSS3 UI). 21 June 2018. REC. URL: https://www.w3.org/TR/css-ui-3/
[HTML]
Anne van Kesteren; et al. HTML Standard. Living Standard. URL: https://html.spec.whatwg.org/multipage/

プロパティ索引

名称 値 初期値 適用対象 継承 %（割合） アニメーション種別 正準順序 算出値
align-content flex-start | flex-end | center | space-between | space-around | stretch stretch 複数行のフレックスコンテナ no n/a discrete 文法順 指定キーワード
align-items flex-start | flex-end | center | baseline | stretch stretch フレックスコンテナ no n/a discrete 文法順 指定キーワード
align-self auto | flex-start | flex-end | center | baseline | stretch auto フレックスアイテム no n/a discrete 文法順 指定キーワード
flex none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] 0 1 auto フレックスアイテム no 個別プロパティ参照 算出値の型による 文法順 個別プロパティ参照
flex-basis content | <'width'> auto フレックスアイテム no フレックスコンテナの内側の主サイズに相対 算出値の型による 文法順 指定キーワードまたは算出された <length-percentage> 値
flex-direction row | row-reverse | column | column-reverse row フレックスコンテナ no n/a discrete 文法順 指定キーワード
flex-flow <'flex-direction'> || <'flex-wrap'> 個別プロパティ参照 個別プロパティ参照 個別プロパティ参照 個別プロパティ参照 個別プロパティ参照 文法順 個別プロパティ参照
flex-grow <number [0,∞]> 0 フレックスアイテム no n/a 算出値の型による 文法順 指定数値
flex-shrink <number [0,∞]> 1 フレックスアイテム no n/a number 文法順 指定値
flex-wrap nowrap | wrap | wrap-reverse nowrap フレックスコンテナ no n/a discrete 文法順 指定キーワード
justify-content flex-start | flex-end | center | space-between | space-around flex-start フレックスコンテナ no n/a discrete 文法順 指定キーワード

課題索引

Web 互換のアルゴリズムが確立されたら、ここに概略を記す。 [Issue #8884] ↵