Đưa phần tử vào dòng/hàng mới bằng flexbox

Question

Tôi gặp sự cố khi buộc một mục vào hàng tiếp theo trong bố cục flexbox.

Tôi có thể làm gì đó như hình dưới đây?

Đây là những gì tôi có cho đến nay:

#wrap { 
 
    display: flex; 
 
    width: 86vw; 
 
    height: auto; 
 
    box-sizing: border-box; 
 
    margin: 0 auto; 
 
} 
 
.item1, 
 
.item2 { 
 
    width: 50%; 
 
    height: 24.5vw; 
 
    background: #4add69; 
 
} 
 
.item1 { 
 
    margin-right: 10px; 
 
} 
 
.item2 { 
 
    margin-left: 10px; 
 
} 
 
.item3 { 
 
    width: 60%; 
 
    height: 40vw; 
 
    background: #d56c6c; 
 
}

<div id="wrap"> 
 
    <div class="item1"></div> 
 
    <div class="item2"></div> 
 
    <div class="item3"></div> 
 
</div>

Answer 1

Mã của bạn là tốt nhưng còn thiếu hai điều.

1. Sử dụng flex-wrap: wrap để tạo hàng mới. Sửa đổi chiều rộng của hai mục đầu tiên thành có trong một hàng.

2. Đối với hai mục cuối cùng, bạn cần lồng nó vào trong một thùng chứa và rồi quấn lại.

Thao tác kích thước (chiều rộng, chiều cao) và lề để đạt được bố cục hoàn hảo/phù hợp.

JSfiddle Demo

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
body { 
 
    background: #232323; 
 
    padding: 10px; 
 
} 
 
#wrap { 
 
    display: flex; 
 
    width: 86vw; 
 
    height: auto; 
 
    box-sizing: border-box; 
 
    margin: 0 auto; 
 
    flex-wrap: wrap; 
 
    background: #232323; 
 
    /* Added */ 
 
} 
 
.item1, 
 
.item2 { 
 
    width: 48%; 
 
    /* Modified */ 
 
    height: 24.5vw; 
 
    background: #4add69; 
 
    margin-bottom: 10px; 
 
} 
 
.item1 { 
 
    margin-right: 10px; 
 
} 
 
.item2 { 
 
    margin-left: 10px; 
 
} 
 
.item3 { 
 
    width: 55%; 
 
    height: 40vw; 
 
    background: #d56c6c; 
 
    margin-right: 10px; 
 
} 
 
.nested-items { 
 
    display: flex; 
 
    width: 42%; 
 
    flex-wrap: wrap; 
 
    align-content: space-between; 
 
} 
 
.item4, 
 
.item5 { 
 
    background: lightblue; 
 
    width: 100%; 
 
    height: 49%; 
 
}

<div id="wrap"> 
 
    <div class="item1"></div> 
 
    <div class="item2"></div> 
 
    <div class="item3"></div> 
 
    <div class="nested-items"> 
 
    <div class="item4"></div> 
 
    <div class="item5"></div> 
 
    </div> 
 
</div>

Answer 2

Về cơ bản bạn cần một gói div thêm cho hai yếu tố 'nhỏ' như vậy:

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 
.wrap { 
 
    width: 75%; 
 
    margin: 1em auto; 
 
    border: 1px solid green; 
 
    padding: .25em; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
.wrap div { 
 
    border: 1px solid grey; 
 
    margin-bottom: 1px; 
 
} 
 
.box { 
 
    height: 80px; 
 
    background: lightblue; 
 
    flex: 0 0 50%; 
 
} 
 
.tall { 
 
    flex: 0 0 65%; 
 
    height: 160px; 
 
} 
 
.col { 
 
    flex: 0 0 35%; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
.mini { 
 
    flex: 0 0 100%; 
 
    height: 80px; 
 
    background: pink; 
 
}

<div class="wrap"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box tall"></div> 
 
    <div class="box col"> 
 
    <div class="mini"></div> 
 
    <div class="mini"></div> 
 
    </div> 
 
</div>

Tôi đã sử dụng một yếu tố tổng thể duy nhất ở đây với gói nhưng hình ảnh cho thấy rằng điều này sẽ đơn giản hơn nhiều với các hàng thực tế và trình bao bọc bổ sung được đề cập trước đây.

Codepen Demo tùy chọn thứ 2 có hàng.