解决flex-wrap搭配动态宽度子元素时的右侧留白问题

我在网站上有一组标签，想要实现有明确行但无固定列的瀑布流样式布局，用flex-wrap: wrap就能快速实现，代码如下：

CSS 代码 #

body {
  background-color: red;
}

.wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: .25rem;
  width: 12rem;
  background-color: lime;
}
.wrapper > div {
  color: white;
  background-color: black;
  padding: .25rem;
  border-radius: .25rem;
}

HTML 代码 #

<div class="wrapper">
  <div>Lorem</div>
  <div>ipsum</div>
  <div>dolor</div>
  <div>sit</div>
  <div>amet</div>
  <div>consectetur</div>
  <div>adipiscing</div>
  <div>elit</div>
  <div>Duis</div>
  <div>lobortis</div>
  <div>tempor</div>
  <div>mauris</div>
  <div>vitae</div>
  <div>ornare</div>
</div>

但现在遇到的问题是：行未填满时右侧会出现大量留白，这种情况非常普遍，十几行里才一行能填满。重复这种布局会导致右侧留白和左侧紧凑内容形成视觉失衡。

我知道CSS Masonry规范可能会解决这个问题，但目前有没有可行的替代方案？比如通过每行对齐或自动边距实现？也愿意更换其他方法，但不想使用有明确行列的Grid布局。

方案1：Flex布局配合均匀分布+伪元素填充 #

这种方法能让每行元素自动填满容器宽度，消除右侧留白，同时保留标签的内容自适应宽度：

.wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: .25rem;
  width: 12rem;
  background-color: lime;
  justify-content: space-between; /* 让元素均匀分布填满行宽 */
}

/* 伪元素填充最后一行的空白区域，避免元素过度分散 */
.wrapper::after {
  content: "";
  flex: auto;
  min-width: 2rem; /* 匹配标签的最小宽度，可根据实际调整 */
}

方案2：无固定行列的Grid自适应布局 #

虽然你不想用明确行列的Grid，但可以通过自动列实现自适应布局，完全贴合标签内容宽度且无留白：

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min-content, max-content)); /* 列宽由标签内容决定 */
  gap: 1rem;
  padding: .25rem;
  width: 12rem;
  background-color: lime;
  justify-content: stretch;
}

Grid会根据容器宽度和标签内容自动调整列数，每行都会填满容器，没有固定行列的限制。

方案3：文本对齐法（适合轻量标签场景） #

如果标签都是简单文本类元素，可通过文本对齐配合伪元素实现：

.wrapper {
  width: 12rem;
  padding: .25rem;
  background-color: lime;
  text-align: justify;
  line-height: 0; /* 消除伪元素行高干扰 */
}

.wrapper::after {
  content: "";
  display: inline-block;
  width: 100%;
}

.wrapper > div {
  display: inline-block;
  color: white;
  background-color: black;
  padding: .25rem;
  border-radius: .25rem;
  margin: 0.5rem; /* 替代gap，inline-block不支持原生gap */
  line-height: normal; /* 恢复标签正常行高 */
}

内容的提问来源于stack exchange，提问作者rschristian