我有一個div (100%寬度)，里面有3個按鈕。我需要讓他們之間保持一點點距離。

我使用自舉，這是我使用顯示伸縮和間距選項時得到的結果。

代碼；

.container {
    display: flex;
    flex-direction: row;
    text-align: center;
    font-weight: normal;
    font-size: 16px;
    line-height: 19px;
    align-items: center;
    justify-content: space-between;
}

.child-element {
    background: #FFFFFF;
    box-sizing: border-box;
    width: 100px;
    height: 60px;
    border: solid 1px #C4C4C4;
}

.child-element .selected {
    background: #FFED00;
}

<div class="container">
    <button class="child-element" data-option="1"><span style="color:#000">First</span></button>
    <button class="child-element" data-option="2"><span style="color:#000">Second</span></button>
    <button class="child-element" data-option="3"><span style="color:#000">Third</span></button>
</div>

您可以刪除justify-content: space-between并添加一些間距，如gap: 8px:

.container {
    display: flex;
    flex-direction: row;
    text-align: center;
    font-weight: normal;
    font-size: 16px;
    line-height: 19px;
    align-items: center;
    
    /* add gap */
    gap: 8px;
}

.child-element {
    background: #FFFFFF;
    box-sizing: border-box;
    width: 100px;
    height: 60px;
    border: solid 1px #C4C4C4;
}

.child-element .selected {
    background: #FFED00;
}

<div class="container">
    <button class="child-element" data-option="1"><span style="color:#000">First</span></button>
    <button class="child-element" data-option="2"><span style="color:#000">Second</span></button>
    <button class="child-element" data-option="3"><span style="color:#000">Third</span></button>
</div>