flex-wrap: balance で折り返したタグの行を均等にする

どんな時に使う？

• タグ一覧、カテゴリのチップ、ボタン群などで、最後の行に1個だけポツンと残る見た目を避けたい時
• 見出しの text-wrap: balance と同じ発想を、テキストではなく「flex の子要素の並び」に使いたい時

コード

.tags {
  display: flex;
  flex-wrap: wrap;    /* 未対応ブラウザ用のフォールバック */
  flex-wrap: balance; /* 対応ブラウザでは行ごとの数を均等に */
  gap: 8px;
}

• 同じプロパティを2回書き、未対応のブラウザでは2行目が無効として捨てられて wrap が使われる。対応ブラウザでは後に書いた balance が効く。
• 通常の wrap は「入るだけ1行目に詰め、溢れた分を次の行へ」なので、最後の行が極端に短くなりがち。balance はブラウザが行の長さが揃うように折り返し位置を選ぶ。

注意点・対応状況

• flex-wrap: balance は比較的新しい仕様で、対応ブラウザが限られる（記事作成時点で全ブラウザ対応ではない）。上のように wrap を先に書いておけば、未対応環境では普通の折り返しになるだけで崩れない。使う前に MDN や Can I use で最新の対応状況を確認すること。
• 行数自体は減らず、「同じ行数のまま各行の長さを揃える」動き。1行に収まる時は何も変わらない。
• テキストの行を均等にしたい場合は text-wrap: balance（見出し向け）や text-wrap: pretty（本文向け）を使う。

出典

• @sanyampunia · 2026-10-22