如何在两个Flex元素之间设置任意间距？

你可以直接使用Flexbox的gap属性解决这个问题，这是Flex布局原生支持的间距设置方式，完全不需要依赖margin，且能精准控制间距数值。

修改你的CSS代码如下：

.box{
    display: flex;
    /* 替换justify-content，使用gap设置具体间距值 */
    gap: 30px; /* 这里可以设置你需要的任意间距，比如20px、1rem等 */
}

.item{
    background-color: rgb(255, 157, 0);
    width: 50px;
    height: 50px;
}

对应的HTML无需修改：

<div class="box">
    <div class="item"></div>
    <div class="item"></div>
</div>

补充说明 #

• gap是Flexbox的原生属性，专门用于定义容器内flex项之间的间距，支持设置像素、百分比、em/rem等单位；
• 如果需要分别控制水平和垂直方向的间距，可以使用column-gap（水平）和row-gap（垂直），gap是这两个属性的简写；
• 这个属性不会影响元素与容器边缘的距离，只会作用于flex项之间的空隙，完全符合你只借助Flex特性实现需求的要求。

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