CSS「display:flex」横並びレイアウトが簡単、flexboxの使い方

記事内に広告を含みます

この記事には広告を含む場合があります。

記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。

floatはもう使わない！？　横並びレイアウトのアレンジが容易に可能、レスポンシブデザインも容易なCSS3のflexbox（フレキシブルボックスレイアウト）の使い方、設定方法についてコンテナ、アイテムで指定できるプロパティを実例と一緒に紹介。

1）flexboxの使い方
- flexboxの設定方法
2）コンテナで指定できるプロパティ
3）アイテムで指定できるプロパティ
4)display:flexを使った横並びアレンジ
- 4つのアイテムを横に並べる
- 4つのアイテムを二行で並びをアレンジ

1）flexboxの使い方

以前は横並びのレイアウトデザインには嫌悪感を持っていましたが、displayプロパティの「flexbox（フレキシブルボックスレイアウト）」や「grid（グリッドレイアウト）」により、レスポンシブに対応した横並びのデザインの自由度が上がり、設定も容易になり、苦手意識も解消。ということで、ここではflexboxについて詳しく案内いたします。

flexboxとは「Flexible Box Layout Module（フレキシブルボックスレイアウトモジュール）」のことで、CSS3から追加された機能です。Displayプロパティを「flex」と指定すると、インナーディスプレイタイプがフレキシブルボックスレイアウトモードになり、子要素が並べて表示（横並び）されます。子要素は中身に合わせた横幅になります。ただし、フレキシブルボックスレイアウトにはボックス間にギャップ（余白）を入れる機能が用意されていないため、マージンなどを利用して余白を入れる必要があります。
なお、基本的にどのブラウザでも最新版のブラウザは対応しているようですが、IE11のフレックスボックスの実装にはバグが多いということには注意したい。またIE10やその他古いブラウザではベンダープレフィックスが必要な場合もあります。対応ブラウザーは　Can I useをご覧ください。

flexboxの設定方法

flexの設定なし

それではflexboxの使い方を案内します。flexboxはコンテナ（親要素）とアイテム（子要素）によって構成されます。ここではコンテナ名を「container」、アイテム名を「item」としています。もちろん、任意の名前ですので自分が後から見てもわかりやすい名前にしておくのが良いでしょう。まずは「flexの設定なし」で場合です。４つのアイテム（子要素）を表示させていますが、縦並びで表示されます。

See the Pen
flex-direction-column by Sunny K (@SUNNY-K)
on CodePen.

flexの設定あり「display:flex」

フレキシブルボックスレイアウトで4つの要素を横一列に並べます。設定は簡単！CSSに「display:flex」を入れるだけ。

See the Pen
flex-design1 by Sunny K (@SUNNY-K)
on CodePen.

2）コンテナで指定できるプロパティ

次にコンテナ（親要素）で設定できるプロパティについて紹介します。

アイテムの配置・並び順「flex-direction」

これを指定をすることでアイテム（子要素）が並ぶ方向・起点が設定されます。rowで左右、directionで上下の並びを変えることができます。

flex-direction：row　（デフォルト）

アイテム（子要素）を左から右へ順番に表示。この時、コンテナの左端が起点になります。なお、この設定は「設定なし（デフォルト）」の同じことなので、これを記述しても上の「display:flex」のみ設定したものと結果は同じです。

See the Pen
flex-direction-column by Sunny K (@SUNNY-K)
on CodePen.

flex-direction：row-reverse

アイテム（子要素）を右から左へ順番に表示。この時、コンテナの右端を起点になりますのでブロック（親要素）に余白がある場合には右詰めで表示されます。こちらの例も余白がり、右端を起点に表示されているのがわかると思います。

See the Pen
fflex-direction-row by Sunny K (@SUNNY-K)
on CodePen.

flex-direction: column

アイテム（子要素）を上から下に順に表示。この時、コンテナの上端が起点になります。なお、「display:flex」指定していない場合と結果は同じになります。

See the Pen
fflex-direction-row by Sunny K (@SUNNY-K)
on CodePen.

flex-direction: column-reverse

アイテム（子要素）を下から上に順に表示されます。この時、コンテナの下端が起点になります。

See the Pen
flex-direction-column by Sunny K (@SUNNY-K)
on CodePen.

アイテムのの折り返し「flex-wrap」

アイテム（子要素）の折り返しとその方向を指定できます。

flex-wrap: nowrap（デフォルト）

アイテム（子要素）を折り返さず、1行に収めます。この設定はデフォルト（設定なしと同じ）です。

See the Pen
flex-direction-column-reverse by Sunny K (@SUNNY-K)
on CodePen.

flex-wrap: wrap

アイテム（子要素）がコンテナ（親要素）に収まらない場合に折り返します。

