はじめに
CSSフレックスボックス(display:flex)を使った均等配置のデザインサンプルです。
display:flex
設定要素は、ブロック要素のように動作、コンテンツはフレックスボックスモデルに従ってレイアウトされます。
justify-content：位置
justify-contentプロパティで、フレックスアイテムの位置を指定。
初期値：flex-start
| 値 | 配置 |
|---|---|
| flex-start | 主軸の起点（左端）に配置。 |
| flex-end | 主軸の終点（右端）に配置。 |
| center | 主軸の中央に配置。 |
| space-between | 余白をもって等間隔に配置。 余白がないときは、flex-startと同じ |
| space-around | 余白をもって等間隔に配置。 余白がないときは、centerと同じ |
配置のサンプル
flex-start
sample1
flex-start
HTML
<div class="sample1">
<div class="box">sample1</div>
<div class="box">flex-start</div>
</div>
CSS
.sample1 {
display:flex;
flex-wrap: wrap;
bouder: 1px solid #999;
}
.box{
width: 100px;
height: 100px;
margin: 10px;
background-color: #ccc;
}
flex-end
sample2
flex-end
HTML
<div class="sample2">
<div class="box">sample2</div>
<div class="box">flex-end</div>
</div>
CSS
.sample2 {
display:flex;
justify-content:space-end;
flex-wrap: wrap;
bouder: 1px solid #999;
}
.box{
width: 100px;
height: 100px;
margin: 10px;
background-color: #ccc;
}
center
sample3
center
HTML
<div class="sample3">
<div class="box">sample3</div>
<div class="box">center</div>
</div>
CSS
.sample3 {
display:flex;
justify-content:center;
flex-wrap: wrap;
bouder: 1px solid #999;
}
.box{
width: 100px;
height: 100px;
margin: 10px;
background-color: #ccc;
}
space-between
sample4
space-between
HTML
<div class="sample4">
<div class="box">sample4</div>
<div class="box">space-between</div>
</div>
CSS
.sample4 {
display:flex;
justify-content:space-between;
flex-wrap: wrap;
bouder: 1px solid #999;
}
.box{
width: 100px;
height: 100px;
margin: 10px;
background-color: #ccc;
}
space-around
sample5
space-around
HTML
<div class="sample5">
<div class="box">sample5</div>
<div class="box">space-around</div>
</div>
CSS
.sample5 {
display:flex;
flex-wrap: wrap;
bouder: 1px solid #999;
justify-content:space-around;
}
.box{
width: 100px;
height: 100px;
margin: 10px;
background-color: #ccc;
}
要素ごとにデザインを変える
box1
box2
HTML
<div class="sample">
<div class="box1">box1</div>
<div class="box2">box2</div>
</div>
CSS
.sample {
display:flex;
flex-wrap: wrap;
bouder: 1px solid #999;
}
.box1 .box2{
width: 100px;
height: 100px;
margin: 10px;
}
.box1{/*要素ごとのデザイン*/background-color: #ffd8b2;
}
.box2{
background-color: #ffbcdd;
}