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


 

はじめに

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

 

 

綾糸: 綾糸 主婦 1990年代、汎用機時代のエンジニア 趣味で長くやっていたweb制作は、未だにエディタでの手コーティング 現在は自宅でゆるりとweb制作やライターをしています