CSS flexbox(display:flex;)を使った縦並び、横並びレイアウトの方法まとめ

display:flex;を使ったレイアウト方法をまとめました。
上下左右のレイアウトに柔軟に対応できるので、レスポンシブやグリットレイアウトに役立ちます。

より複雑なレイアウトを行いたい場合は、こちらの記事をご覧ください。
display:grid; を使ってCSSのみでタイルレイアウトを実装する

flexboxで縦並び

複数のカラムを縦並びにしたい時の方法です。

縦並びにするためのCSS

flex-flow: column;縦並び
.wrap {
  display:flex;
  flex-flow: column;
}

flexboxで縦横央寄せ

1つのカラムを上下左右中央寄せにしたい時の方法です。

See the Pen flexboxで上下中央寄せ by ponzu (@ponzu) on CodePen.

縦横中央寄せにするためのCSS

align-items: center;上下中央寄せ
justify-content: center;左右中央寄せ
.wrap {
  display:flex;
  align-items: center;
  justify-content: center;
}

flexboxで縦並びの両端揃え・均等揃え

縦並びにした時、最初と最後のカラムを上下ぴったりに合わせる方法と、両側にカラムの半分の大きさのマージンを設ける方法です。

See the Pen flexboxで両端揃え・均等揃え(縦) by ponzu (@ponzu) on CodePen.

縦並びで両端揃えにするためのCSS

flex-flow:column;縦方向に配置
justify-content:space-between;両端に合わせて均等間隔に配置
.wrap {
  display:flex;
  flex-flow: column;
  justify-content:space-between;
}

縦並びで均等配置にするためのCSS

flex-flow: column;縦方向に配置
justify-content:space-around;両端に余白を入れて均等間隔に配置
.wrap {
  display:flex;
  flex-flow: column;
  justify-content:space-around;
}

flexboxで縦並びの下寄せ

See the Pen flexboxで下寄せ by ponzu (@ponzu) on CodePen.

flex-flow: column;縦方向に配置
justify-content:flex-end;縦並びの場合は下寄せで配置
.wrap {
  display:flex;
  justify-content:flex-end;
  flex-flow: column;
}

flexboxで横並びの両端揃え・均等揃え

横並びにした時、最初と最後のカラムを左右ぴったりに合わせる方法と、両側にカラムの半分の大きさのマージンを設ける方法です。

See the Pen flexboxで両端揃え・均等揃え(横) by ponzu (@ponzu) on CodePen.

横並びで両端揃えにするためのCSS

justify-content:space-between;両端に合わせて均等間隔に配置
.wrap {
  display:flex;
  justify-content:space-between;
}

横並びで均等配置にするためのCSS

justify-content:space-around;両端に余白を入れて均等間隔に配置
.wrap {
  display:flex;
  justify-content:space-around;
}

flexboxで横並びの右寄せ

カラムを右端に寄せる方法です。

See the Pen flexboxで右寄せ by ponzu (@ponzu) on CodePen.

justify-content:flex-end;横並びの場合は右寄せで配置
.wrap {
  display:flex;
  justify-content:flex-end;
}