CSS - reading-flow

• トップ
• CSSリファレンス
• reading-flow

概要

属性名	reading-flow
値	normal | flex-visual | flex-flow | grid-rows | grid-columns | grid-order | source-order
初期値	normal
適用可能要素	ブロック、フレックスまたはグリッド
継承	継承しない
サポート	https://caniuse.com/mdn-css_properties_reading-flow

説明

フレックス や グリッド では、DOM 上の要素の順序と画面に表示される要素の順序が異なることがあります。reading-flow を指定することで、読み上げブラウザによる読み込み順序や、TABキーによる移動を、DOM 上の要素の順序ではなく、画面に表示された順などに制御することができます。2025年の Chrome 137 からサポートされました。

normal

規定値です。DOM 上の要素の順序に従います。

flex-visual

フレックスで使用できます。フレックスが画面に表示されている順序に従います。

flex-flow

フレックスで使用できます。flex-flow で指定された順序に従います。

grid-rows

グリッドで使用できます。列方向に移動した後、行方向に移動します。

grid-columns

グリッドで使用できます。行方向に移動した後、列方向に移動します。

grid-order

グリッドで使用できます。基本的には DOM 上の要素の順序に従いますが、order が指定されている場合はその順序に従います。

source-order

ブロック、フレックス、グリッドで使用できます。基本的には DOM 上の要素の順序に従いますが、reading-order が指定されている場合はその順序に従います。

使用例

flex-visual

通常は DOM の出現順に #1 → #2 → #3 → #4 の順となりますが、flex-visual を指定すると表示された順に #4 → #3 → #2 → #1 で移動します。

.my-flex-visual {
  display: flex;
  flex-direction: row-reverse;
  reading-flow: flex-visual;
}

<div class="my-flex-visual">
  <input type="text" class="in1" placeholder="#1">
  <input type="text" class="in2" placeholder="#2">
  <input type="text" class="in3" placeholder="#3">
  <input type="text" class="in4" placeholder="#4">
</div>

flex-flow

下記の例では、DOM 順であれば #1 → #2 → #3 → #4、通常の表示順であれば #3 → #1 → #4 → #2 となりますが、flex-flow の指定に従い、行の逆順、列の逆順に #2 → #4 → #1 → #3 の順序となります。

.my-flex-flow {
  display: flex;
  flex-flow: row-reverse wrap-reverse;
  reading-flow: flex-flow;
  input { width: 45%; }
  .in1 { order: 3; }
  .in2 { order: 1; }
  .in3 { order: 4; }
  .in4 { order: 2; }
}

<div class="my-flex-flow">
  <input type="text" class="in1" placeholder="#1">
  <input type="text" class="in2" placeholder="#2">
  <input type="text" class="in3" placeholder="#3">
  <input type="text" class="in4" placeholder="#4">
</div>

grid-rows / grid-columns

グリッドの表示順に列方向に移動した後、行方向に移動し、#3 → #2 → #4 → #1 となります。grid-columns にすると、行方向に移動した後、列方向に移動するため、#3 → #4 → #2 → #1 の順となります。

.my-grid-rows {
  display: grid;
  grid: "a b"
        "c d";
  reading-flow: grid-rows;
  .in1 { grid-area: d; }
  .in2 { grid-area: b; }
  .in3 { grid-area: a; }
  .in4 { grid-area: c; }
}  

<div class="my-grid-rows">
  <input type="text" class="in1" placeholder="#1">
  <input type="text" class="in2" placeholder="#2">
  <input type="text" class="in3" placeholder="#3">
  <input type="text" class="in4" placeholder="#4">
</div>

grid-order

grid-order を指定した場合、表示順序に関係なく、order の値順に #3 → #2 → #4 → #1 の順となります。

.my-grid-order {
  display: grid;
  reading-flow: grid-rows;
  .in1 { order: 4; }
  .in2 { order: 2; }
  .in3 { order: 1; }
  .in4 { order: 3; }
}  

<div class="my-grid-order">
  <input type="text" class="in1" placeholder="#1">
  <input type="text" class="in2" placeholder="#2">
  <input type="text" class="in3" placeholder="#3">
  <input type="text" class="in4" placeholder="#4">
</div>

source-order

source-order を指定した場合、表示順序に関係なく、reading-order で指定した #3 → #2 → #4 → #1 の順となります。

.my-source-order {
  reading-flow: source-order;
  .in1 { reading-order: 4; }
  .in2 { reading-order: 2; }
  .in3 { reading-order: 1; }
  .in4 { reading-order: 3; }
}

<div class="my-source-order">
  <input type="text" class="in1" placeholder="#1">
  <input type="text" class="in2" placeholder="#2">
  <input type="text" class="in3" placeholder="#3">
  <input type="text" class="in4" placeholder="#4">
</div>

関連項目

• reading-order

リンク

• https://drafts.csswg.org/css-display-4/#reading-flow
• https://caniuse.com/mdn-css_properties_reading-flow

---