以前掲載した、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;
align-content: flex-start;
flex-wrap: wrap;
}
</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;
align-content: center;
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
E
F
G
H
<p class=down >次は親要素の底面に寄せるパターン</p>
<style>
.flex_box3{
display: flex;
align-content: flex-end;
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 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_box4{
display: flex;
align-content: space-between;
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>
2行より3行以上のときに使ったほうがしっくりきそうです。
次は横1列に対して上下にスペースを空けるパターン
A
B
C
D
E
F
G
H
<style>
.flex_box5{
display: flex;
align-content: space-around;
flex-wrap: wrap;
}
</style>
<div class="flex_box5 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_box6{
display: flex;
flex-direction: column;
}
</style>
<div class="flex_box6 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>
親要素の縦を指定しているので、子要素が切れていますが、何かに使えそうです。
このflexの指定を使わない場合、floatやJSで一工夫が必要でした。
需要があるということで誕生したのだと思うので、利用シーンや今後の進化は追っていきたいと思います。
