動態寬度div自動調整大小以適應瀏覽器寬度？

Question

我有幾個div寬度未知（動態寬度）。 如何自動調整這些div以適應瀏覽器寬度？

例如，我有5個不同寬度的div。如果瀏覽器寬度只能填充3個div，那麼這3個div將自動調整大小以適合瀏覽器寬度，其餘的將顯示在第二行。

我該如何使用html5和css3。我知道在css3中有一個新的功能flexbox，但我不確定我是否可以處理它。

Answer 1

您可以根據您的要求使用calss - value值。 最小/最大寬度/高度

參見實施例demo jsFiddle

.grid { 
    display: box; 
    display: -webkit-flex; 
    display: flex; 
} 
.column { 
    padding: 20px; 
} 
.fluid { 
    box-flex: 1; 
    background: #ccc; 
} 
.fixed { 
    width: 100px; 
    background: red; 
}​