See the Pen
flex-wrap-nowrap by Sunny K (@SUNNY-K)
on CodePen.

flex-wrap: wrap-reverse

アイテム（子要素）がコンテナ（親要素）に収まらない場合に折り返しますが、wrapとは逆方向の折り返しとなります。

See the Pen
flex-wrap-wrap by Sunny K (@SUNNY-K)
on CodePen.

アイテムの横方向の揃え方を指定「justify-content」

コンテナ（親要素）に余白がある場合に、「左」「右」「中央」の横方向の配置や揃え方の指定ができます。

justify-content: flex-start（ディフォルト）

アイテム（子要素）を左端寄せで揃えて配置します。この設定はデフォルト（設定なしと同じ）です。

See the Pen
flex-wrap-wrap-reverse by Sunny K (@SUNNY-K)
on CodePen.

justify-content: flex-end

アイテム（子要素）を右端寄せで揃えて配置します。

See the Pen
justify-content-flex-start by Sunny K (@SUNNY-K)
on CodePen.

justify-content: center

アイテム（子要素）を中央寄せで揃えて配置します。

See the Pen
justify-content-flex-end by Sunny K (@SUNNY-K)
on CodePen.

justify-content: space-between

アイテム（子要素）をコンテナ（親要素）内で等間隔で配置します。この時、両端のアイテムはコンテナの端に揃えて配置されます。

See the Pen
justify-content-center by Sunny K (@SUNNY-K)
on CodePen.

justify-content: space-around

アイテム（子要素）をコンテナ（親要素）内で等間隔で配置します。この時、両端のアイテムも全て均等に配置されます。

See the Pen
justify-content-space-between by Sunny K (@SUNNY-K)
on CodePen.

アイテムの縦方向の揃え方を指定「align-items」

コンテナ（親要素）に余白がある場合に「上」「下」の縦方向の配置や揃え方を指定できます。

align-items: stretch（ディフォルト）

アイテム（子要素）の内容量に関係なくコンテナ（親要素）高さいっぱいに揃えて表示します。この設定はデフォルト（設定なしと同じ）です。

See the Pen
justify-content-space-around by Sunny K (@SUNNY-K)
on CodePen.

align-items: flex-start

コンテナ（親要素）上の位置を基準にアイテム（子要素）の内容にあわせ、ばらばらの高さで表示されます。 float: leftと同じ結果になる。

See the Pen
flex-align-items-stretch by Sunny K (@SUNNY-K)
on CodePen.

align-items: flex-end

コンテナ（親要素）下の位置を基準にアイテム（子要素）の内容にあわせ、ばらばらの高さで表示されます。

See the Pen
flex-align-items-flex-start by Sunny K (@SUNNY-K)
on CodePen.

align-items: center

コンテナ（親要素）上下の高さのセンター位置を基準にし、アイテム（子要素）の内容にあわせ、ばらばらの高さで表示されます。

See the Pen
flex-align-items-flex-end by Sunny K (@SUNNY-K)
on CodePen.

アイテムが複数行の場合の縦方向を指定「align-content」

コンテナ（親要素）に余白がある場合に「上」「下」の縦方向の配置・揃え方を指定できます。なお、「align-content」はアイテム全体に対して指定でき、アイテム（子要素）が複数行の場合、つまり折り返し指定「flex-wrap:がwrapまたはwrap-reverseである場合」のみ有効となります。　ここでは「flex-wrap:wrap」を指定しています。

align-items: stretch（ディフォルト）

アイテム（子要素）はコンテナ（親要素）の高さいっぱい伸び、揃えて表示します。この設定はデフォルト（設定なしと同じ）です。この例では一行目と二行目のアイテムの高さに違いがあるように見えますが、テキスト以下の高さだけで見れば全て均等になっていることがわかります。

See the Pen
flex-wrap-nowrap by Sunny K (@SUNNY-K)
on CodePen.

align-content: flex-start

アイテム（子要素）は、それぞれの行の一番高さの高い要素に揃えて表示します。この例では一行目は「3番目の要素」が高さが一番高いので、これに揃えて表示されているのがわかります。二行目は全て同じ高さですので一行目とは異なる高さで表示されています。

See the Pen
flex-align-content: stretch by Sunny K (@SUNNY-K)
on CodePen.

align-content: flex-end

コンテナ（親要素）下の位置を基準に表示、アイテム（子要素）の表示はalign-content: flex-startと同じ。

See the Pen
flex-align-content-flex-start by Sunny K (@SUNNY-K)
on CodePen.

align-content:center

コンテナ（親要素）の中心を基準（縦方向のセンター位置）に表示、アイテム（子要素）の表示はalign-content: flex-startと同じ。

