柔性箱佈局，左側兩個項目，右側一個

Question

我正試圖用flexbox實現以下佈局。

┌─┬─────┐ 
│A│  │ 
├─┤ C │ 
│B│  │ 
└─┴─────┘ 

是否有可能這樣做沒有包裝A和B爲包裝？

Answer 1

是的，這是可能的。考慮到在這個例子中主容器具有固定的寬度和高度。

#container{ 
 
    height: 200px; 
 
    width: 300px; 
 
    display: flex; 
 
    flex-flow: column wrap; 
 
} 
 

 
#container, #A, #B, #C{ 
 
    box-sizing: border-box; 
 
    border: 1px solid black; 
 
} 
 

 
#A{ 
 
    height: 50%; 
 
    width: 100px; 
 
} 
 

 
#B{ 
 
    height: 50%; 
 
    width: 100px; 
 
} 
 

 
#C{ 
 
    height: 100%; 
 
    width: 200px; 
 
}

<div id="container"> 
 
    <div id="A">A</div> 
 
    <div id="B">B</div> 
 
    <div id="C">C</div> 
 
</div>

Answer 2

不幸的是，沒有固定的高度，所以我結束了做事的老辦法 - 通過表格，這樣

HTML：

<div id="container"> 
    <div id="A">A<br>AAA<br>BBB</div> 
    <div id="B">B</div> 
    <div id="C">C</div> 
</div> 

CSS ：

#container { 
    width: 100%; 
    outline: 1px solid black; 
    display: table; 
} 

#A,#B,#C { 
    outline: 1px solid crimson; 
} 

#A,#B { 
    width: 100%; 
} 

#C { 
    display: table-cell; 
    vertical-align: middle; 
    width: 50%; 
}