我在Flexbox中遇到了挑戰。

我想定義兩個柔性元素之間的任意距離。

我知道應該使用justify-content，但我不能使用它設置一個具體的距離。

我不想使用從保證金或任何類似的東西。 我想用flex來做

.box{
    display: flex;
    justify-content: space-between;
}

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

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

space-between確實如其所言，它在元素之間添加了空格。 如果你想減少空間，你也應該說如何減少空間:例如，增加盒子的大小，增加項目和邊框之間的空間，等等。

我為你提供3個解決方案:

1.均勻地使用空間來代替間隔。它將均勻地分隔元素，并將容器邊框也視為一個元素:

.box{
    display: flex;
    justify-content: space-evenly;
}

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

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