Flexを使用した間隔(マージン)をとった横並びレイアウトの指定方法まとめ【CSS初心者向け】

Flexを使用した間隔(マージン)をとった横並びレイアウトの指定方法まとめ【CSS初心者向け】
2020年5月22日2021年8月4日

最近ではボックスの横並びレイアウトは、Flexを使用するのが一般的になってきています。

いまさらな感じもする今回のタイトルですが、コピペで簡単に使える良いサンプルソースって意外に見つかりません。CSS初心者の方が勉強しながらやってみても、カラム落ちが起きてみたり思わぬデザイン崩れに見舞われる事も多いかと思います。特にアイテム数が可変で、いくつになるかわからないケースなどは、なかなか難しいものです。

そこで今回は、CSS初心者の方でもコピペで使えるように、Flexを使用した間隔(マージン)をとった一般的な横並びレイアウトの指定方法を書いてみたいと思います。

Flexを使用したレイアウトの書き方は、コーディングを生業としている人たちの間でも、結構やり方が様々だったりします。

この記事の内容は、背景色があったりして緻密なレイアウトを求められた上に、「マージンは絶対に20px!」とかピクセル指定された時に、1px以下のズレや隙間が出ないようにする時に使う、滅多にやらない面倒くさい方法です。

シンプルにマージンが20px程度になるようにパーセント指定などで良い場合は、もっと簡単に済ませましょう。

横2カラムレイアウト

まずはよくある横2カラムのレイアウトです。

下が実際に表示したサンプルです。

BOX1
BOX2
BOX3
BOX4
BOX5

HTML

CSS

横3カラムレイアウト

次は3カラムです。下が実際に表示したサンプルです。

BOX1
BOX2
BOX3
BOX4
BOX5
BOX6
BOX7
BOX8

HTML

CSS

 

横4カラムレイアウト

最後に4カラムを載せておきます。理解してしまえば応用が利きますので、5カラム以上はご自身でトライしてみて下さい。

下が実際に表示したサンプルです。

BOX1
BOX2
BOX3
BOX4
BOX5
BOX6
BOX7
BOX8
BOX9
BOX10
BOX11

HTML

CSS

Flexアイテム間のマージン調整の方法

Flexアイテム間のマージンは20pxにしてありますが、変更したい場合は、.column〇-innerの指定を書き換えます。

マージンの値を変更

横マージンは、flex-basis・max-widthのcalcのカッコ内の20pxの部分です。これを好きな値に変更します。

3カラム以上の場合は、横方向のアイテム間(マージン部分)の数が「カラム数ー1」になります。3カラムの場合ですと2か所のマージン部分ができます。以下は3カラムレイアウトでFlexアイテム間のマージンを25pxにする例です。

このようにカラム数に応じて、×2・×3…としてあげましょう。

また、上下のマージンはmargin-topで指定していますので、こちらを変更します。

マージンをパーセント指定

マージンを親要素の幅に対してパーセントで指定したい場合も多いでしょう。

この場合は以下のようにします。3%に指定する例です。

CSSのマージンは、上下のマージンであっても親要素の横幅が基準になります。上のようにシンプルにmargin-topに横方向と同じ値を指定すればOKです。

上記は2カラムの例ですが、3カラム以上の場合は横方向のアイテム間(マージン部分)の数が「カラム数ー1」になりますよね。という訳で、3カラムなら2倍の6%、4カラムなら3倍の9%と指定してやります。

マージン無しにする

マージンが要らない場合は、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以下の部分をマージンに吸収させています。

関連のある記事

【CSS初心者向け】均等割付を使ってテキストを両端揃えにして綺麗にみせるサンプルコード

和文におすすめのtext-align : justifyを使った両端揃えにして綺麗にみせるサンプルコード

記事を読む

CSSでobject-fitを使わずに特定の縦横比に画像をトリミングする方法

CSSでobject-fitを使わずに特定の縦横比に画像をトリミングする方法

記事を読む

游ゴシックがIEで上にずれる時のCSSでの対応方法

游ゴシックがIEで上にずれる時のCSSでの対応方法

記事を読む

埋め込みグーグルマップの縦横比を固定してレスポンシブ対応にする方法

埋め込みグーグルマップの縦横比を固定してレスポンシブ対応にする方法

記事を読む

CSSでセンタリングした複数行テキストの改行位置を揃えて綺麗に見せる方法

CSSでセンタリングした複数行テキストの改行位置を揃えて綺麗に見せる方法

記事を読む

Generic selectors
Exact matches only
Search in title
Search in content

目次へ