html - 在容器本身包裹在主容器中之前，让 flex 元素包裹在嵌套的 flex 容器中

Question

如果我有一个包含多个容器的 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 个容器，每个容器有几个元素:

期望的行为，稍微小一点。最里面的元素包裹在它们的容器之前。

期望的行为，更小。

期望的行为，最小的。在最里面的元素不能再包装之后，容器最终包装。

实际发生了什么:容器在内容之前包裹起来。

Answer 1

我不相信有任何 flex 属性可以使这个过程简单易行。但是，flexbox 规范确实允许 absolutely-positioned flex children .因此，结合媒体查询和绝对定位，容器内的 flex 元素可以在容器本身换行之前换行。

试试这个:

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;
    }

Revised Codepen

请注意，尽管这段代码完成了问题的要求——它在容器本身包装之前将 flex 元素包装在它们的容器中——它只是为了传达解决方案的基本概念。 flex 元素的边距和宽度等问题，我认为超出了这个问题的范围，可能仍需要解决。