CSS3 flexを使った配置３（行間の操作）

以前掲載した、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>

まず、親要素の上の面に詰めて配置するパターン

<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>

スタンダードな感じです。

次は親要素に対して、高さをセンターに寄せるパターン

<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>

なんだかパワーポイントなどでよく使いそうな配置ですね。

次は親要素の底面に寄せるパターン

<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>

少し重そうな印象です。

以下は横列ごとのスペースの指定です。

横列同士の間に等間隔のスペースを空けるパターン

<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列に対して上下にスペースを空けるパターン

<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>

パッと見やすい印象があります。個人的には等間隔でないところが気になりますが。

最後に、そもそも横ではなく縦のカラムで見せたいパターン

<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で一工夫が必要でした。

需要があるということで誕生したのだと思うので、利用シーンや今後の進化は追っていきたいと思います。