項 目 | 説 明 |
---|---|
記述形式 | セレクタ {flex-wrap: 値 } |
値 の形式 | nowrap,wrap,wrap-reverse |
初 期 値 | nowrap |
対応ブラウザー | C?+ / e?+ / N?+ / Fx?+ / Op?+ / Ch?+ / Sa?+ |
適用可能な要素 | フレキシブル・コンテナ |
継 承 | しない |
flex-wrapプロパティ は,ボックス内の子要素の改行の仕方を指定します。 すなわち,単一行か複数行か,また,改行の際には新しい行をどちらに表示するのかを指定します。
指定できる値の形式は,以下のとおりです。
値 | 説 明 |
---|---|
nowrap | 単一行で表示します。 |
wrap | 複数行で,正方向に表示します。 |
wrap-reverse | 複数行で,逆方向に表示します。 |
なお,フレキシブル・コンテナと行ボックスの配置に関しては,多数の用語 が定義され,用いられておりますので,これらについての知識は必須です。
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
|