【Flexbox】簡単なCSSで複数列でも均等かつ左寄せにレイアウトする方法

  • 2019.01.29
  • CSS
【Flexbox】簡単なCSSで複数列でも均等かつ左寄せにレイアウトする方法

今回はFlexboxを使った複数列・複数行のレイアウトでも綺麗に均等かつ左寄せでレイアウトする方法を見ていきましょう。レスポンシブデザインにも対応可能です。

Flexboxで左右のレイアウトを整えるプロパティと言えばjustify-contentですね。まずはこのjustify-contentのよく使う値の意味を簡単に見てみましょう。

justify-contentの値を復習

center フレックスアイテムをフレックスコンテナの中央に寄せて配置する

flex-start フレックスアイテムをフレックスコンテナの左寄せで配置する

flex-end フレックスアイテムをフレックスコンテナの右寄せで配置する

space-between フレックスコンテナの両端からフレックスアイテムを均等に配置する

space-aroud フレックスコンテナ内でフレックスアイテムを均等に配置する

均等にレイアウトしたいのならjustify-content:space-betweenを使えばいいのでは?

今回作りたいのはflex-wrapを使って列が複数になった時、最後の行まで左寄せに綺麗にレイアウトすることです。

1行であればjustify-contentプロパティにspace-betweenかspace-aroudを使って均等に綺麗にレイアウトすることができますが、複数行でspace-betweenを使ってみるとこうなります。

10

11

12

13

14

15

16

均等には配置されていますが最後の行が左寄せになっていませんね。

最後の行まで左寄せにしたいのでこれではダメです。

じゃあjustify-content:flex-startを使えばいいのでは?

左寄せにするにはjustify-contentプロパティにflex-startという値を使うと先ほど説明しました。

普通にflex-startを使うとこうなります。

10

11

12

13

14

15

16

惜しい感じにはなりましたが、フレックスアイテムの集合がフレックスコンテナの中心にきていません。。

フレックスコンテナの右側に微妙な空白ができてしまっているのでこれでは美しく無いですね。

Flexboxを使って均等かつ左寄せに美しくレイアウトする方法

Flexboxで均等かつ左寄せにレイアウトするには擬似要素(beforeやafter)を使って架空のフレックスアイテムを作成する方法などが紹介されているのを目にしましたが、それではレスポンシブデザインでうまく機能しないですし、作り方的にも綺麗では無い気がします。

私はjustify-content:flex-startを使いmarginとwidthを調整してレイアウトすることをオススメします。

まず初めに、フレックスコンテナに「justify-content:flex-start」「flex-wrap:wrap」を指定してください。

それから、まずは一行にいくつのフレックスアイテムを配置するかを決めます。
ここでは「一行のフレックスアイテムを5個」としてみます。

次にフレックスコンテナ一つ一つのwidthを%表記で決めます。
ここでは「一つのフレックスコンテナの横幅を15%」としてみます。

最後にmargin幅を調整します。「margin-left」と「margin-right」を%表記で残った横幅から均等に割れば、綺麗に配置されるようになります。

この場合でしたら、
15%(フレックスコンテナの幅)×5(フレックスコンテナの数)=75%がフレックスアイテムのwidthの合計になります。

余っているwidthが25%なので、それをmargin-leftとmargin-rightに均等に振り分けます。一つ一つのフレックスアイテムの左右両方に付くので、25%を10で割って「フレックスコンテナの左右に2.5%ずつmarginを付けることになります!

出来上がったレイアウトが以下のようになります。この方法で

10

11

12

13

14

15

16

Flexboxで均等に左揃えする方法

参考のタグはこんな感じです。デザインは自由にCSSで変更しましょう。

<div class="flex-container">
	<p>1</p>
	<p>2</p>
	<p>3</p>
	<p>4</p>
	<p>5</p>
	<p>6</p>
	<p>7</p>
	<p>8</p>
	<p>9</p>
	<p>10</p>
	<p>11</p>
	<p>12</p>
	<p>13</p>
	<p>14</p>
	<p>15</p>
	<p>16</p>
</div>
<style type="text/css">
	.flex-container{
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.flex-container > p{
		width: 15%;
		margin: 8px 2.5%;
	}
</style>

尚、上記タグにはベンダープレフィックスの処理は施しておりません。ベンダープレフィックスとはなんぞや?という方はこちらのリンクからお調べください!(人任せ)
ベンダープレフィックスとは – WEBデザイナーの教科書

まとめ

今回はFlexboxを使って均等に配置しつつ最終行も左揃えにする方法を解説してみましたがいかがでしたでしょうか?

上記の方法以外にも擬似要素のbeforeやafterを使って架空のフレックスアイテムを作る方法やjavascriptを使って左寄せに配置する方法などがありましたが、簡単なcssだけでできるこの方法が一番手っ取り早い気がします。

尚、この方法では「justify-content:space-between」のようにフレックスコンテナの両端から均等に振り分けるのはcssで微妙に面倒な作業をしなければならないので注意が必要です。

CSSカテゴリの最新記事