如何实现Flex布局：元素随屏幕宽度每行等宽且数量均等？

要实现屏幕宽度变化时元素自动换行，且每行元素数量均等、宽度一致，同时无需预先知晓元素宽度、不设置固定宽度，CSS Grid是更适配的方案——Flexbox在处理最后一行元素的均等分布时存在天然局限性。

实现代码 #

<style>
  .GridContainer {
    display: grid;
    /* 核心规则：自动适配列数，保证每列宽度不小于内容最小宽度，同时均分容器可用空间 */
    grid-template-columns: repeat(auto-fit, minmax(min(100%/3, max-content), 1fr));
    gap: 8px; /* 可选：添加元素间的间距，提升视觉效果 */
  }
  .GridItem {
    word-break: break-word; /* 可选：防止超长内容溢出容器 */
  }
</style>

<div class="GridContainer">
  <div class="GridItem" style="background-color : red;"> 11111111111 111111111111</div>
  <div class="GridItem" style="background-color : blue;"> 22222222222 222222222222</div>
  <div class="GridItem" style="background-color : green;"> 33333333333 333333333333 3333333333 3333333333</div>
  <div class="GridItem" style="background-color : yellow;"> 44444444444 444444444444</div>
  <div class="GridItem" style="background-color : gray;"> 55555555555 555555555555</div>
  <div class="GridItem" style="background-color : purple;"> 66666666666 6666666666666</div>
</div>

关键规则解析 #

• repeat(auto-fit, ...)：自动根据容器宽度计算可容纳的列数，当元素总宽度超出容器时自动换行。
• minmax(min(100%/3, max-content), 1fr)：
  • 100%/3：限制每行最多显示3个元素（可根据需求调整数值，比如100%/4则最多4列）；
  • max-content：保证列宽不会小于元素内容的最小宽度，避免内容被挤压变形；
  • 1fr：当容器有剩余空间时，让所有列均分剩余宽度，确保每行元素宽度完全一致。

Flexbox方案的局限性 #

你之前的Flexbox代码中，flex-grow:1会让最后一行的元素拉伸填充剩余空间，导致最后一行元素宽度和其他行不一致。而Grid的列规则可以强制所有列宽度统一，无论元素处于哪一行，完美解决均等宽度的需求。

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