CSS3: flex-flow プロパティ - ボックス内の子要素の表示方向の一括指定

■ 概要

項　　目説　　明
記述形式 セレクタ {flex-flow: 値 }
値 の形式 flex-direction，flex-wrap
初 期 値 各プロパティの初期値
対応ブラウザー C?+ / e?+ / N?+ / Fx?+ / Op?+ / Ch?+ / Sa?+
適用可能な要素 フレキシブル・コンテナ
継　　承 しない

■ 解説

flex-flowプロパティ は，ボックス内の子要素の表示方向 に関する flex-direction と flex-wrap の２つのプロパティを一括指定します。

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

値説　　明
flex-direction テキストの記入方向を指定します。
flex-wrap 単一行か複数行か，また，改行した新しい行を表示する方向を指定します。

値の指定方法の詳細は，各プロパティの説明を参照してください。

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

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

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; }
   .bc5 {background-color: yellow; }

   div.fwrapp {
      margin: 10px;
      width: 500px;
      display: flex;
      flex-flow: row nowrap;
      background-color: #f0f0f0;
   }

   div.fwrapp div {
      width: 150px;
      height: 35px;
      color: #ffffff;
      font-size: 25px;
      text-align: center;
      padding-top: 10px;
   }

   div.fflow1 { flex-flow: row nowrap; }
   div.fflow2 { flex-flow: row-reverse nowrap; }
   div.fflow3 { flex-flow: row wrap; }
   div.fflow4 { flex-flow: row-reverse wrap; }
	
-->
</style>
HTML
<body> ～ </body>		 
<div class="fwrapp fflow1">
   <div class="bc1">1</div>
   <div class="bc2">2</div>
   <div class="bc3">3</div>
   <div class="bc4">4</div>
</div>
<div class="fwrapp fflow2">
   <div class="bc1">1</div>
   <div class="bc2">2</div>
   <div class="bc3">3</div>
   <div class="bc4">4</div>
</div>
<div class="fwrapp fflow3">
   <div class="bc1">1</div>
   <div class="bc2">2</div>
   <div class="bc3">3</div>
   <div class="bc4">4</div>
</div>
<div class="fwrapp fflow4">
   <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
1
2
3
4
1
2
3
4
1
2
3
4

■ 備考

【参考ページ】