CSS3

CSS3 Flexbox 位置の揃え方まとめ

More than 3 years have passed since last update.

前回:CSS3 Flexbox 並べ方まとめ

今回は揃え方です。

justify-contentalign-itemsalign-selfalign-contentをまとめます。


準備


<div id="flex">
<div class="flex-item">A</div>
<div class="flex-item">B</div>
<div class="flex-item">C</div>
<div class="flex-item">D</div>
<div class="flex-item">E</div>
<div class="flex-item">F</div>
<div class="flex-item">G</div>
</div>


#flex{
background: #55BE2E;
display: flex;

height: 300px;
width: 300px;
}

.flex-item{
background: #EE6E73;
font-size: 3em;
}


justify-content

画像はflex-flow: row;と指定した状態での揃え方です


justify-content: flex-start;

fs.png


justify-content: flex-end;

fe.png


justify-content: center;

c.png


justify-content: space-between; (要素の間をあける、端は除く)

sb.png


justify-content: space-around; (要素の間をあける)

sa.png


align-items

画像はflex-flow: row;と指定した状態での揃え方です


align-items: flex-start;

fs.png


align-items: flex-end;

fe.png


align-items: center;

c.png


align-items: baseline;

A,C,Gの高さが異なっている場合

baseline.png


align-items: stretch; (初期値)

flexアイテムをflexコンテナに合わせて引き伸ばす。


flexアイテムに高さを指定していない場合

stretch.png


flexアイテムに高さを指定した場合 (Aにheight:100px;と指定)

stretch_h.png


align-self

align-itemsを個別に指定できる

align_self.png


.flex-item:nth-child(1){
align-self: flex-start;
}

.flex-item:nth-child(2){
align-self: flex-end;
}

.flex-item:nth-child(3){
align-self: center;
}

.flex-item:nth-child(4){
align-self: baseline;
}

.flex-item:nth-child(5){
align-self: auto;
}

.flex-item:nth-child(6){
align-self: stretch;
}

.flex-item:nth-child(7){
align-self: center;
}


align-content

align-contentは複数行のFlexboxを揃えるプロパティです。

単一行のFlexboxに指定しても動きません


align-content: flex-start;

ac_fs.png


align-content: flex-end;

ac_fe.png


align-content: center;

ac_c.png


align-content: space-between; (要素の間をあける、端は除く)

ac_sb.png


align-content: space-around; (要素の間をあける)

ac_sa.png


align-content: stretch; (初期値)

ac_s.png


注意点

※flexアイテムの並べ方によって、justify-contentalign-itemsalign-selfalign-contentの方向(主軸)が変わる。

詳しくは下記参照

CSS flexible box の利用 - Web developer guide | MDN