在容器本身包装在主容器中之前,使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规范确实允许绝对定位的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;
    }

修改了Codepen

请注意,尽管此代码执行的问题是 - 它在容器本身包装之前将Flex项目包装在其容器中 - 但这只是为了传达解决方案的基本概念.我认为超出此问题范围的弹性项目的边距和宽度等问题可能仍需要解决.