CSS trick to display multiple divs

Question

I want to separate my window in 2 equal parts, same height but width is 50% for each.

So I used this

.container {
    display: flex;
    height : 100%;       
}

.column {
    flex: 1;
    height : 100%;
}

.column-one {
    order: 1;

}
.column-two {
    order: 2;        
}

My html is structured like this

<div class="container">

<div class="column column-one"> Column 1
    <div  class="x" id="sliceX" ></div>
    <div  class="y" id="sliceY"></div>
    <div  class="z" id="sliceZ"></div>
</div>

<div class="column column-two"> Column 2
    <div  class="x" id="sliceX2"> </div>
    <div  class="y" id="sliceY2"></div>
    <div  class="z" id="sliceZ2"></div>
</div>

</div>

This is working well.

Now I want that my .x will take 100% of width but 50% of height. .y and .z will be displayed just after. Both taking 50% of height(the rest). But each class will only take 50% of width so .y will be displayed on the left and .z on the right

Like this:

Col1 Col2
xxxx xxxx
xxxx xxxx
yyzz yyzz
yyzz yyzz

How can I structure my css get this working with my actual separation in 2 columns ?

Answer 1

One thing you could try is to make your .column a flex container also and set it's wrap to allowing wrapping. Then set .x to width:100%; and .y, .z to width:50%; then give them all a height:50%;

Like this:

.column {
    flex: 1;
    height : 100%;
    display:flex;
    flex-wrap:wrap;
}
.x{
  width:100%;
  height:50%;
}
.y, .z{
  width:50%;
  height:50%;
}

See this fiddle.

Answer 2

You'll probably have best results with a second flex definition. You can use flex-wrap to wrap the layout quite effectively. Something like this:

html,
body {
  height: 100%;
  margin: 0;
}
.container {
  display: flex;
  height: 100%;
  align-items: stretch;
}
.column {
  flex: 0 0 50%;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.x {
  flex: 0 0 100%;
}
.y, .z {
  flex: 0 0 50%;
}
.x {background-color: #ff8080}
.y {background-color: #80ff80}
.z {background-color: #8080ff}

<div class="container">
  <div class="column column-one">
    <div class="x" id="sliceX"></div>
    <div class="y" id="sliceY"></div>
    <div class="z" id="sliceZ"></div>
  </div>

  <div class="column column-two">
    <div class="x" id="sliceX2"></div>
    <div class="y" id="sliceY2"></div>
    <div class="z" id="sliceZ2"></div>
  </div>
</div>

In the above, the .x takes 100% of the width, pushing the .y and .z onto the second row. Each of these then takes 50% of the width, making a nice result. You can of course further adjust the balance to 30/70 or anything you choose.

Great job on using Flex, by the way - it's definitely a great tool for this job :)