以前掲載した、flexでシンプルに横に並べるサンプルに続き、子要素の数が多くなった時の応用編です。
まずは共通のスタイルを用意します。
<style>
.demo_box{
background: #AAA;
height: 210px;
max-width:400px;
margin:0 0 10px;
overflow: hidden;
}
.demo_item {
background: #FFF;
width: 80px;
height: 80px;
margin: 0px;
box-sizing: border-box;
border:solid 1px #999;
font-size: 30px;
line-height: 68px;
text-align: center;
}
</style>
まず、要素が増えても、改行をしないパターン
A
B
C
D
E
F
G
H
<style>
.flex_box1{
display: flex;
flex-wrap: nowrap;
}
</style>
<div class="flex_box1 demo_box">
<div class="demo_item">A</div>
<div class="demo_item">B</div>
<div class="demo_item">C</div>
<div class="demo_item">D</div>
<div class="demo_item">E</div>
<div class="demo_item">F</div>
<div class="demo_item">G</div>
<div class="demo_item">H</div>
</div>
この場合は子要素の合計が親要素を超えると、横幅していが無視されて縮まります。
横に並べて、改行するパターン
A
B
C
D
E
F
G
H
<style>
.flex_box2{
display: flex;
flex-wrap: wrap;
}
</style>
<div class="flex_box2 demo_box">
<div class="demo_item">A</div>
<div class="demo_item">B</div>
<div class="demo_item">C</div>
<div class="demo_item">D</div>
<div class="demo_item">E</div>
<div class="demo_item">F</div>
<div class="demo_item">G</div>
<div class="demo_item">H</div>
</div>
この場合は子要素の合計が親要素を超えると改行されます
次は要素同士の間にうまいこと等間隔にスペースを入れます。
A
B
C
D
<style>
.flex_box3{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
</style>
<div class="flex_box3 demo_box">
<div class="demo_item">A</div>
<div class="demo_item">B</div>
<div class="demo_item">C</div>
<div class="demo_item">D</div>
</div>
これは確かに便利そうです。
ただし、要素の個数が増えるとイメージと違いました。
A
B
C
D
E
F
G
H
確かに左右対称でうまいこと並んでいるのですが、そうではない感じがあります。
次は各要素の両サイドに一定のスペースを入れます。
A
B
C
D
<style>
.flex_box4{
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
</style>
<div class="flex_box4 demo_box">
<div class="demo_item">A</div>
<div class="demo_item">B</div>
<div class="demo_item">C</div>
<div class="demo_item">D</div>
<div class="demo_item">E</div>
<div class="demo_item">F</div>
<div class="demo_item">G</div>
<div class="demo_item">H</div>
</div>
最初と最後にも余白がはいるので、若干ゆとりを感じます。
こちらのサンプルも要素が増えると次のようになります。
A
B
C
D
E
F
G
H
おそらく親要素に入るだけ入れることが優先され、余白ができる行には余白が分配されるようです。
うまく使い分けるには工夫が必要そうです。
