Flex將寬度應用於內容框

Question

當您設置柔性比率（例如flex：1）時，它們應用於內容框（即不考慮填充）。這導致一些意想不到的行爲，在這個例子中：

http://codepen.io/anon/pen/doYBad?editors=100

#c 
    { 
    background: red; width: 300px; height: 40px; 
    display: flex; align-items: stretch; box-sizing: border-box; 
    } 

    #l {background: blue; flex:1; } 
    #r {background: orange; flex:2; } 

    #c > * {padding: 20px; box-sizing: border-box; display: block;} 

的容器是300像素。比例是2 - 1（右 - 左）。所以左邊的框應該是100px，但這不是因爲有填充。

如何使flexbox將寬度應用於整個盒子而不僅僅是內容盒？

請注意，我不能使用寬度屬性。

Answer 1

您注意到的行爲實際上並非完全意外。

flex-grow屬性用於確定項目應占用的柔性容器內部的可用空間量。這裏的關鍵是可用空間是在任何已知空間被保留之後剩下的。

在您的例子有以下已知性質：

• 集裝箱寬度：300像素
• 填充每個項目：20像素（20像素×4 = 80px總）
• 左項佔用：剩餘空間的1/3
• 權項目佔用：剩餘空間

這樣的2/3計算爲FOLL完成OWS：

爲300px - 80px = 220px

220px是獲取與左邊的項目只得到這使三分之一的兩個項目之間分配的剩餘空間：

220px/3 = 73.333333r

因此左手項的總寬度是這樣的值加上被分配到填充在開始時：

73.333333r +（20像素* 2）= 113.333333r

當您刪除填充時，您將在左邊框和右邊框之間獲得100/200分隔。