See the Pen
flex-align-content-flex-end by Sunny K (@SUNNY-K)
on CodePen.

align-content: space-between

コンテナ（親要素）高さの合わせ、行が垂直に等間隔で並び表示。アイテム（子要素）の表示はalign-content: flex-startと同じ。

See the Pen
flex-align-content-center by Sunny K (@SUNNY-K)
on CodePen.

align-content: space-around

コンテナ（親要素）高さの合わせ、上下の余白も入り等間隔で表示。アイテム（子要素）の表示はalign-content: flex-startと同じ。

See the Pen
flex-align-content-space-between by Sunny K (@SUNNY-K)
on CodePen.

3）アイテムで指定できるプロパティ

次にアイテム（子要素）で設定できるプロパティについて紹介します。レスポンシブデザインなどブラウザーのサイズに合わせ各要素のサイズバランスに注視しつつ自在に調整したい場合などにも活用できそうです。

アイテムの並び順を変える「order」

通常、htmlで記述した順番通りに結果も表示されますが、htmlの記述順に影響されずorderで並び順を変えることができます。
以下の例はhtmlでは「1番目の要素→2番目の要素→3番目の要素→4番目の要素」の順に記述。これをorderで「2番目の要素→1番目の要素→3番目の要素→4番目の要素」に並び順を変えてます。

See the Pen
flex-grow by Sunny K (@SUNNY-K)
on CodePen.

アイテムの伸び率の比率を指定できる「flex-grow」

コンテナ（親要素）の幅に余白がある場合にアイテム（子要素）の伸び率の比率を設定できます。相対値（整数）で指定でき、値が大きくなるほど、伸び率が上がります。なお、指定なしの場合（デフォルト値）は0となります。

まずは、伸び率を未設定の場合。

See the Pen
flex-grow by Sunny K (@SUNNY-K)
on CodePen.

比率を割り当てていきます。以下の例では「1番目の要素」に伸び率「1」、他はデフォルト「0」に設定。レスポンシブデザインなどブラウザーのサイズに合わせ各要素のサイズバランスに注視しつつ自在に調整したい場合などに活用できそうです。

See the Pen
by Sunny K (@SUNNY-K)
on CodePen.

以下の例では「1番目の要素」に伸び率「4」、「2番目の要素」に伸び率「2」、「3番目の要素」に伸び率はデフォルト「0」に設定。

See the Pen
flex-order by Sunny K (@SUNNY-K)
on CodePen.

アイテムの縮み率の比率を指定できる「flex-shrink」

コンテナ（親要素）の幅よりアイテム（子要素）の幅が大きい場合に縮み率の比率を設定できます。相対値（整数）で指定でき、値が大きくなるほど縮みます（縮み率が上がる）。なお、指定なしの場合（デフォルト値）は0となります。「flex-wrap: nowrap」の折り返しなし（デフォルト）設定時に有効。

以下の例では「1番目の要素」に縮み率「0（デフォルト）」、「2番目の要素」に縮み率「2」、「3番目の要素」に縮み率「1」に設定。なお。アイテム（子要素）にwidthにてコンテナ（親要素）の幅より大きくなるように設定してますが、この「flex-shrink」の縮み率で、コンテナ（親要素）の幅に収まるように調整されます。「flex-wrap: nowrap」を指定しないと縮み率の設定は有効とならず改行されるだけになります。

See the Pen
flex-basis2 by Sunny K (@SUNNY-K)
on CodePen.

アイテムの基本幅を指定できる「flex-basis」

[%][px]で指定します。アイテム（子要素）の幅がコンテナ（親要素）より大きくなっても横並びをキープするために自動幅調整してくれます。

「flex-basis: ○○%;」で指定

以下の例では「1番目の要素」に50%、「2番目の要素」に30%、「3番目の要素」に20%を設定。

See the Pen
flex-grow2 by Sunny K (@SUNNY-K)
on CodePen.

「flex-basis: ○○px;」で指定

以下の例では「1番目の要素」に600px、「2番目の要素」に400px、「3番目の要素」に400pxを設定。コンテナ（親要素）の幅からは完全にオーバーしていますが、折り返しされることも、コンテナをオーバーすることもなく、オートでコンテナ（親要素）内に収まるように調整されます。

See the Pen
flex-basis by Sunny K (@SUNNY-K)
on CodePen.

4)display:flexを使った横並びアレンジ

display:flexを使って、実用的に使いそうな横並びの例を参考までに作ってみました。以下の４パターンはすべて　「display:flex」の設定のみ使用。
横幅は「width: fit-content」を設定しています。ブロック要素の幅を中身に合わせる設定ですが、詳しくはブロック要素の横幅を内容・中身に合わせる2つの方法CSSをご覧ください。