CSS cho một cột, hai hàng với anh chị em ruột với flexbox

Question

này cách đơn giản nhất tôi đã tìm thấy giải thích này chỉ đơn giản là để cho bạn thấy những lá cờ của Benin:

Tôi muốn làm một cái gì đó tương tự với flexbox trong CSS, nhưng cho đến nay tôi đã được flummoxed.

Điều quan trọng là tôi cần một trong ba khu vực là anh chị em, cái gì đó như:

<div class=flag> 
    <div class=green></div> 
    <div class=yellow></div> 
    <div class=red></div> 
</div> 

.flag { 
    display:flex; 
    flex-direction: row; 
} 

/* below this I'm not sure */ 
.green { 

} 

.red, .yellow { 

} 

Đây có phải là có thể mà không cần thêm một nút trung gian để chứa .red và .yellow? Thật dễ dàng vào thời điểm đó, nhưng tôi muốn biết nếu nó có thể làm những gì tôi mô tả ở trên.

Answer 1

Bạn có thể sử dụng các cột gói để có được Benin Cờ của bạn:

The (trái) cột đầu tiên được .green tại height:100% liên quan đến container .flag.

Thứ hai (bên phải) cột là .yellow, .red tại height:50% so với .flag

Và .green được phân bổ width:40% so với .flag

Chúc may mắn với dự án của bạn!

.flag{ 
 
    position:relative; 
 
    display:flex; 
 
    flex-flow:column wrap; 
 
    width:200px; 
 
    height:150px; 
 
    border:2px solid black; 
 
} 
 

 
.green{background:green;} 
 
.yellow{background:yellow;} 
 
.red{background:red;} 
 

 
.col1{width:40%;height:100%;} 
 
.col2{width:60%;height:50%;}

<div class=flag> 
 
    <div class='col1 green'></div> 
 
    <div class='col2 yellow'></div> 
 
    <div class='col2 red'></div> 
 
</div>