Если у меня есть контейнер 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 контейнера с несколькими элементами:
Желаемое поведение, немного меньше. Внутренние предметы обертываются перед их контейнерами.
Желаемое поведение меньше.
Желаемое поведение, наименьшее. После того, как самые внутренние элементы больше не могут упаковываться, контейнеры, наконец, завершают.
Что на самом деле происходит: контейнеры обертывают перед их содержимым.