【CSS Flexbox】で余白の設定をする方法！【gapとcalc】も便利！

完成イメージ

See the Pen flex margin by yucode (@yucode0506) on CodePen.

CSSFlexboxを使ったmarginの設定方法

Flexboxを使用したmarginの設定方法には、以下のように記述します。

<div class="flex-margin">
	<p class="item">アイテム</p>
	<p class="item">アイテム</p>
	<p class="item">アイテム</p>
</div>

.container {
  display: flex;
}

.item {
  margin: 10px; /*上下左右のmarginを10pxに設定*/
}

/*
また、特定の方向のmarginの設定も可能です。
*/

.item {
  margin-top: 10px; /*上のmarginを10pxに設定*/
  margin-right: 15px; /*右のmarginを15pxに設定*/
  margin-bottom: 20px; /*下のmarginを20pxに設定*/
  margin-left: 25px; /*左のmarginを25px

gapで要素間の余白を指定する

CSSのgapプロパティを使用して、Flexboxによるレイアウトを実装する方法は次のとおりです。

.container {
  display: flex;
  row-gap: 16px;
}

これにより、.container内のflexアイテムの間に16pxの空間が設定されます。
注意: gapプロパティはIE11には対応していないので、その場合は代替手段を使用します。

Flexboxのmarginの使い方と例

Flexboxは、Flexible Box Layout ModuleというCSSのモジュールで、配置やアイテムのサイズを調整するために使用されます。
Flexboxには、親要素と子要素の間にmarginを設定することができます。

marginの使い方について

.parent {
  display: flex;
}
.child {
  margin: 10px;
}

この例では、.child要素に10pxのmarginが設定され、上下左右に10pxの余白が設定されます。

特定の方向だけにmarginを設定することもできます。

.child {
  margin-top: 10px;
  margin-right: 5px;
  margin-bottom: 15px;
  margin-left: 20px;
}

この例では、.child要素に上に10px、右に5px、下に15px、左に20pxのmarginが設定されます。

.child {
  margin: 10px 5px 15px 20px;
}

上下左右の順番で上から順に設定することも可能です。

.child {
  margin: 10px 5px;
}

上下左右を同じ値に設定することも可能です。

Flexboxのレイアウトにおけるmarginの調整方法

Flexboxのレイアウトにおいて、marginの調整方法は以下のようになります。

marginの調整方法について

.parent {
  display: flex;
  flex-wrap: wrap;
}

.parent {
  align-content: space-between;
}

.parent {
  justify-content: space-between;
}

.parent {
  align-items: center;
}

.child {
  margin: 10px;
}

これらのプロパティを組み合わせることで、Flexboxのレイアウトを調整することができます。

Flexboxとcalcを利用する場合

Flexboxでcalcを利用することで、子要素の大きさを算出することができます。

例えば、親要素の幅からマージンを引いた値を子要素の幅にするように設定したい場合、以下のように記述します。

CSS
.parent {
  display: flex;
}

.child {
  flex-basis: calc(100% - 20px);
  margin: 10px;
}

上記の例では、親要素が100%の幅を持ち、子要素のマージンが10pxなので、子要素のflex-basisにcalc(100% – 20px)を指定して、子要素の幅を80%に設定しています。

2023年8月6日 【CSS入門】calc()関数を使うとwidthやheightを自動計算してくれてスゴイ便利！

また、複数の値を混ぜて計算することも可能です。例えば、子要素の幅を親要素の幅の50%からマージンを引いた値にする場合は以下のように書けます。

CSS
.child {
  flex-basis: calc(50% - 20px);
  margin: 10px;
}

このように、flexboxでのレイアウトにおいても calc 関数を使用することで、より細かな調整をすることができます。

まとめ

本記事では、CSS Flexboxを実装する際の余白の設定をご紹介しました。
「margin」「gap」「calc」などを利用する事が多いです。