Решение только для 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 | 
+------------------+--------------------------------+------------------+------------------+ 

выше может быть достигнут с использованием width: calc(100% - ??px); на Р2, а остальные имеют фиксированную ширину.

|<-      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 установлена ​​на 400 пикселей, ваш медиа-запрос, чтобы получить P1 в свою собственную строку, будет тогда 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 **/ 
    } 
    }