flexbox layout with two items on the left and one on the right

问题

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?

回答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>

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

来源：https://stackoverflow.com/questions/40980078/flexbox-layout-with-two-items-on-the-left-and-one-on-the-right