僅限於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-grow設置爲0，將P2設置爲1。然後我會以相反的順序添加它們並設置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 | 
+------------------+--------------------------------+------------------+ 

以上可以使用媒體查詢來實現。

DEMO：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，則將媒體查詢設置爲自己的行將爲400px（P2）+ 200px（P3 + P4）+ 20px（您給出的容器爲20px）= 620px。

因此，當窗口大小擊中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 **/ 
    } 
    }