能否用CSS Flexbox实现每行元素拉伸且保持统一宽度？

数据老陈

2026-5-27

解决方案

完全可以用纯CSS实现，不需要JavaScript，下面推荐两种实用方案：

方案一：CSS Grid（推荐，代码更简洁）

Grid的布局特性天生适合这种“自动适配+等宽元素”的场景，结合伪元素占位符就能完美解决问题：

.container {
  display: grid;
  /* 自动计算每行可容纳的最小100px元素，剩余空间均分，确保每行填满容器 */
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 0; /* 若需要元素间距，可调整此值 */
}

.container > div {
  height: 100px;
  border: 1px #fff solid;
  text-align: center;
  font-size: 2em;
  background: #66f;
}

/* 添加占位伪元素，确保最后一行即使元素不足也不会拉伸单个元素 */
.container::after {
  content: "";
  grid-column: auto / span 10; /* 10是足够大的数值，覆盖可能的每行元素数 */
  height: 0;
  visibility: hidden;
}

原理：

repeat(auto-fill, minmax(100px, 1fr)) 会根据容器宽度自动计算每行能放多少个元素，每个元素的宽度会拉伸至均分剩余空间，保证每行刚好填满容器，无左右空隙；
伪元素::after作为隐形占位符，占据足够多的列，避免最后一行的单个元素被强制拉伸至整行，同时保持所有元素宽度一致。

方案二：Flexbox 实现

如果更倾向于用Flex，也可以通过添加占位元素来实现：

.container {
  display: flex;
  flex-wrap: wrap;
}

.container > div {
  flex: 1 1 100px; /* 允许拉伸/收缩，最小宽度100px */
  height: 100px;
  border: 1px #fff solid;
  text-align: center;
  font-size: 2em;
  background: #66f;
}

/* 添加多个隐形占位符，数量要足够多（比如10个），和真实元素属性一致 */
.container::before,
.container::after,
.container .placeholder {
  content: "";
  flex: 1 1 100px;
  height: 0;
  visibility: hidden;
}

原理：