Flex布局：如何将4个元素换行成2行并实现屏幕缩放响应式适配？

你的问题出在固定百分比宽度没考虑gap的间距——设置.cat为49%宽度后，两个元素加起来是98%，但加上25px的gap，总宽度会超过容器的100%，导致布局错乱，缩放时也没法稳定保持两行各两个元素。

给你两个可行的解决方案：

方案1：固定每行2个元素（无最小宽度限制） #

用calc()计算元素宽度，把gap的一半从50%里扣除，保证两个元素加gap刚好填满容器：

.cats {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 25px;
}

.cat {
    flex: 0 0 calc(50% - 12.5px); /* 50%宽度减去gap的一半 */
    position: relative;
}

这里flex: 0 0 ...表示元素不伸缩，保持计算后的固定宽度，屏幕缩放时始终每行显示2个元素。

方案2：带移动端响应式适配（自动调整行数） #

如果需要在小屏幕上自动变成每行1个元素，加上min-width限制元素最小宽度，搭配flex-grow:1让元素自动填充剩余空间：

.cats {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 25px;
}

.cat {
    flex: 1 1 calc(50% - 12.5px); /* 允许元素伸缩 */
    min-width: 250px; /* 根据需求设置最小宽度，小于此值时自动换行 */
    position: relative;
}

当屏幕宽度缩小到元素计算宽度小于250px时，布局会自动切换为每行1个元素，适配移动端。

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