动态宽度div自动调整大小以适应浏览器宽度？

Question

我有几个宽度未知的div（动态宽度）。 如何自动调整这些div的大小以适应浏览器宽度？

例如，我有5个不同宽度的div。如果浏览器宽度只能填满3个div，那么这3个div将自动调整大小以适应浏览器宽度，其余部分将显示在第二行。

如何使用html5和css3制作它。我知道css3中的一个新功能flexbox但我不确定我是否可以处理它。

Answer 1

您可以根据您的要求使用课程价值。 最小/最大宽度/高度

参见示例demo jsFiddle

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