この記事には広告を含む場合があります。
記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。
floatはもう使わない！？ 横並びレイアウトのアレンジが容易に可能、レスポンシブデザインも容易なCSS3のflexbox（フレキシブルボックスレイアウト）の使い方、設定方法についてコンテナ、アイテムで指定できるプロパティを実例と一緒に紹介。
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をご覧ください。
4つのアイテムを横に並べる
これは、冒頭の説明にある「display:flex」を設定し、4つのアイテム（子要素）を横に並べただけです。これをベースに、この後並びを変えていきます。
See the Pen
flex-align-content-space-around by Sunny K (@SUNNY-K)
on CodePen.
4つのアイテムを二行で並びをアレンジ
「1番目の要素」「2番目の要素」を一列目、「3番目の要素」「4番目の要素」を2行に並べる。なおこの設定は、「flex-wrap: wrap」を使った折り返し設定ではありません。
See the Pen
flex-design1 by Sunny K (@SUNNY-K)
on CodePen.
「1番目の要素」を一行目、「2番目の要素」「3番目の要素」「4番目の要素」を二行目に並べる。
See the Pen
flex-design2 by Sunny K (@SUNNY-K)
on CodePen.
「1番目の要素」を一、二行目に、「2番目の要素」を一行目の右側に、「3番目の要素」「4番目の要素」を二行目の右側に並べる。
See the Pen
flex-design3 by Sunny K (@SUNNY-K)
on CodePen.
