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

Flexbox【第3回】flex-wrapとalign-contentで複数行レイアウト

web制作

【Flexbox】flex-wrapとalign-contentで複数行レイアウト

さて、前回まではflex-directionで配置方向、justify-contentalign-itemsの各プロパティで揃えや配置を指定してきました。これだけでも簡単なレイアウトは出来たりするのですが、今回は複数行に対応するプロパティをご紹介します。

flex-wrapで複数行に対応しよう

flexboxは、複数のFlexboxアイテムを1行の中でレイアウトすることを考えて作られました。そのためFlexboxアイテムの幅がFlexboxコンテナーの幅を超えても折り返されることはありません。これはアイテムをwrapするプロパティであるflex-wrapが初期値であるno-wrapの値になっているためです。複数行にするにはflex-wrapプロパティの値を変えなければなりません。ということでflex-wrapのそれぞれのプロパティ値をみてみましょう。

nowrap(初期値)

Flexboxアイテムは折り返されず一行に配置され、flexコンテナの幅に収まるよう縮小されます。

.flex-container {
  display: flex;
  flex-wrap: no-wrap;
}

See the Pen flex-wrap-no-wrap by ossan (@g3) on CodePen.

wrap

flexコンテナの幅を超えるとFlexboxアイテムは複数行に折り返されます。

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

See the Pen flex-wrap-wrap by ossan (@g3) on CodePen.

wrap-reverse

複数行になり、下から始まります。

.flex-container {
  display: flex;
  flex-wrap: wrap-reverse;
}

See the Pen flex-wrap-wrap-reverse by ossan (@g3) on CodePen.

ここまでのプロパティで複数行のレイアウトに対応できるようになったので、試しに上下センターに配置してみましょう。前回取り上げたalign-itemscenterに指定してみます。

See the Pen flex-ex by ossan (@g3) on CodePen.

行間が空いていて何か思っていたレイアウトと違います・・・。
複数行の場合は、align-itemsではなく次にご紹介するalign-contentを用いるとうまくいきます。

複数行の場合はalign-contentで指定しよう

このプロパティはflex-wrapがnowrapの場合、適用されませんので注意です。もちろんFlexboxコンテナーの高さも必要になります。取りうる値はjustify-contentの値にstretchを加えたものと考えれば覚えやすいかもしれません。それでは、それぞれのプロパティ値をみてみましょう。

stretch(初期値)

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

.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
}

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

flex-start

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

.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

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

flex-end

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

.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
}

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

center

中央に揃えます。上記の例でalign-itemsとの違いに注目です。

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

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

space-between

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

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

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

space-around

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

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

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

ここまででFlexboxコンテナーのプロパティは終了です。次回はFlexboxアイテムのプロパティをみていきましょう。