如何在不使用width/min-width/max-width属性下实现Flex等宽列与间距？

要实现列宽相等且带间距的布局，同时不设置任何width/min-width/max-width，可以通过调整Flex属性和使用gap来实现，具体如下：

修改后的CSS代码 #

.d-flex {
    display: flex;
    gap: 10px; /* 替代列的margin，控制列间距 */
}
.d-flex .col {
    flex: 1 1 0%; /* 核心：让列平分可用空间，无需设置宽度 */
    background: #7adaff;
}

原理说明 #

• flex: 1 1 0%：这个简写属性等同于flex-grow: 1（允许列放大填充容器剩余空间）、flex-shrink: 1（允许列缩小以适应容器）、flex-basis: 0%（将列的基础宽度设为0，确保所有列从相同基准分配空间，实现真正等宽）。
• gap: 10px：直接在Flex容器上设置间距，替代原来给列加的margin，避免margin导致的布局计算偏差，同时更简洁地控制列间间距。

效果验证 #

修改后，无论每个列的内容长度如何，所有列都会平分容器的可用宽度，同时保持均匀的间距，完全符合需求。

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