CSS3: flex-direction プロパティ - ボックス内の子要素の表示方向

■ 概要

項　　目説　　明
記述形式 セレクタ {flex-direction: 値 }
値 の形式 row，row-reverse，column，column-reverse
初 期 値 row
対応ブラウザー C?+ / e?+ / N?+ / Fx?+ / Op?+ / Ch?+ / Sa?+
適用可能な要素 ボックス要素
継　　承 しない

■ 解説

flex-directionプロパティ は，ボックス内の子要素の表示方向を指定します。

指定できる値の形式は，以下のとおりです。

値説　　明
row コンテナボックスの主軸（main axis）は，現在のテキストボックスの記入方向（inline axis）と同方向です。
コンテナボックスの開始・終了の方向はテキストボックスの開始・終了と同方向です。
row-reverse コンテナボックスの主軸（main axis）は，現在のテキストボックスの記入方向（inline axis）と逆方向です。
コンテナボックスの開始・終了の方向はテキストボックスの開始・終了と逆方向です。
column コンテナボックスの主軸（main axis）は，現在のテキストボックスの記入方向（block axis）と同方向です。
コンテナボックスの開始・終了の方向はテキストボックスの上端・下端と同方向です。
column-reverse コンテナボックスの主軸（main axis）は，現在のテキストボックスの記入方向（block axis）と逆方向です。
コンテナボックスの開始・終了の方向はテキストボックスの上端・下端と逆方向です。

なお，フレキシブル・コンテナと行ボックスの配置に関しては，多数の用語 が定義され，用いられておりますので，これらについての知識は必須です。

■ 使用例（ flex-direction プロパティの利用）

HTMLソース
CSS
<head> ～ </head>		 
<style type="text/css" media="screen, handheld, print, tv" >
<!--
   .bc1 { background-color: green; }
   .bc2 { background-color: maroon; }
   .bc3 { background-color: blue; }
   .bc4 { background-color: red; }

   div.fwrapp {
      margin: 10px;
      display: flex;
      background-color: #f0f0f0;
   }
   div.fwrapp div {
      width: 100px;
      height: 35px;
      color: #ffffff;
      font-size: 25px;
      text-align: center;
      padding-top: 10px;
   }

   div.fdirect1 { flex-direction: row; }
   div.fdirect2 { flex-direction: row-reverse; }
   div.fdirect3 { flex-direction: column; }
   div.fdirect4 { flex-direction: column-reverse; }
-->
</style>
HTML
<body> ～ </body>		 
<div class="fwrapp fdirect1">
   <div class="bc1">1</div>
   <div class="bc2">2</div>
   <div class="bc3">3</div>
   <div class="bc4">4</div>
</div>
<div class="fwrapp fdirect2">
   <div class="bc1">1</div>
   <div class="bc2">2</div>
   <div class="bc3">3</div>
   <div class="bc4">4</div>
</div>
<div class="fwrapp fdirect3">
   <div class="bc1">1</div>
   <div class="bc2">2</div>
   <div class="bc3">3</div>
   <div class="bc4">4</div>
</div>
<div class="fwrapp fdirect4">
   <div class="bc1">1</div>
   <div class="bc2">2</div>
   <div class="bc3">3</div>
   <div class="bc4">4</div>
</div>

ブラウザー 表示例
1
2
3
4
↑ { flex-direction: row; } の表示 ↑

1
2
3
4
↑ { flex-direction: row-reverse; } の表示 ↑

1
2
3
4
↑ { flex-direction: column; } の表示 ↑

1
2
3
4
↑ { flex-direction: column-reverse; } の表示 ↑

■ 備考

【参考ページ】