Flexbox按子项数量换行布局异常：4个项时最后一个单独换行

我看你遇到了Flexbox布局的适配难题，想要根据子项数量自动调整每行显示个数对吧？目前4个子项时最后一个单独换行，主要是固定宽度加margin:auto的组合导致的，咱们一步步来解决这个问题。

问题根源分析 #

你当前给.bloc设置了固定的width:300px和margin:auto，在Flex容器里，margin:auto会让元素自动填充左右剩余空间，当容器宽度刚好能放下3个300px元素时，第四个就会被挤到下一行。而且固定宽度的方式也没法灵活适配不同数量子项的布局需求。

解决方案代码 #

我们用Flex弹性宽度结合CSS :has()选择器来针对不同子项数量设置布局规则，同时替换margin:auto为统一间距，避免自动填充导致的换行问题：

.blocWrapper {
    border: 1px solid red;
    display: flex;
    justify-content: center;
    align-items: center;
}
.blocWrapper .blocContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    border: 1px solid black;
    width: 65%;
    padding-top: 45px;
    gap: 20px; /* 用gap统一设置子项间距，比margin更省心 */
}
.blocWrapper .blocContainer .bloc {
    /* 替换固定width，用弹性宽度适配布局 */
    flex: 1 1 calc(50% - 10px); /* 默认每行2个，减去gap的一半 */
    min-width: 280px; /* 设置最小宽度，避免屏幕过窄时元素变形 */
    height: 180px;
    box-shadow: 0 0 3px rgba(0, 0, 0, .2);
    text-align: center;
    font-family: raleway;
    word-break: break-word;
    display: flex;
    align-items: center;
    flex-direction: column; /* 修正你之前的拼写错误：colomn → column */
    padding: 10px; /* 加内边距让内容不贴边 */
}
.blocWrapper .blocContainer .blocTitre {
    font-size: 20px;
    font-weight: 700;
    color: blue;
    margin: 12px 0; /* 调整margin让布局更紧凑 */
}

/* 当容器刚好有5个子项时：第一行3个，第二行2个 */
.blocContainer:has(.bloc:nth-child(5):last-child) .bloc:nth-child(-n+3) {
    flex: 1 1 calc(33.333% - 13.333px); /* 3个元素平分宽度，减去gap的2/3 */
}
.blocContainer:has(.bloc:nth-child(5):last-child) .bloc:nth-child(n+4) {
    flex: 1 1 calc(50% - 10px); /* 最后2个保持每行2个 */
}

/* 当容器刚好有6个子项时：每行3个 */
.blocContainer:has(.bloc:nth-child(6):last-child) .bloc {
    flex: 1 1 calc(33.333% - 13.333px);
}

关键修改说明 #

1. 用gap替代margin:auto：gap是Flex/Grid的专属属性，能统一设置子项间的间距，避免margin带来的布局混乱。
2. 弹性宽度设置：flex: 1 1 calc(XX% - XXpx)中，flex-grow:1让元素填充剩余空间，flex-shrink:1允许元素缩小，flex-basis设置基础宽度，减去gap的对应比例保证元素不超出容器。
3. :has()选择器精准匹配：利用这个CSS新特性，能根据容器内的子项数量精准设置样式，完美匹配你需要的不同布局规则。
4. 修正拼写错误：你之前写的flex-direction: colomn是拼写错误，改成column才能让子项垂直排列。

这样修改后，就能实现你要的效果：

• 4个子项：每行2个均匀分布
• 5个子项：第一行3个、第二行2个
• 6个子项：每行3个均匀分布

内容的提问来源于stack exchange，提问作者Mamadou Berthé