【CSS】3つのボックスをスペースを空けて均等に横に並べる（溢れた場合も左寄せにする）

サイト制作でよくある均等サイズのボックスをエリア内に横に並べる方法です。今回は3つのボックスで、間に10pxのスペースを空けて均等に横並びにします。

HTML

<div class="content-body"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div>

CSS

.content-body{ display:flex; background-color:#ccc; width:100%; min-height:170px; } .box{ width:100%; height:150px; margin:10px; background-color:#999; border:1px solid #666; }

上記は単にflexで横並びにしているだけです。サイト制作でよくある均等サイズのボックスを横に並べる方法です。間に10pxのスペースを空けます。

ですが、上記はnowrapなので個数が増えても横並びのままです。
ここでは、各ボックスはブログの記事など、システムで生成され3つごとに下に折り返されるような状況を想定しています。

また、溢れた時は左寄せに並ぶようにしないとなりません。flex-direction:space-betweenだとボックスが2個だった場合は中間を空けて左と右離れて配置されてしまいます。

flex-wrap:wrapにする

まずは折り返される状況にしないとならないので、flex-wrap:wrapにします。

CSS

.content-body{ display:flex;   /*wrapへ変更*/ flex-wrap: wrap;   background-color:#ccc; width:100%; min-height:170px; } .box{ width:100%; height:150px; margin:10px; background-color:#999; border:1px solid #666; }

ボックスのサイズを横幅を3分の1へ変更

上記の状態だとボックスの横幅が100%なので、ここに3つ入るようボックスの横幅を3分の1のサイズへ変更します。
親要素の横幅100%の中に3ついれるので、
100 / 3 = 33.3333…%に横幅を変更します。

width:calc(100% / 3)

CSS

.box{ /*横幅を3分の1へ変更*/ width:calc(100% / 3);   height:150px; margin:10px; background-color:#999; border:1px solid #666; }

更に、左右マージン分を差し引く

上記の状態だとマージン分が差し引かれていないのでボックス内に3つ入り込みません。更にマージン分を差し引きます。
マージンは各ボックスに左右10pxずつ存在するので20pxを差し引く必要があります。

width:calc(100% / 3 – 20px)

CSS

.box{ /*さらに左右マージン分の20pxを差し引く*/ width:calc(100% / 3 - 20px);   height:150px; margin:10px; background-color:#999; border:1px solid #666; }

すると無事エリア内にボックスが3つ入り込みました。これでブログ記事などシステムで生成されて溢れても左寄せに均等に並びます。

親要素にもpaddingを入れてボックス内の空きを均等にする

ついでに、、今のままだと親要素の境目の天地左右の空きが10pxなので、ここにpaddingを10px入れてエリア内ですべての空きを均等します。

CSS

.content-body{   /*天地左右に10px追加*/ padding:10px;   display:flex; flex-wrap: wrap; background-color:#ccc; width:100%; min-height:170px; }

これでボックスの空きはすべて20pxになりました。