Flexboxを使いこなそう！の第3弾です。
- [第1回] Flexboxを使いこなそう！-基本の書き方-
- [第2回] Flexboxを使いこなそう！-子要素の並び順を指定する-
今回は子要素の折り返しについて書いていきます。
子要素の折り返し
まずは折り返しについてです。
Flexboxは『並べる』ことを前提にした機能なので、デフォルトのままだと外側のサイズ指定したボックスから要素がはみ出してもそのまま横に並び続けてしまいます。
とりあえずどんな感じになるのか見てみましょう。
折り返し関連のプロパティには『flex-wrap』を使っていきます。
折返しさせない場合
HTML|
1 2 3 4 5 6 7 8 |
<div class="box"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> </div> <!--//box--> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.box{ display: flex; flex-wrap: nowrap; background: #E4E4E4; width: 250px; } .box .item{ padding: 15px; background:#0EA679; color: #FFF; margin:0 10px 10px 0; font-size: 20px; font-weight: bold; } |
DEMO
Flexboxにはデフォルトで『flex-wrap: nowrap;』が指定されています。
これで『折り返さない』という設定になっています。
DEMOのように、グレー背景の幅指定した（今回は250px）ボックスからはみ出ても横に並び続けています。
では折り返し指定をしてみましょう。
折返しさせる場合
今度は上の画像のように、幅指定したボックスの中で子要素を折り返しさせます。
HTML
|
1 2 3 4 5 6 7 8 |
<div class="box"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> </div> <!--//box--> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.box{ display: flex; flex-wrap: wrap; background: #E4E4E4; width: 250px; } .box .item{ padding: 15px; background:#0EA679; color: #FFF; margin:0 10px 10px 0; font-size: 20px; font-weight: bold; } |
DEMO
今度は『flex-wrap: wrap;』を指定しました。これでボックスの中で折り返しができます。
最後に、折返しさせつつ、並び順を下から上にする方法です。
折返しさせつつ、並び順を下から上にする
文字だけだとぴんと来ないかもしれませんが、図解するとこんな感じです。
HTML
|
1 2 3 4 5 6 7 8 |
<div class="box"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> </div> <!--//box--> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.box{ display: flex; flex-wrap: wrap-reverse; background: #E4E4E4; width: 250px; } .box .item{ padding: 15px; background:#0EA679; color: #FFF; margin:0 10px 10px 0; font-size: 20px; font-weight: bold; } |
DEMO
flex-wrapに『wrap-reverse』を指定しました。
ボックス型のニュースの並びなどに使えそうな要素ですね。
[追記]
新しい記事を書きました。
