CSS3 flex-box屬性

Question

我想將flex box屬性用於動態創建框的佈局。

所以我想根據計數調整自己（盒子）。就像只有1個盒子一樣，它應該佔用100％的空間，最多3個盒子將排成一排。 如果第四個框出現在屏幕中，則自動轉到下一行。

我已經搜索了很多關於彈性流動但沒有得到正確的解決方案。

請幫助。

問候

Answer 1

使用新的語法，鉻（需要前綴）和Opera目前只有：

#container { 
    display: flex; 
    flex-flow: row wrap; 
} 

#container > * { 
    flex: 1 1 33%; 
} 

這裏是一個演示：http://jsfiddle.net/lpd_/qwwT8/。如果您不希望後續行上的項目在第一行被填充時伸展，則可以添加：

#container > *:nth-child(n+4) { 
    max-width: 33.33%; 
    max-width: calc(100%/3); /* To override and be more precise, if you wish */ 
}