CSS プロパティ box-direction: 要素内部の配置方向を制御する

CSS プロパティ box-direction

box-direction プロパティは、ブロックレベル要素内で子要素が配置される方向を指定します。水平方向または垂直方向のフローを制御するために使用され、特に多言語レイアウトや縦書きのテキストを扱う場合に役立ちます。

適用対象

すべてのブロックレベル要素

値

値	説明
`normal`	デフォルト値。子要素は、ドキュメントのテキスト方向に従って配置されます。左から右へ記述する言語では、要素は左から右へ水平に配置されます。右から左へ記述する言語では、要素は右から左へ水平に配置されます。（後述のコード例を参照）
`reverse`	子要素は、`normal` の反対方向に配置されます。左から右へ記述する言語では、要素は右から左へ水平に配置されます。右から左へ記述する言語では、要素は左から右へ水平に配置されます。（後述のコード例を参照）
`inherit`	親要素から `box-direction` プロパティの値を継承します。（後述のコード例を参照）

使用例

デフォルトの動作 (box-direction: normal)

左から右へ記述する言語 (例: 英語) の場合:


<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

右から左へ記述する言語 (例: アラビア語) の場合:


<div class="container" dir="rtl">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

上記2つのコード例では、box-direction が normal に設定されているため、要素はドキュメントのテキスト方向に従って配置されます。英語の例では左から右へ、アラビア語の例では右から左へ配置されます。

box-direction: reverse

box-direction を reverse に設定すると、要素の配置方向が反転します。


<div class="container reverse">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

この例では、要素は右から左へ配置されます (英語の場合)。

box-direction: inherit

box-direction を inherit に設定すると、親要素の box-direction の値が継承されます。


<div class="container" style="writing-mode: vertical-rl; box-direction: reverse;">
  <div class="item inherit">1</div>
  <div class="item inherit">2</div>
  <div class="item inherit">3</div>
</div>

この例では、子要素は親要素の box-direction: reverse を継承し、右から左へ配置されます。

注意点

box-direction プロパティは、writing-mode プロパティと組み合わせて使用することで、要素内部のコンテンツの配置方向を完全に制御できます。
このプロパティは、すべてのブラウザでサポートされているわけではありません。使用する前に、ブラウザの互換性を確認してください。

参考資料

<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box-direction">MDN Web Docs: box-direction</a>
<a href="https://www.w3.org/TR/css-writing-modes-3/#logical-direction">W3C CSS Box Alignment Module Level 3</a>

よくある質問

box-direction と direction の違いは何ですか？
direction プロパティは、テキストの方向を制御します (例: 左から右、右から左)。一方、box-direction プロパティは、フレックスボックスではないブロックレベル要素内で、子要素が配置される方向を制御します。box-direction は、writing-mode プロパティと組み合わせて使用することで、より複雑なレイアウトを実現できます。
box-direction はレスポンシブデザインにどのように役立ちますか？
box-direction を使用することで、異なる画面サイズやデバイスの向きに応じて、要素の配置方向を動的に変更できます。例えば、モバイルデバイスでは縦に、デスクトップでは横に要素を配置するといったことが可能です。
box-direction のブラウザサポートは？
box-direction は、すべての主要なブラウザの最新バージョンでサポートされています。ただし、古いブラウザではサポートされていない場合があります。caniuse.com などのウェブサイトで、最新のブラウザサポート情報を確認してください。