在容器本身包裹在主容器中之前，使flex项目在嵌套的flex容器中换行 [英] Make flex items wrap in nested flex containers before containers themselves wrap in main container

问题描述

如果我有一个包含多个容器的flexbox容器，我如何使容器的包含的项目包装容器本身之前？

例如（

所需的行为，略小。最内层项目在其容器之前包装。

更小。

所需的行为，最小。在最内层项目不能再包装后，容器最后包装。

实际发生的情况：容器在内容之前封装。

解决方案

我不要相信有任何flex属性，使这个过程简单和容易。但是，flexbox规范允许绝对定位的flex children 。因此，通过媒体查询和绝对定位的组合，可以使容器内的flex项目在容器本身包装之前进行换行。

尝试：

HTML （无更改）

CSS 和绝对定位）

  #second {position：relative; } 
 / *为绝对定位建立最接近的祖先* / 
 
 @media屏幕和（max-width：1000px）{
 #second widget：nth-​​child {
 position：absolute; 
 left：0; 
 bottom：0; 
 width：90％; } 
} 
 
 @media屏幕和（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媒体查询删除绝对定位并恢复flex属性* / 
 @media screen和（max-width：600px）{
 column， row，widget {flex-wrap：wrap; } 
 #second widget {
 position：static; 
 width：calc（25％ -  3em）; 
 min-width：300px; 
} 
  

修订的Codepen

请注意，虽然此代码会执行问题–它在容器本身包装之前在其容器中包装flex项目–它只是意味着传达解决方案的基本概念。我认为超出这个问题范围的弹性项目的边距和宽度等问题可能仍需要解决。

If I have a flexbox container containing multiple containers, how do I make the containers' contained items wrap before the containers themselves?

For example (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);
}

I want the items in #second to wrap before #second itself wraps below #first. In other words, I always want to try wrapping the innermost items before trying to wrap the outermost ones, which seems to be the opposite of what happens by default. Is there any way to do this?

EDIT: There were requests for visual clarification.

2 containers with several items each:

Desired behavior, slightly smaller. Innermost items wrap before their containers.

Desired behavior, smaller still.

Desired behavior, smallest. After the innermost items can't wrap any more, the containers finally wrap.

What actually happens: the containers wrap before their contents.

解决方案

I don't believe there are any flex properties that make this process simple and easy. However, the flexbox specification does allow for absolutely-positioned flex children. So with a combination of media queries and absolute positioning, the flex items within the container can be made to wrap before the container itself wraps.

Try this:

HTML (no changes)

CSS (add media queries and absolute positioning)

#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

Note that although this code does what the question asks – it wraps flex items in their container before the container itself wraps – it's only meant to convey the basic concept of the solution. Issues like margin and width for flex items, which I considered beyond the scope of this question, may still need to be addressed.

这篇关于在容器本身包裹在主容器中之前，使flex项目在嵌套的flex容器中换行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！