CSSでレスポンシブのマルチカラムレイアウトを作る方法/Flexboxの使い方

CSS Flexboxはその名のとおりfrexibleにレイアウトを組むことを目的とした、比較的新しいCSSのプロパティです。本来floatは画像の横に文字を回り込ませるような目的のプロパティであり、現在ではマルチカラムレイアウトを作る際にはFlexboxやGridを使うのが主流になりつつあります。

flexboxの使い方（親要素）

flexboxは、親要素と子要素で構成されます。flexを設定した親要素は「flexコンテナ(f-container)」と呼ばれ、子要素は「flexアイテム(f-item)」と呼ばれます。
おおまかに全体の設定をflexコンテナで行い、個別の順序や設定をflexアイテムで指定していくイメージでしょうか。まずは親要素に指定できるプロパティについて見ていきます。

基本形（display:flex）

親要素のdisplayをflexにするだけで、親要素はflexコンテナとなり、その中にあるdiv要素(displayはblockのまま)は自動的にflexアイテムとなります。

<div style = "display:flex">
  <div class = "bx">box1</div>
  <div class = "bx">box2</div>
  <div class = "bx">box3</div>
</div>

上のdivにはwidthを指定しているのですが、ブラウザの幅を狭くすると横幅は自動的に画面内に収まるサイズに調整されます。デフォルトでは改行されません。

要素の並び順を設定する(flex-direction)

上から並んだ子要素を、左から右に並べるのか、右から左に並べるのかといった並び順を指定できます。

値として指定できるのは、row（左から右。デフォルト）、row-reverse（右から左）、column（上から下）、column-reverse（下から上）の四種類です。

<div style = "display:flex;flex-direction:row;">
<div>①左</div><div>②から</div><div>③右</div><p>←flex-direction:row;</p>
</div>
<div style = "display:flex;flex-direction:row-reverse;">
<div>①右</div><div>②から</div><div>③左</div><p>flex-direction:row-reverse;→</p>
</div>

要素を折り返すかどうかを設定する(flex-wrap)

flex-wrapを設定すると、画面端まで行った時の要素の挙動を指定することができます。

指定できる値は、nowrap（折り返さない。デフォルト）、wrap（折り返す）、wrap-reverse（下から上へと折り返す）の三つです。

<div style = "display:flex;flex-wrap:wrap;">
<div class = "box">①</div>
<div class = "box">②</div>
...
<div class = "box">⑩</div><p>←wrap</p>
</div>

flex-wrap:no-wrapの注意点としては、中に文字がある場合文字のサイズは小さくならないので、画面幅が狭くなると文字の幅に圧迫されて要素が画面外にはみ出すことがあります。上の例のように一列に要素を並べ過ぎると、中に文字を入れた時にレスポンシブデザインが成立しない場合がありますので、ご注意ください。

flex-directionとflex-wrapをまとめて設定(flex-flow)

上ふたつを同時に指定することが可能です。

指定できる値も同様で、デフォルトはrow nowrapとなります。値はどちらを先に書いても構いません。

<div style = "display:flex;flex-flow:row-reverse wrap-reverse;">
<div class = "box">①</div>
<div class = "box">②</div>
...
<div class = "box">⑩</div>
<p>flex-flow:row-reverse wrap-reverse→</p>
</div>

要素の横配置を設定する(justify-content)

親要素（flexコンテナ）に空きがある場合、横方向の子要素の配置をどのようにするかを設定できます。

使用できる値はflex-start（行の頭に配置。デフォルト）、flex-end（行末に配置）、center（中央に配置）、space-between（幅を最大限使って均等に配置）、space-around（余白をつけて均等に配置）の五つです。
頭と行末がちょっとわかりづらいんですが、たとえば右から左に配置（flex-direction:row-reverse;）の時は、行の中で「頭」が一番右になり、「行末」が一番左になります。

