Flexboxでカードやメニューを横並びにすると、要素数によっては最後の1列だけ余白が目立つことがあります。特に、1行あたりの表示数が決まっているレイアウトでは、最終行が中央寄せのように見えてしまい、「左端からきれいに並べたい」と感じる場面がよくあります。この記事では、最後の1列だけを左寄せに見せるための基本的な考え方と、実際に使いやすいCSSの書き方を紹介します。
最後の1列が中央寄せっぽく見える理由
Flexboxは、要素を横方向に並べつつ、折り返しにも対応しやすい仕組みです。ただし、justify-content: space-between; などで横方向の間隔を調整している場合、最後の行に要素が少ないと、行全体の配置バランスが崩れて見えます。たとえば4列想定のレイアウトで最後の行に2個だけ要素があると、左右に大きな空白ができてしまい、左寄せにしたいのにそう見えないことがあります。
この問題は、最後の行だけ特別な指定をするというより、最終行の要素が自然に左から詰まるような組み方に変えることで解決しやすくなります。
基本のCSS例
まずは、よくあるカード一覧を想定した例です。flex-wrap を使って折り返しを有効にし、各カードの幅を固定しています。ポイントは、justify-content: flex-start; にして、横方向の開始位置を左にそろえることです。
.card-list {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
gap: 16px;
}
.card {
flex: 0 0 calc((100% - 32px) / 3);
background: #f5f5f5;
padding: 16px;
box-sizing: border-box;
}この書き方なら、各行の要素は左から順に並び、最後の1列も左寄せになります。gap を使っているので、要素同士の余白も管理しやすく、margin で個別に調整するより見通しが良いです。
HTMLの例
実際には、以下のようなHTMLで使えます。カード数が少ない最後の行でも、左側から自然に配置されます。
<div class="card-list">
<div class="card">カード1</div>
<div class="card">カード2</div>
<div class="card">カード3</div>
<div class="card">カード4</div>
<div class="card">カード5</div>
</div>space-betweenを使う場合の注意点
justify-content: space-between; は、1行に収まっている要素の間隔を広げて見栄えを整えるのに便利です。ただし、折り返しがあるレイアウトでは、最後の行の要素数が少ないと間隔の見え方が不自然になりやすいです。最後の1列だけ左寄せにしたいなら、最初から flex-start を基本にして、gap で間隔を作る方法が扱いやすいでしょう。
もし「行全体を均等配置したいが、最後の行だけは左詰めにしたい」という要件が強い場合は、FlexboxよりもCSS Gridの方が向いていることもあります。とはいえ、Flexboxだけでも十分きれいに整えられるケースは多いです。
よくある調整のコツ
- 親要素は
display: flex;とflex-wrap: wrap;を指定する justify-content: flex-start;で左寄せを基本にする- 余白は
gapで管理する - 子要素の幅は
calc()で列数に合わせて決める - 最後の行を無理に中央寄せや均等配置にしない
まとめ
Flexboxで最後の1列だけ左寄せにしたいときは、特別なテクニックを使う前に、まずレイアウト全体をflex-start基準で組むのが基本です。space-between に頼ると最後の行が崩れて見えやすいため、gap を使って余白を作る方法が実用的です。カード一覧や商品一覧、ブログの関連記事リストなど、横並びで折り返すレイアウトに幅広く使える考え方なので、ぜひ試してみてください。
