創建相等寬度的彈性項目

Question

我使用flex進行布局，但瀏覽器不會在項目之間平均分配寬度。

 .parent { display: flex; width: 200px; } .btn1 { flex: 1 1 auto; } 

 <div class="parent"> <div class="btn1"> <button align="left" style="width:100%">Ok</button> </div> <button align="left" class="btn1">Cancel</button> <div> 

現在，我希望按鈕將容器長度分成50％/ 50％。

但那不是正在發生的事情。 我嘗試使用flex: 1 1 auto和flex: 1 1 0但沒有成功。

我知道我可以直接使用OK按鈕，它將解決我的問題，但在我的特定情況下，用div包裝它是很重要的。

現在，據我所知，flex應該能夠均勻地擴展寬度，這就是我的目標。

還有一件事，我注意到按鈕內容似乎對寬度有影響，我想以某種方式忽略這種效果。

謝謝！

JSFiddle示例： https ：//jsfiddle.net/edismutko/cvytLkyp/3/

Answer 1

flex-basis: auto vs flex-basis: 0

您正在使用flex: 1 1 auto調整您的Flex項目flex: 1 1 auto 。

但是，如果要在項目之間均勻分配空間，則需要使用flex: 1 1 0 。

不同之處在於基於flex-basis組件。

使用flex-basis: 0 ，每個項目被認為具有零寬度， flex-grow在它們之間平均分配容器空間。 這導致所有項目具有相同的長度。

使用flex-basis: auto ，項目的大小被計入flex-grow計算中，容器空間按比例分配在項目中。

所以當你想要相等長度的項目時，使用flex: 1 1 0 ，這與flex: 1相同。

以下是更詳細的說明： 根據原始大小靈活擴展項目

---

button元素的默認規則

默認情況下，瀏覽器將樣式應用於元素。 例如，Chrome會向button元素添加填充和邊框寬度。

重置這些默認值。

現在您有兩個相等寬度的彈性項目。 （額外的造型取決於你。）

 .parent { display: flex; width: 200px; } .btn1 { flex: 1; } button { padding: 1px 0; border-left-width: 0; border-right-width: 0; } 

 <div class="parent"> <div class="btn1"> <button align="left" style="width:100%">Ok</button> </div> <button align="left" class="btn1">Cancel</button> <div> 

---

box-sizing: border-box

要考慮的其他因素包括width / flex-basis計算中的填充和邊框長度。 為什么邊框導致div溢出容器？