CSSのflexbox(display:flex;)を使った縦並び、横並びレイアウトの基礎知識

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

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

flexboxで縦並び

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

縦並びにするためのCSS

.wrap {
  display:flex;
  flex-flow: column;
}

flexboxで縦横央寄せ

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

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

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

.wrap {
  display:flex;
  align-items: center;
  justify-content: center;
}

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

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

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

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

.wrap {
  display:flex;
  flex-flow: column;
  justify-content:space-between;
}

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

.wrap {
  display:flex;
  flex-flow: column;
  justify-content:space-around;
}

flexboxで縦並びの下寄せ

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

.wrap {
  display:flex;
  justify-content:flex-end;
  flex-flow: column;
}

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

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

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

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

.wrap {
  display:flex;
  justify-content:space-between;
}

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

.wrap {
  display:flex;
  justify-content:space-around;
}

flexboxで横並びの右寄せ

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

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

.wrap {
  display:flex;
  justify-content:flex-end;
}

CSSの学習におすすめの書籍

Webデザインの新しい教科書 改訂3版 基礎から覚える、深く理解できる。 〈Flexbox、CSS Grid、レスポンシブ〉