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

■ 概要

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

■ 解説

flex-wrapプロパティ は，ボックス内の子要素の改行の仕方を指定します。 すなわち，単一行か複数行か，また，改行の際には新しい行をどちらに表示するのかを指定します。

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

値説　　明
nowrap 単一行で表示します。
wrap 複数行で，正方向に表示します。
wrap-reverse 複数行で，逆方向に表示します。

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

■ 使用例（ box-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; }
   .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.fwrap1 { flex-wrap: nowrap; }
   div.fwrap2 { flex-wrap: wrap; }
   div.fwrap3 { flex-wrap: wrap-reverse; }
	
-->
</style>
HTML
<body> ～ </body>		 
<div class="fwrapp fwrap1">
   <div class="bc1">1</div>
   <div class="bc2">2</div>
   <div class="bc3">3</div>
   <div class="bc4">4</div>
</div>
<div class="fwrapp fwrap2">
   <div class="bc1">1</div>
   <div class="bc2">2</div>
   <div class="bc3">3</div>
   <div class="bc4">4</div>
</div>
<div class="fwrapp fwrap3">
   <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

■ 備考

【参考ページ】