如何用CSS实现不同数量div元素的每行均等排列？

要实现根据.item的数量自动调整每行排列个数，我们可以利用CSS的:has()伪类检测容器内子元素数量，结合Flexbox属性完成需求。以下是完整解决方案：

完整代码 #

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

<style>
.container{
  max-width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap; /* 基础规则：超出容器自动换行 */
  gap: 8px; /* 可选：子元素间距，避免边框重叠 */
}

.item{
  width: 250px;
  height: 200px;
  border: 1px solid red;
  box-sizing: border-box; /* 让边框纳入元素宽度计算，防止溢出 */
}

/* 仅3个.item时，强制一行排列 */
.container:has(.item:nth-child(3):last-child) {
  flex-wrap: nowrap;
  /* 若容器宽度不足，可替换为自适应宽度写法：
  .item { flex: 1 1 calc(100% / 3); width: auto; }
  */
}

/* 4个.item时，每行2个 */
.container:has(.item:nth-child(4):last-child) .item {
  flex: 1 1 calc(50% - 4px); /* 减去gap的一半，适配容器宽度 */
  width: auto;
}

/* 6个.item时，每行3个 */
.container:has(.item:nth-child(6):last-child) .item {
  flex: 1 1 calc(100% / 3 - 5.33px); /* 减去gap的平均占比 */
  width: auto;
}

/* 8个.item时，每行4个 */
.container:has(.item:nth-child(8):last-child) .item {
  flex: 1 1 calc(25% - 6px); /* 减去gap的平均占比 */
  width: auto;
}
</style>

关键说明 #

• :has()伪类：精准匹配包含指定数量子元素的容器，比如.container:has(.item:nth-child(3):last-child)表示容器内恰好有3个.item。
• flex-wrap：基础设置为wrap实现自动换行，3个元素时强制设为nowrap保证一行；也可通过flex属性让元素自适应容器宽度，避免窄容器下换行。
• flex: 1 1 百分比：让子元素按每行所需个数分配宽度，同时减去gap的占比，确保元素不超出容器范围。

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