Flex Container 中的子 Div 的寬度百分比不均勻

Question

我在一個 flex 容器中有三個 DIV，它們需要以 40px 的邊距均勻拉伸，並且隨着屏幕寬度的縮小做出響應。 當我開始縮小瀏覽器 window 的大小時，中間的 DIV 仍然比側面的其他兩個大。

如何在屏幕寬度縮小時保持所有三個子 DIV 的寬度相同？

這是我的代碼：

.container {
width: 100%;
margin: auto;
margin-bottom: 65px;
display: flex;
align-items: stretch;
}
.child1, .child2, child3 {
text-align: center;
background-color: #F2F2F2;
padding-left: 70px;
padding-right: 70px;
padding-top: 70px;
padding-bottom: 60px;
}
.container > * + * {
margin-left: 40px;
}

<div class="container">
    <div class="child1"> Child 1</div>
    <div class="child2"> Child 2</div>
    <div class="child3"> Child 3</div>
</div>

這是一個屏幕截圖。 中間的 DIV 稍大：

Answer 1

您正在尋找的屬性是 flex-basis ( docs )。

默認情況下， flex-basis 是基於內容的，看起來你的內容有不同的寬度。

在所有三個子 div 中指定相同的 flex-basis 以確保無論其內容如何，它們都保持相同的大小。