その設定で開始する最初の場所が「頭」で、最後の場所が「行末」です。従ってflex-direction:row-reverseかつjustify-content:flex-endの時は、次のようになります。

<div style = "display:flex;flex-direction:row-reverse;justify-content:flex-end;">
<div class = "box">①</div><div class = "box">②</div><div class = "box">③行末</div>
</div>

centerはわかりやすいですね。↓はflex-directionをrow（左から右へ）にしています。

残りふたつですが、space-betweenだとこうなります。

space-aroundだとこうなります。要素にそれぞれ左右にmarginがつくイメージで、要素間の余白は端っこの余白*2のサイズです。

要素の縦配置を設定する(align-items)

親要素（flexコンテナ）に空きがある場合、何を基準にして縦方向の子要素の位置を合わせるか設定できます。

使用できる値は、stretch（親要素の高さいっぱいまで広がる。デフォルト）、flex-start（縦方向の頭側に合わせる）、flex-end（縦方向の末側に合わせる）、center（中央揃え）、baseline（要素のベースラインに合わせる）の五つです。
まずstretchですが、特に指定がなければ中の要素は親要素の長さに合わせて伸縮します。flexアイテムに高さの指定がされている場合は、頭揃えになります。

上をそれぞれflex-start、flex-endにするとこうなります。それぞれ要素が上、下にはりつきます（下から上に並べる場合は逆になります）。

<div style = "display:flex;height:150px;border:1px solid grey;align-items:flex-start;">
<div class = "box">height指定なし</div>
<div class = "box" style="height:80px;">height:80px</div>
<p>align-items:flex-start</p>
</div>
<div style = "display:flex;height:200px;border:1px solid grey;align-items:flex-end;">
<div class = "box">height指定なし</div>
<div class = "box" style="height:80px;">height:80px</div>
<p>align-items:flex-end</p>
</div>

centerとbaselineは似ていますが、baselineは1行目の文字の高さの下線に高さを合わせるレイアウトです。

複数行の要素の縦配置を設定する(align-content)

justify-contentを縦にしたもので、行が複数行にまたがった際の配置を設定できます。flex-wrapがnowrap（折り返さない）の場合は無効になります。

使用できる値はstretch（親要素に合わせて縦に広がる。デフォルト）flex-start（縦方向の頭から配置）、flex-end（縦方向の末から配置）、center（中央に配置）、space-between（縦幅を最大限使って均等に配置）、space-around（余白をつけて均等に配置）の六つです。
正直align-itemsとどうちがうのかよくわからないので、比較してみました。

なぜそうなるのかの解説はできそうにないですが、挙動として上のようになりました。align-itemsのみでflex-startを指定すると改行したときに余白が空き、align-contentのみでflex-startを指定すると改行したときにサイズが変わります。flex-startにしたい場合は、両方を指定するほうがよさそうです。

centerの場合もレイアウト崩れこそしていないものの、似たようなことになります。考え方としては単行がalign-items、複数行ではalign-contentのはずですが、試した限りでは単行でもalign-contentのほうがalign-itemsより優先されるようですので、align-contentを指定した場合align-itemsはstretchか否かぐらいの考え方でもいいのかもしれません。

とりあえずalign-itemsとalign-contentの違いについてはここまでにしますが、何かわかったら追記します。他の値に関してはjustify-contentと同様なので割愛します。

flexboxの使い方（子要素）

ここからはflexアイテムに対して指定するプロパティとなります。

display:inlineの要素をレスポンシブにする（display:inline-flex）

display:inlineの要素そのものに対して、displayをinline-flexにすることでレスポンシブ対応にする（自動改行）ことが可能です。
このプロパティはflexコンテナに入れてない状態でも機能します。inline-blockとほぼ同感覚で使えますが、それがさらにレスポンシブになっている状態です。
改行はinline-flexで囲んだ範囲単位で行われます（文字列の途中で折り返さない）。

text text text text texttext text text text texttext text text text text

