动态宽度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; 
}​