Делать гибкие элементы обертывания в вложенных гибких контейнерах до того, как сами контейнеры обернутся в основной контейнер

Если у меня есть контейнер flexbox, содержащий несколько контейнеров, как я могу сделать элементы контейнера, находящиеся в контейнерах, перед самими контейнерами?

Например (codepen):

HTML

<div>
    <row>
        <column id="first">
            <widget width=1 height=8></widget>
            <widget width=1 height=8></widget>
        </column>
        <row id="second">
            <widget></widget>
            <widget></widget>
            <widget></widget>
        </row>
    </row>
</div>

CSS

column, row, widget {
  background: RGBA(0,0,0,.2);
  margin: 1em;
  display: flex;
  flex-wrap: wrap;
  align-items: top;
  align-content: flex-start;
}

row {
  flex-direction: row;
}

column {
  flex-direction: column;
}

widget {
  min-height: 100px;
  flex-grow: 2;
  flex-shrink: 1;
  width: calc(25% - 3em);
  min-width: 300px;
  height: 100px;
  flex-basis: 0;
  padding: .5em;
  display: block;
}

widget[width=1] {
  flex-grow: 1;
  min-width: 150px;
}

widget[width=4] {
  flex-grow: 4;
  min-width: 600px;
}

widget[width=8] {
  flex-grow: 8;
  min-width: 1200px;
}

widget[height=1] {
  min-height: 150px;
}

widget[height=4] {
  min-height: 600px;
}

widget[height=8] {
  min-height: 1200px;
}

widget {
  background: RGBA(200,0,20,.5);
}

Я хочу, чтобы элементы в #second обертывались до того, как #second сам обертывается ниже #first. Другими словами, я всегда хочу попробовать обернуть самые внутренние элементы, прежде чем пытаться обернуть самые внешние, что кажется противоположным тому, что происходит по умолчанию. Есть ли способ сделать это?

РЕДАКТИРОВАТЬ: Были запрошены визуальные пояснения.

2 контейнера с несколькими элементами: полная ширина

Желаемое поведение, немного меньше. Внутренние предметы обертываются перед их контейнерами.

частично завернутый

Желаемое поведение меньше.

внутренние элементы полностью завернуты

Желаемое поведение, наименьшее. После того, как самые внутренние элементы больше не могут упаковываться, контейнеры, наконец, завершают.

контейнеры завернуты

Что на самом деле происходит: контейнеры обертывают перед их содержимым.

введите описание изображения здесь

введите описание изображения здесь

Ответы

Ответ 1

Я не верю, что есть гибкие свойства, которые делают этот процесс простым и легким. Однако спецификация flexbox позволяет абсолютно позиционированным гибким дочерним элементам. Таким образом, при сочетании медиа-запросов и абсолютного позиционирования элементы гибкости в контейнере могут быть сделаны для переноса до того, как сам контейнер обернется.

Попробуйте следующее:

HTML (без изменений)

CSS (добавить медиа-запросы и абсолютное позиционирование)

#second { position: relative; } 
/* establishes nearest positioned ancestor for absolute positioning */

@media screen and (max-width: 1000px) { 
    #second widget:nth-child(3) { 
        position: absolute; 
        left: 0; 
        bottom: 0; 
        width: 90%; }
    }

@media screen and (max-width: 800px) {  
    #second { height: 375px; }
    #second widget:nth-child(2) { 
        position: absolute; 
        left: 0; 
        bottom: 127px; 
        width: 75%; }
    #second widget:nth-child(3) { 
        position: absolute; 
        left: 0; 
        bottom: 0; 
        width: 75%; }   
    }

/* final media query removes absolute positioning and restores flex properties */       
@media screen and (max-width: 600px) {  
    column, row, widget { flex-wrap: wrap; }
    #second widget {
        position: static;
        width: calc(25% - 3em);
        min-width: 300px;
    }

Пересмотренный Codepen

Обратите внимание, что хотя этот код делает то, что задает вопрос – он обертывает гибкие элементы в своем контейнере, прежде чем сам контейнер обернется – он предназначен только для того, чтобы передать основную концепцию решения. Проблемы, такие как маржа и ширина для гибких элементов, которые, как я считал, выходят за рамки этого вопроса, все еще необходимо устранить.