flexbox布局，左侧有两个项目，右侧有一个项目

Question

I am trying to achieve the following layout with flexbox.

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

Is it possible to do so without wrapping A and B into a wrapper?

Answer 1

Yes, it's possible. Take in account that in this example the main container has a fixed width and height.

 #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

unfortunately, there is no fixed height, so I ended up with doing things old way — via tables, like this

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