html - 使元素扩展以填充容器，但以最小宽度换行

Question

如果没有 Flexbox，这可能是不可能的，但值得一提。

我希望容器内的元素具有 flex 并占用所有可用的横向空间，但是当窗口调整大小并且它们达到最小宽度时，它们会换成第二行。这个 fiddle 有两条调查线:内联 block 和表格。

http://jsfiddle.net/48HMj/相关代码在这里:

.container{
    width:100%;
    background-color: yellow;

}
.container2{
    width:100%;
    background-color: lightblue;
    display:table;

}
.block {
    border:1px solid;
    display:inline-block;
    min-width:100px;
    width:auto;
    height:50px;
}
.cell {
    border:1px solid;
    display:table-cell;
    min-width:100px;
    width:auto;
    height:50px;
}

表格单元格以这种方式运行，但作为表格单元格，它们不应该换行...

谢谢

Answer 1

我不确定我是否理解你的问题，但我做了一个 FIDDLE供您检查。

基本上，我从 User3660695 fork 了“Live Demo” fiddle ，将 .flexible 类添加到所有 div，并向容器添加了媒体查询规则:

@media screen and (max-width:480px) {

    .container { display: block }

}

希望这就是您要寻找的行为。干杯!