什麼是彈性基礎屬性集？

Question

將max-width或width設置爲彈性項目而不是flex-basis有什麼區別？

它是flex-grow/shrink屬性的「突破點」嗎？

當我設置flex-wrap: wrap瀏覽器如何決定在哪一點將項目向下移動到新行？它是根據它們的寬度還是「彈性基礎」？

例子：http://jsfiddle.net/wP5UP/ 最後兩個箱子具有相同的flex-basis: 200px，但只有其中的一個窗口時300像素和400像素之間下移。爲什麼？

Answer 1

flex-basis允許您在計算任何其他元素之前指定元素的初始/開始大小。它可以是百分比或絕對值。

然而，它是而不是的flex-grow/shrink屬性的突破點。瀏覽器根據元素的初始大小是否超出橫軸的寬度（在傳統意義上，即寬度）來確定何時包裝元素。

根據你的小提琴，最後一個窗口向下移動的原因是因爲父窗口的寬度已被前面的同胞完全佔用 - 而且當你允許內容包裝時，不適合的元素第一行被推送到後續行。由於flex-grow是非零值，因此它將簡單地拉伸以填充第二行中剩下的所有空格。

See demo fiddle (modified from yours)。

如果你看一下小提琴，我已經修改了最後一個項目有一個新的大小聲明：

.size3 { 
    flex: 0 1 300px; 
} 

你會意識到，元素措施300像素跨越的預期。但是，當您調整flex-grow屬性以使其值超過0（see example）時，它將伸展以填充行，這是預期的行爲。由於在新的行內容它沒有兄弟姐妹比較，1到無窮大之間的整數不會影響它的大小。

因此，flex-grow可以被看作是這樣的：

• 0：（默認值）不要拉伸。任何大小的元素的內容寬度，或服從flex-basis。
• 1：Stretch。
• ≥2（整數n）：拉伸。例如，將n乘以flex-grow: 1的其他元素的大小。