横並びのデザインをもっと自由に！フレックスボックスレイアウト

子要素のレイアウトを指定する

ナビゲーションメニューやページネーション、並列のレイアウト等に欠かせないフレックスボックスレイアウトについてまとめてみました！

横の配置をデザインする「justify-content」

親要素にdisplay:flex;（インライン要素ならdisplay:inline-flex;）を設定すると子要素が横に並びます。デフォルトは左揃えです。

左揃え　flex-start

• A
• B
• C
• D
• E
• F

親要素{
display:flex;
justify-content: flex-start;
}

 

右揃え　flex-end

• A
• B
• C
• D
• E
• F

親要素{
display:flex;
justify-content:flex-end;
}

 

センター揃え　center

• A
• B
• C
• D
• E
• F

親要素{
display:flex;
justify-content: center;
}

 

等間隔　space-between

• A
• B
• C
• D
• E
• F

親要素{
display:flex;
justify-content: space-between;
}

 

等間隔　space-around

端の要素の外側にも余白が入るのがspace-betweenとの違いです。

• A
• B
• C
• D
• E
• F

親要素{
display:flex;
justify-content: space-around;
}

 

改行　flex-wrap: wrap;

• A
• B
• C
• D
• E
• F

例）
親要素{
display:flex;
flex-wrap: wrap;
}
子要素{width:33.333%;}

 

最初の要素だけ左揃え、その他は右揃えにしたい

• A
• B
• C
• D
• E
• F

親要素{
display:flex;
justify-content: flex-end;
}
子要素:first-child{margin-right: auto;}

 

並び順を指定する「flex-direction」

左右方向を決められます。初期値は「flex-direction: row;」で左から順番に並びます。
パソコンでは左に配置したいけど、スマホでは一番下にしたい…等に対応できて便利！

逆方向　row-reverse

• A
• B
• C
• D
• E
• F

親要素{
display:flex;
flex-direction: row-reverse;
}

 

縦並び

• A
• B
• C
• D
• E
• F

親要素{
display:flex;
flex-direction:column;
}

 

逆方向の縦並び

• A
• B
• C
• D
• E
• F

親要素{
display:flex;
flex-direction:column-reverse;
}

 

一行の縦の配置をデザインする「align-items」

縦方向の位置を設定できます。初期値は上揃えです。

上揃え　flex-start

• A
• B
• C
• D
• E
• F

親要素{
display:flex;
align-items: flex-start;
}

 

下揃え　flex-end

• A
• B
• C
• D
• E
• F

親要素{
display:flex;
align-items: flex-end;
}

 

上下センター揃え　center

• A
• B
• C
• D
• E
• F

親要素{
display:flex;
align-items: center;
}

 

親要素の高さいっっぱいに　stretch

• A
• B
• C
• D
• E
• F

親要素{
display:flex;
align-items: stretch;
}
子要素{height:auto;}

 

複数行の縦の配置をデザインする「align-content」

複数行の上揃え　flex-start

• A
• B
• C
• D
• E
• F

例）
親要素{
display:flex;
flex-wrap: wrap;
align-content:flex-start;
}
子要素{width:33.333%;}

 

複数行の下揃え　flex-end

• A
• B
• C
• D
• E
• F

例）
親要素{
display:flex;
flex-wrap: wrap;
align-content:flex-end;
}
子要素{width:33.333%;}

 

 

複数行の上下センター揃え　center

• A
• B
• C
• D
• E
• F

例）
親要素{
display:flex;
flex-wrap: wrap;
align-content:center;
}
子要素{width:33.333%;}