flexbox応用編！要素の配置を自在に動かす

この記事では、flexboxのより便利な使い方についてまとめます。

flexboxについて

flexboxは要素を横並びにしたいときに活躍する概念です。横並びにしたい要素の親要素のdisplayプロパティをflexにすることで、子要素が横並びになります。横並びになった要素を自在に配置するための方法を紹介します。

ちなみに、以前はfloatを用いることが多かったそうですが、最近ではflexboxを使うことが一般的みたいです。

まずは親要素に「display: flex;」を与えることで横並びになることの確認です。

<div class="wrapper">
    <div class="content">1</div>
    <div class="content">2</div>
    <div class="content">3</div>
    <div class="content">4</div>
    <div class="content">5</div>
    <div class="content">6</div>
    <div class="content">7</div>
    <div class="content">8</div>
</div>

.wrapper {
  display: flex;
}

justify-content

justify-contentプロパティでは、横方向の配置を変更できます。justify-contentには次のような値を指定できます。

flex-start  (左に詰める、デフォルト)
center  (中央に集める)
flex-end  (右に詰める)
space-between  (両端に寄せて、残りは均等に配置)
space-around  (全ての要素を均等に配置)

flex-start

要素を左に詰めます。デフォルトの状態です。

center

要素を中央に集めます。

.wrapper {
  display: flex;
  justify-content: center;
}

flex-end

要素を右に詰めます。

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

space-between

最初と最後の要素を両端に寄せ、残りの要素を均等な幅で配置します。

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

space-around

両端の要素を含め全ての要素を均等な幅で配置します。

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

align-items

align-itemsは垂直方向の配置を変更します。align-itemsには次のような値を指定できます。

flex-start  (上に詰める、デフォルト)
center  (中央に配置)
flex-end　(右に詰める)
stretch　(引き伸ばして全体に広げる)
baseline　(ベースラインに合わせる)

flex-start

上に詰めます。デフォルトの状態です。

center

中央に配置します。

.wrapper {
  display: flex;
  align-items: center;
}

flex-end

下に詰めます。

.wrapper {
  display: flex;
  align-items: flex-end;
}

stretch

要素を引き伸ばして全体に広げます。ただし、子要素で大きさを指定している場合はそちらが優先されます。

.wrapper {
  display: flex;
  align-items: stretch;
}

baseline

ベースラインが一直線になるように配置します。以下の例では少しわかりづらいですが、数字の下の端が同じ高さになっています。

.wrapper {
  display: flex;
  align-items: baseline;
}

flex-direction

flex-directionでは、要素の並ぶ向きを指定できます。以下の値をとります。

row　(左から右へ、デフォルト)
row-reverse　(右から左へ)
column　(上から下へ)
column-reverse　(下から上へ)

row

要素を左から右へ並べます。デフォルトの状態です。

row-reverse

rowとは逆に、右から左へ並べます。

.wrapper {
  display: flex;
  flex-direction: row-reverse;
}

column

要素を上から下へ並べます。

.wrapper {
  display: flex;
  flex-direction: column;
}

column-reverse

要素をしたから上へ並べます。

.wrapper {
  display: flex;
  flex-direction: column-reverse;
}

※flex-direction: columnの時のalign-itemsやjustify-content

flex-directionをcolumnにすると要素の配列の向きが横方向から縦方向に変わります。この時、align-itemsやjustify-contentで決められる配置の向きも変わるので気をつけましょう。

例えばalign-itemsは、配列の向きに対して垂直方向の配置を指定します。なので配列が縦になった時は横方向の配置を変更します。

.wrapper {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
}

flex-wrap

flex-wrapプロパティを指定すると、要素を折り返して配置できます。以下の値をとります。

nowrap　(１列に並べる、デフォルト)
wrap　(折り返して配置する)
wrap-reverse　(折り返し、ただし下の列から並べる)

nowrap

折り返さずに１列に並べます。デフォルトの状態です。

wrap

要素を折り返して並べます。

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

wrap-reverse

折り返して並べます。ただし、下から順に並べます。

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

※flex-wrapを使うときの親要素の幅

flex-wrapは親要素の幅に対して入りきらない分が折り返されるので、均等に２列に分かれるわけではないです。均等に分けるには子要素の大きさを工夫したりする必要があります。

例えば親要素の幅が中途半端だと、一つだけ下に行ったりします。

flex-flow

flex-flowはflex-wrapとflex-directionをまとめて記述できるプロパティです。flex-flow: column wrap;のように書きます。

まとめ

• justify-contentは要素の横の配置を変更できる
• align-itemsは要素の縦の配置を変更できる
• flex-directionは要素の並ぶ向きを変更できる
• flex-wrapは要素を折り返して配置できる
• flex-flowはflex-directionとflex-wrapをまとめて記述できる