ulなども自動で縦にしてくれます。margin:auto;で中央揃えができなくなるというデメリットがありますが、親要素にtext-align:center;を指定することで対応可能です。

<p>
<span style = "inline-flex;">text text text text text</span>
<span style = "inline-flex;">text text text text text</span>
<span style = "inline-flex;">text text text text text</span>
</p>

flexアイテムの順番を変える(order)

記述順に関係なく、表示するflexアイテムの順序を変更することができます。

orderは整数で指定し、数の小さいものから順に表示されます。負の数を使用することも可能、数値は連続していなくても大丈夫です。デフォルトは0。

<div style = "display:flex;">
<div class = "box" style = "order:1;">1</div>
<div class = "box" style = "order:0;">2</div>
<div class = "box" style = "order:-1;">3</div>
<div class = "box" style = "order:3;">4</div>
<div class = "box" style = "order:0;">5</div>
</div>

flexアイテムの表示比率を指定する(flex-grow)

親要素に空きスペースがある場合、どれぐらいの比率で空間を埋めるかを指定します。

値は数値で指定し、負の数は無効ですが、小数点は使えます。デフォルトは0。

<div style = "display:flex;">
<div class = "box" style = "flex-grow:1;">1</div>
<div class = "box" style = "flex-grow:0;">0</div>
<div class = "box" style = "flex-grow:3;">3</div>
</div>

上はstretchの場合ですが、高さを指定していても有効です。

枠に余裕がない場合は無効になります。

flexアイテムの縮小比率を指定する(flex-shrink)

こちらは逆に親要素がもういっぱいで子要素が入りきらない場合、どれぐらいの比率で要素を小さくするかを指定します。

同じく値は小数点を含む数値で指定し、負の数は無効です。デフォルトは0で、この場合は元のサイズを維持します。
shrinkを指定しても、親要素いっぱいに広がらなければ何も起こりません。

こちらではwidthを全て300pxに指定しています。flex-shrinkが0の要素は、どれだけ幅が狭くなってもサイズが変更されません。

<div style = "display:flex;">
<div class = "box" style = "flex-shrink:3; width:300px;">3</div>
<div class = "box" style = "flex-shrink:1; width:300px;">1</div>
<div class = "box" style = "flex-shrink:0.1; width:300px;">0.1</div>
<div class = "box" style = "flex-shrink:3; width:300px;">3</div>
</div>

flexをwrapにした場合は普通に改行されますが、縦方向に対しては無効です。

flexアイテムのサイズを指定する(flex-basis)

widthと同じように、pxや%でサイズを指定します。%の場合は親要素に対しての比率となります。デフォルト値はautoで、元のサイズが適用されます。

flex-grow、flex-shrink、flex-basisをまとめて指定する(flex)

3つの値を同時に設定できるショートハンドです。デフォルトは0 1 autoとなります。

要素の縦配置を設定する(align-self)

親要素（flexコンテナ）に空きがある場合の縦方向の配置方法を設定できます。align-itemsと同じ機能ですが、両方設定された場合にはalign-selfが優先され、個別の設定が可能となっています。

デフォルトはautoで、align-itemsの値を引き継ぎます。それ以外はstretch（親要素の高さいっぱいまで広がる）、flex-start（縦方向の頭側に合わせる）、flex-end（縦方向の末側に合わせる）、center（中央揃え）、baseline（要素のベースラインに合わせる）となります。

<div style = "display:flex;align-items:flex-end;height:200px;border:1px solid grey;">
<div class = "box"">指定なし</div>
<div class = "box" style = "align-self:flex-start;">align-self:flex-start</div>
<div class = "box">指定なし</div>
</div>

CSSの便利な使い方・プロパティ逆引きリファレンス

HTMLと合わせてぜひマスターしたい、CSS関連の記事のまとめとなります。プロパティの名称と使用用途を合わせて併記しています。 ちょっととっても数少ないですが、段々増える予定です。

sunagitsune.com

2019.01.27