如何使用Flex布局和space-between属性将元素对齐为直线？

问题根因 #

你遇到的挤压问题是flex布局的默认收缩机制导致的：flex容器的子元素默认flex-shrink属性值为1，当容器总宽度不足以容纳所有子元素的宽度+边距总和时，子元素会自动压缩宽度来适配容器宽度，就出现了内容被挤压的情况。

解决方案 #

不需要给列设置固定宽度，只需要关闭子元素的自动收缩即可，给.item添加flex-shrink: 0属性，强制子元素保持你设置的原有宽度，不会被容器挤压，也适配动态列数的场景，不需要动态调整宽度值。

修改后的完整CSS代码如下：

#box { 
    display: flex;
    width: 100px;
    margin: 0 -5px;
    /* 如果需要溢出部分可以横向滚动，可加以下属性 */
    /* overflow-x: auto; */
}

.item {
    background: gray;
    width: 50px;
    height: 50px;
    margin: 0 5px;
    /* 新增属性：禁止子元素自动收缩 */
    flex-shrink: 0;
}

HTML代码无需修改即可实现需求。

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