html - 如何控制哪些元素比其他元素改变宽度更多？将流体与静态容器在线混合

Question

我正在创建一个流体设计，我需要在其中放置 4 个内联字段。前 3 个字段的宽度均为 20%，第 4 个字段的宽度为 40% 和/或最小 280px 左右，并将分为 2 个单独的字段。这是因为 280px 字段将包含分割成单独按钮的背景图像。

现在，由于我在所有字段上使用百分比，并且最后一个字段具有静态最小宽度，因此当接近 600px 父宽度时，它会被移动到下一行。

如何确保我的元素保持在原位并强制前 3 个元素比最后一个元素压缩得更多？

或者如何将最后一个字段保留为固定宽度并拉伸(stretch)前 3 个字段？

jsFiddle link

<div style="width: 100%; height: 50px;">
    <div style="width: 20%; height: 100%; float: left; background-color: blue; display: block">a</div>
    <div style="width: 20%; height: 100%; float: left; background-color: green; display: block">b</div>
    <div style="width: 20%; height: 100%; float: left; background-color: blue; display: block">c</div>
    <div style="width: 40%; min-width: 280px; height: 100%; float: left; display: block;">
        <div style="width: 50%; height: 100%; float: left; background-color: yellow;">d</div>
        <div style="width: 50%; height: 100%; float: left; background-color: orange;">e</div>
    </div>
</div>

Answer 1

这对于 Flexbox 来说是一个完美的场景。这是我的看法:http://jsfiddle.net/7QUY9/3/ 。确保您使用的浏览器支持 Flexbox 或仅使用最新版本的 Chrome。

在我的书《Functional CSS》( future 1.5 天内在亚马逊上免费提供)中，我在最后一种情况下考虑了更多的 Flexbox:导航菜单。如果您愿意，欢迎您查看。

确保调整 jsfiddle 预览窗口的大小以查看 Flexbox 的运行情况。很棒的规范。

这是 HTML 代码:

<div id = "main">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>
        <div>4a</div>
        <div>4b</div>
    </div>
</div>

这是 CSS:

#main {
    height: 20px;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
}

#main > div:nth-of-type(-n + 3) {
    -webkit-flex: 1 1 140px;
    flex: 1 1 140px;
    outline: 1px dashed red;
}

#main > div:nth-of-type(4) {
    -webkit-flex: 2 0 280px;
    flex: 2 0 280px;
    outline: 1px dashed red;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
}

#main > div:nth-of-type(4) > div {
    -webkit-flex: 1 1 50%;
    flex: 1 1 50%;
    outline: 1px dotted blue;
}