含换行文本的Flexbox子项均等内边距实现方案咨询

要实现无论子项是否换行，所有子项都均匀分配容器额外空间的需求，CSS Flexbox因是一维布局（换行后每行独立计算空间）无法直接满足，改用CSS Grid布局即可解决问题，具体实现如下：

修改后的代码 #

CSS #

.container {
  display: flex;
  flex-direction: column;
}

.bad {
  width: 600px;
}

.good {
  width: 800px;
}

ul {
  display: grid;
  /* 核心规则：自动适配列数，列宽最小为内容宽度，剩余空间均分 */
  grid-template-columns: repeat(auto-fit, minmax(min-content, 1fr));
  gap: 20px;
  padding: 20px;
  border: 1px solid gray;
  list-style: none;
}

li {
  padding: 10px 0;
  border: 1px solid red;
  text-align: center;
}

HTML（无需修改） #

<div class='container good'>
  <label>无换行时效果符合预期（内边距一致）</label>
  <ul>
    <li>South Carolina</li>
    <li>North Carolina</li>
    <li>Virginia</li>
    <li>Alaska</li>
    <li>District of Columbia</li>
    <li>California</li>
    <li>Arizona</li>
  </ul>
</div>

<div class="container bad">
  <label>使用<code>flex-basis: auto</code>效果不符合预期（内边距不均）</label>
  <ul>
    <li>South Carolina</li>
    <li>North Carolina</li>
    <li>Virginia</li>
    <li>Alaska</li>
    <li>District of Columbia</li>
    <li>California</li>
    <li>Arizona</li>
  </ul>
</div>

<div class="container bad">
  <label>使用<code>flex-basis: 1px</code>效果不符合预期（内边距不均）</label>
  <ul class="basis">
    <li>South Carolina</li>
    <li>North Carolina</li>
    <li>Virginia</li>
    <li>Alaska</li>
    <li>District of Columbia</li>
    <li>California</li>
    <li>Arizona</li>
  </ul>
</div>

方案说明 #

1. 核心规则解析
   • repeat(auto-fit, minmax(min-content, 1fr))：
     • auto-fit 根据容器宽度自动生成足够列数，避免子项溢出；
     • minmax(min-content, 1fr) 定义列宽范围：最小宽度为子项内容的固有宽度（保证文本不被挤压），最大宽度为容器剩余空间的均分份额（实现额外空间均匀分配）。
2. 效果优势
   • 无论子项是否换行，所有列的宽度规则完全统一，每个子项获得的额外空间一致；
   • 不会出现固定内边距导致的容器溢出问题，仅当容器有剩余空间时才分配额外空间。

补充说明 #

如果坚持使用Flexbox，无法实现跨行统一分配剩余空间的需求——因为Flexbox换行后会创建独立的flex行，每行的剩余空间仅在该行内部分配，无法与其他行共享规则。Grid的二维布局特性天生适配这种场景。

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