柔性箱布局，左侧两个项目，右侧一个

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%; 
}