Flexを使用した間隔（マージン）をとった横並びレイアウトの指定方法まとめ【CSS初心者向け】
最近ではボックスの横並びレイアウトは、Flexを使用するのが一般的になってきています。
いまさらな感じもする今回のタイトルですが、コピペで簡単に使える良いサンプルソースって意外に見つかりません。CSS初心者の方が勉強しながらやってみても、カラム落ちが起きてみたり思わぬデザイン崩れに見舞われる事も多いかと思います。特にアイテム数が可変で、いくつになるかわからないケースなどは、なかなか難しいものです。
そこで今回は、CSS初心者の方でもコピペで使えるように、Flexを使用した間隔（マージン）をとった一般的な横並びレイアウトの指定方法を書いてみたいと思います。
Flexを使用したレイアウトの書き方は、コーディングを生業としている人たちの間でも、結構やり方が様々だったりします。
この記事の内容は、背景色があったりして緻密なレイアウトを求められた上に、「マージンは絶対に20px！」とかピクセル指定された時に、1px以下のズレや隙間が出ないようにする時に使う、滅多にやらない面倒くさい方法です。
シンプルにマージンが20px程度になるようにパーセント指定などで良い場合は、もっと簡単に済ませましょう。
～ 目次 ～
横2カラムレイアウト
まずはよくある横2カラムのレイアウトです。
下が実際に表示したサンプルです。
HTML
|
1 2 3 4 5 6 7 |
<div class="column2-wrap"> <div class="column2-inner">BOX1</div> <div class="column2-inner">BOX2</div> <div class="column2-inner">BOX3</div> <div class="column2-inner">BOX4</div> <div class="column2-inner">BOX5</div> </div> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.column2-wrap{ display:flex; flex-wrap:wrap; justify-content:space-between; /* 以降はレイアウトとは無関係です */ background:coral; } .column2-inner{ flex-basis:calc((100% - 20px) / 2); max-width:calc((100% - 20px) / 2); margin-top:20px; /* 以降はレイアウトとは無関係です */ text-align:center; background:lightskyblue; } .column2-inner:nth-of-type(1), .column2-inner:nth-of-type(2){ margin-top:0; } |
横3カラムレイアウト
次は3カラムです。下が実際に表示したサンプルです。
HTML
|
1 2 3 4 5 6 7 8 9 10 |
<div class="column3-wrap"> <div class="column3-inner">BOX1</div> <div class="column3-inner">BOX2</div> <div class="column3-inner">BOX3</div> <div class="column3-inner">BOX4</div> <div class="column3-inner">BOX5</div> <div class="column3-inner">BOX6</div> <div class="column3-inner">BOX7</div> <div class="column3-inner">BOX8</div> </div> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
.column3-wrap{ display:flex; flex-wrap:wrap; justify-content:space-between; /* 以降はレイアウトとは無関係です */ background:coral; } .column3-inner{ flex-basis:calc((100% - 40px) / 3); max-width:calc((100% - 40px) / 3); margin-top:20px; /* 以降はレイアウトとは無関係です */ text-align:center; background:lightskyblue; } /* 1段目だけ上下マージンを無くす */ .column3-inner:nth-of-type(1), .column3-inner:nth-of-type(2), .column3-inner:nth-of-type(3){ margin-top:0; } /* 最終行のアイテム数が2つの時、左右に振り分けられるのを防ぐ */ .column3-inner:nth-of-type(3n-1):nth-last-of-type(1){ margin-right:auto; margin-left:20px; } |
横4カラムレイアウト
最後に4カラムを載せておきます。理解してしまえば応用が利きますので、5カラム以上はご自身でトライしてみて下さい。
下が実際に表示したサンプルです。
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="column4-wrap"> <div class="column4-inner">BOX1</div> <div class="column4-inner">BOX2</div> <div class="column4-inner">BOX3</div> <div class="column4-inner">BOX4</div> <div class="column4-inner">BOX5</div> <div class="column4-inner">BOX6</div> <div class="column4-inner">BOX7</div> <div class="column4-inner">BOX8</div> <div class="column4-inner">BOX9</div> <div class="column4-inner">BOX10</div> </div> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
.column4-wrap{ display:flex; flex-wrap:wrap; justify-content:space-between; /* 以降はレイアウトとは無関係です */ background:coral; } .column4-inner{ flex-basis:calc((100% - 60px) / 4); max-width:calc((100% - 60px) / 4); margin-top:20px; /* 以降はレイアウトとは無関係です */ text-align:center; background:lightskyblue; } /* 1段目だけ上下マージンを無くす */ .column4-inner:nth-of-type(1), .column4-inner:nth-of-type(2), .column4-inner:nth-of-type(3), .column4-inner:nth-of-type(4){ margin-top:0; } /* 最終行のアイテム数が2OR3つの時、左右に振り分けられるのを防ぐ */ .column4-inner:nth-of-type(4n-1):nth-last-of-type(1), .column4-inner:nth-of-type(4n-2):nth-last-of-type(1){ margin-right:auto; margin-left:20px; } .column4-inner:nth-of-type(4n-2):nth-last-of-type(2){ margin-right:0; margin-left:20px; } |
Flexアイテム間のマージン調整の方法
Flexアイテム間のマージンは20pxにしてありますが、変更したい場合は、.column〇-innerの指定を書き換えます。
マージンの値を変更
横マージンは、flex-basis・max-widthのcalcのカッコ内の20pxの部分です。これを好きな値に変更します。
3カラム以上の場合は、横方向のアイテム間（マージン部分）の数が「カラム数ー1」になります。3カラムの場合ですと2か所のマージン部分ができます。以下は3カラムレイアウトでFlexアイテム間のマージンを25pxにする例です。
|
1 2 3 4 5 6 7 8 9 |
/* 3カラムの例 */ .column3-inner{ flex-basis:calc((100% - 50px) / 3); max-width:calc((100% - 50px) / 3); margin-top:25px; /* 以降はレイアウトとは無関係です */ text-align:center; background:lightskyblue; } |
このようにカラム数に応じて、×2・×3…としてあげましょう。
また、上下のマージンはmargin-topで指定していますので、こちらを変更します。
マージンをパーセント指定
マージンを親要素の幅に対してパーセントで指定したい場合も多いでしょう。
この場合は以下のようにします。3%に指定する例です。
|
1 2 3 4 5 6 7 8 |
.column2-inner{ flex-basis:calc((100% - 3%) / 2); max-width:calc((100% - 3%) / 2); margin-top:3%; /* 以降はレイアウトとは無関係です */ text-align:center; background:lightskyblue; } |
CSSのマージンは、上下のマージンであっても親要素の横幅が基準になります。上のようにシンプルにmargin-topに横方向と同じ値を指定すればOKです。
上記は2カラムの例ですが、3カラム以上の場合は横方向のアイテム間（マージン部分）の数が「カラム数ー1」になりますよね。という訳で、3カラムなら2倍の6%、4カラムなら3倍の9%と指定してやります。
|
1 2 3 4 5 6 7 8 9 |
/* 3カラムの例 */ .column3-inner{ flex-basis:calc((100% - 6%) / 3); max-width:calc((100% - 6%) / 3); margin-top:3%; /* 以降はレイアウトとは無関係です */ text-align:center; background:lightskyblue; } |
マージン無しにする
マージンが要らない場合は、flex-basisにcalcを使用せずにシンプルにパーセント指定しましょう。
コードの補足説明
各CSSコードで、flex-basisと同じ値をmax-widthにも指定していますが、これはバグ対策なので入れておくようにしましょう。また、flexアイテムに画像（imgタグ）を使用する場合は、元画像のサイズにより一部のブラウザで伸縮が起こります。これを避けるためには、align-itemsをstretch以外に指定するようにしましょう。
また、flex-basisでcalcを使用していますが、calcのカッコ内のカッコにcalcを付けるとIE11で効いてくれません。（たしか本来は付けるべきだったような気がしますが…）省略しても、その他のモダンブラウザでも問題ありませんので、書かないようにしましょう。
Flexアイテム間の上下マージンですが、上下に意味のないマージンが出来るのを防ぐために、margin-top:20xと指定して1段目だけmargin-top:0にしています。あまり細かい事が気にならなければ、全部margin-bottom:20pxのように指定してしまえばよいでしょう。この場合は、最後の段の下部に余計なマージンが20px出来る事になります。
最後に
この記事の最大のポイントは、横方向のFlexアイテムの間隔をmarginで指定しないでspace-betweenで計算させることです。calcを使用してFlexアイテムの幅を計算した場合、割り切れなくなってしまう場合の少数点以下の数値の扱いにブラウザ間で差があります。
フレックスアイテムの幅を指定した上で横マージンをmargin-left:20pxなどと固定してしまうと、（現在のバージョンの）EdgeやIEではこの小数点以下の誤差のため、カラム落ちが起こります。横マージンを指定しない事で、カラム落ちの原因になる1px以下の部分をマージンに吸収させています。
