Làm cho các vật phẩm flex được bọc trong thùng chứa flex trước khi các vật chứa được bọc trong thùng chính

Question

Nếu tôi có thùng chứa chứa nhiều thùng chứa.

Ví dụ (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); 
} 

Tôi muốn các mục trong #second quấn trước #second tự kết thúc tốt đẹp dưới đây #first. Nói cách khác, tôi luôn muốn thử bọc những thứ trong cùng nhất trước khi cố gắng quấn những thứ ngoài cùng, mà dường như ngược lại với những gì xảy ra theo mặc định. Có cách nào để làm điều này không?

EDIT: Đã có yêu cầu làm rõ bằng hình ảnh.

2 container với một số mặt hàng mỗi:

hành vi mong muốn, hơi nhỏ hơn. Các vật dụng trong cùng bao bọc trước thùng chứa của chúng.

Hành vi mong muốn, nhỏ hơn.

Hành vi mong muốn, nhỏ nhất. Sau khi các vật phẩm trong cùng không thể quấn thêm nữa, các thùng chứa cuối cùng cũng được bọc lại.

Điều gì thực sự xảy ra: các vật chứa bọc trước nội dung của chúng.

Answer 1

Tôi không tin có bất kỳ thuộc tính flex mà làm cho quá trình này đơn giản và dễ dàng. Tuy nhiên, đặc tả flexbox cho phép absolutely-positioned flex children. Vì vậy, với một sự kết hợp của các truy vấn phương tiện truyền thông và định vị tuyệt đối, các mặt hàng flex trong container có thể được thực hiện để bọc trước khi container chính nó kết thúc tốt đẹp.

Hãy thử điều này:

HTML (không thay đổi)

CSS (thêm truy vấn phương tiện truyền thông và định vị tuyệt đối)

#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

Lưu ý rằng mặc dù mã này câu hỏi đặt ra là gì – nó kết thúc tốt đẹp các mặt hàng flex trong container của họ trước khi các container chính nó kết thúc tốt đẹp – nó chỉ có nghĩa là để truyền đạt các khái niệm cơ bản của giải pháp.Các vấn đề như lề và chiều rộng cho các mặt hàng flex, mà tôi cho là nằm ngoài phạm vi của câu hỏi này, có thể vẫn cần được giải quyết.