如何让flex布局子项最小占50%宽，无同级时占100%且随数量自适应

你现有代码的问题是给.item设置了固定的flex-basis: 50%，导致一行最多只能放2个子元素，无法满足3个子元素等分宽度的需求，同时CSS属性值不需要加多余的引号。

以下是两种适配需求的实现方案：

方案1：通用弹性自适应方案（推荐） #

通过flex: 1让子元素自动等分容器宽度，同时支持超过3个元素时自动换行，每一行的元素都会自动等分当前行的宽度，完全适配你提到的3种场景：

#Container {
  display: flex;
  flex-wrap: wrap;
  /* 如有需要可自行调整子项间距，例如 gap: 8px */
}

.item {
  flex: 1;
  min-width: 0; /* 避免子项内内容过长撑破布局 */
  flex-basis: 33.33%; /* 限制一行最多放3个元素，超出自动换行 */
}

效果验证：

• 1个子项时：自动填充整个容器，宽度为100%
• 2个子项时：两个元素等分容器，各占50%宽度
• 3个子项时：三个元素等分容器，各占33.33%宽度
• 超过3个子项时：自动换行，新行的元素同样按上述规则分配宽度

方案2：精准数量匹配方案 #

如果需要严格对应1/2/3个子项的宽度规则，不受其他场景影响，可以使用CSS结构选择器精准匹配子项数量：

#Container {
  display: flex;
  flex-wrap: wrap;
}

/* 仅1个子项 */
.item:only-child {
  width: 100%;
}

/* 共2个子项 */
.item:nth-child(1):nth-last-child(2),
.item:nth-child(1):nth-last-child(2) ~ .item {
  width: 50%;
}

/* 共3个子项 */
.item:nth-child(1):nth-last-child(3),
.item:nth-child(1):nth-last-child(3) ~ .item {
  width: 33.33%;
}

这个方案的优势是宽度规则完全固定，不会被子项内容长度影响。

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