纯 CSS 布局解决方案（flexbox？）

Question

虽然有一个使用 javascript 的简单解决方案，但我希望找到一个纯 CSS 解决方案（最有可能使用 CSS3，flexbox 布局）。

如果父框（或屏幕）足够宽，我希望有以下布局：

|<-                              100% width                                             ->|
+------------------+--------------------------------+------------------+------------------+
| P1 - fixed width | P2 - min width, grow as needed | P3 - fixed width | P4 - width width |
+------------------+--------------------------------+------------------+------------------+

但如果可用宽度小于 P1 + P2 + P3 + P4，则布局应更改为

|<-                        100% width                                ->|
+------------------+--------------------------------+------------------+
| P1 - grow to 100% width                                              |
+------------------+--------------------------------+------------------+
| P2 - min width, grow as needed | P3 - fixed width | P4 - width width |
+------------------+--------------------------------+------------------+

为了便于讨论，我们假设父级的宽度至少为 P2 + P3 + P3。

我正在考虑将四个框放入 flex 父级中，将 flex-grow 设置为 0 用于固定宽度的子级，设置为 1 用于 P2。然后我会以相反的顺序添加它们并设置flex-flow: row-reverse wrap-reverse。如果没有足够的空间，这会将 P1 推到单独的行上，但我如何使它增长到 100% 宽度？

我真的很想在这里避免使用 javascript，但是，如果需要，我会在万不得已时这样做。

Answer 1

|<-                              100% width                                             ->|
+------------------+--------------------------------+------------------+------------------+
| P1 - fixed width | P2 - min width, grow as needed | P3 - fixed width | P4 - width width |
+------------------+--------------------------------+------------------+------------------+

以上可以在 P2 上使用width: calc(100% - ??px); 来实现，而其余的则具有固定的宽度。

|<-                        100% width                                ->|
+------------------+--------------------------------+------------------+
| P1 - grow to 100% width                                              |
+------------------+--------------------------------+------------------+
| P2 - min width, grow as needed | P3 - fixed width | P4 - width width |
+------------------+--------------------------------+------------------+

以上可以使用媒体查询来实现。

演示： http://jsfiddle.net/6y5hn/13/

#outerbox {
    width: calc(100% - 20px); 
    /** this container needs to be more than 400px wide else it will be too small to contain the boxes, also not sure why you wanted the -20px but I added it in anyways **/
}

#box1 {
    background-color:red;
    float: left;
    height:100px;
    width:100px;
}

#box2 {
    background-color:yellow;
    height:300px;
    float: left;
    width:calc(100% - 320px); /** minus the width of the 3 boxes and 20px from the container **/
}

#box3 {
    background-color:green;
    float: left;
    height:100px;
    width:100px;
}

#box4 {
    background-color:blue;
    float: left;
    height:100px;
    width:100px;
}

@media only screen and (max-width: 440px) {
    #box1 {
    float: none;
    width: calc(100% - 20px); /** minus 20px from the container **/
}

    #box2 {
    width:calc(100% - 220px); /** minus the width of the 2 boxes and 20px from the container **/
}
}

<div id="outerbox">
    <div id="box1">box1</div>
    <div id="box2">box2</div>
    <div id="box3">box3</div>
    <div id="box4">box4</div>
</div>

@Aleks G 的评论：

是的，类似这样，但第二个框的最小宽度。这 第一个盒子应该换行，否则盒子 2 会 变得小于其最小宽度 - 无论整体宽度如何 父母。

要仅使用 CSS 来获得这种效果，我只能建议弄清楚 P2 的最小宽度是多少。例如，如果 P2 的最小宽度设置为 400px，则将 P1 放入其自己的行的媒体查询将是 400px (P2) + 200px (P3 + P4) + 20px（您给的容器 20px）= 620 像素。

因此，当窗口大小达到 620px 时，会出现以下样式：

@media only screen and (max-width: 620px) {
        #box1 {
        float: none;
        width: calc(100% - 20px); /** minus 20px from the container **/
    }

        #box2 {
        width:calc(100% - 220px); /** minus the width of the 2 boxes and 20px from the container **/
    }
    }