きまぐれ引きこもりんご80%

Flexbox【第2回】justify-contentとalign-itemsで楽々レイアウト

web制作

【Flexbox】justify-contentとalign-items

前回はflex-directionでFlexboxアイテムの配置方向を指定しました。
では、縦横中央揃え、等間隔などの揃えや配置はどうしたらいいのでしょうか?
実は前回の最後にご紹介した方法でFlexboxアイテムに直接margin: auto;を設定しても縦横中央揃えや等間隔配置は実現できるのですが、もちろん、それよりも簡単に設定できるFlexboxのプロパティがあります。
それがjustify-contentalign-itemsです。

justify-contentで横方向のレイアウトを指定しよう

justify-contentflex-directionで指定した方向に対してのレイアウトを指定できます。
それでは各プロパティ値を見ていきましょう。

flex-start(初期値)

flex-directionで指定した方向の始めから配列します。

.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

See the Pen justify-content-start by ossan (@g3) on CodePen.

flex-end

flex-directionで指定した方向の終わりから配列します。

.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

See the Pen justify-content-end by ossan (@g3) on CodePen.

center

中央に揃えます。

.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

See the Pen justify-content-center by ossan (@g3) on CodePen.

space-between

隣り合うFlexboxアイテムの間隔を等しく配列します。

.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

See the Pen justify-content-between by ossan (@g3) on CodePen.

space-around

全てのFlexboxアイテムの左右に等しく間隔をあけます。

.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

See the Pen justify-content-around by ossan (@g3) on CodePen.

align-itemsで垂直方向のレイアウトを指定しよう

align-itemsflex-directionで指定した方向に対して垂直方向の揃えを指定できます。
Flexboxコンテナーに高さの指定をしないと有効にならない点に注意です。
それでは各プロパティ値を見ていきましょう。

stretch(初期値)

Flexboxコンテナーの高さいっぱいに広がります。

.flex-container {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  height: 200px;
}

See the Pen align-items-stretch by ossan (@g3) on CodePen.

flex-start

flex-directionで指定した垂直方向の始めから配列します。

.flex-container {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

See the Pen align-items-start by ossan (@g3) on CodePen.

flex-end

flex-directionで指定した垂直方向の終わりから配列します。

.flex-container {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}

See the Pen align-items-end by ossan (@g3) on CodePen.

center

中央に揃えます。

.flex-container {
  display: flex;
  flex-direction: row;
  align-items: center;
}

See the Pen align-items-center by ossan (@g3) on CodePen.

baseline

Flexboxアイテムのベースラインに揃えます。

.flex-container {
  display: flex;
  flex-direction: row;
  align-items: baseline;
}

See the Pen align-items-baseline by ossan (@g3) on CodePen.

floatでは苦労していた配置もflex-directionalign-itemsを使うと縦横のレイアウトも簡単に出来ますね。