コピペで！要素を均等配置するCSSフレックスボックスデザインサンプル

はじめに

CSSフレックスボックス(display:flex)を使った均等配置のデザインサンプルです。

設定要素は、ブロック要素のように動作、コンテンツはフレックスボックスモデルに従ってレイアウトされます。

 

justify-contentプロパティで、フレックスアイテムの位置を指定。

初期値：flex-start

値	配置
flex-start	主軸の起点（左端）に配置。
flex-end	主軸の終点（右端）に配置。
center	主軸の中央に配置。
space-between	余白をもって等間隔に配置。 余白がないときは、flex-startと同じ
space-around	余白をもって等間隔に配置。 余白がないときは、centerと同じ

 

配置のサンプル

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

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

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

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

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

 

 

要素ごとにデザインを変える

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