Flexboxでレイアウトを組むとき、「要素同士の間隔をきれいにそろえたい」と思うことは多いはずです。これまではmarginで調整する方法が一般的でしたが、最近はgapを使うことで、よりシンプルに間隔を指定できるようになりました。
この記事では、flexboxでgapを使う基本の書き方と、よくある使い方を例つきで解説します。初心者の方でも試しやすいように、実際のHTMLとCSSを交えて紹介します。
flexboxのgapとは
gapは、要素と要素の「すき間」を指定するためのCSSプロパティです。flexboxでは、横並びの要素の間隔を均等にそろえたいときに便利です。
以前は、各要素にmargin-rightなどを付けて間隔を作ることが多くありました。ただし、その方法だと最後の要素だけ余計な余白が残るなど、調整が少し面倒でした。gapを使えば、コンテナ側でまとめて間隔を管理できます。
基本の書き方
flexコンテナに対してgapを指定します。これだけで、子要素の間に均等な余白が入ります。
<div class="box">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
</div>.box {
display: flex;
gap: 16px;
}
.item {
background: #e8f0fe;
padding: 16px;
}この例では、3つの要素の間に16pxの間隔が入ります。各要素に個別でmarginを設定しなくても、横並びのすき間をそろえられます。
横方向と縦方向を分けて指定する
gapは1つの値だけでなく、2つの値も指定できます。1つ目が行方向、2つ目が列方向の間隔です。flexboxでは折り返しがある場合に便利です。
.box {
display: flex;
flex-wrap: wrap;
gap: 12px 20px;
}この場合、上下の間隔が12px、左右の間隔が20pxになります。折り返しのある一覧レイアウトなどで、見た目を整えやすくなります。
実用的なサンプル
ボタンを横並びにして、間隔を均等にそろえる例です。CTAボタンやナビゲーションでも使いやすい書き方です。
<div class="button-list">
<a href="#" class="button">詳細を見る</a>
<a href="#" class="button">資料を読む</a>
<a href="#" class="button">お問い合わせ</a>
</div>.button-list {
display: flex;
gap: 12px;
}
.button {
display: inline-block;
padding: 12px 18px;
background: #333;
color: #fff;
text-decoration: none;
border-radius: 6px;
}このようにすると、ボタンの左端や右端だけ余白が増えることなく、きれいに並びます。デザインの修正が入ったときも、gapの値を変更するだけで調整できるため、管理しやすいです。
marginとの違いと使い分け
marginでも要素間の余白は作れますが、gapは「要素同士の距離」をまとめて管理できる点が大きな違いです。特に、同じ並びのアイテムを均等にそろえたい場合はgapのほうが分かりやすく、コードもすっきりします。
ただし、要素の外側に余白を付けたい場合や、特定の要素だけ位置をずらしたい場合はmarginのほうが向いています。gapは「並んだ子要素の間隔」を整える用途で使うと効果的です。
まとめ
flexboxで要素の間隔を均等にそろえたいなら、gapを使うのがシンプルで便利です。コンテナに指定するだけで子要素同士のすき間を管理でき、marginよりも見通しよく書けます。
まずはdisplay: flex;とgapの組み合わせから試してみると、実際のレイアウトで使いどころがつかみやすくなります。ボタン一覧、カード、メニューなど、さまざまな場面で活用してみてください。
