CSS Flexbox 2 columns with different heights

Question

I have the following code:

.wrapper {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.a {
  background-color: red;
  width: 65%;
}

.b {
  background-color: green;
  width: 35%;
}

.c {
  background-color: blue;
  width: 65%;
  height: 100px;
}

.d {
  background-color: orange;
  width: 35%;
}

.e {
  background-color: teal;
  width: 65%;
}

.f {
  background-color: purple;
  width: 35%;
}

<div class="wrapper container">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
  <div class="d">D</div>
  <div class="e">E</div>
  <div class="f">F</div>
</div>

I am trying to make the F be right under D, like this:

The main reason I am doing this instead of 2 separate columns is because I want to be able to arrange the columns in mobile later by using order. Is this possible in Flexbox, or is there another way?

Krusche

Not possible with the current html structure, flexbox way. – Belloir

Answer 1

In order for a flex column to wrap, you need to define a fixed height on the container. Otherwise, without a breakpoint, the column has no reason to wrap. It will simply expand the container as a single column.

This problem is explained in more detail here:

• Is it possible for flex items to align tightly to the items above them?

You're probably better off with a grid solution.

.wrapper {
  display: grid;
  grid-template-columns: 65% 35%;
  grid-template-areas: " a b "
                       " c d "
                       " c f "
                       " c . "
                       " c . "                       
                       " e . " ;}

.a { grid-area: a; background-color: red;    }
.b { grid-area: b; background-color: green;  }
.c { grid-area: c; background-color: blue; height: 100px; }
.d { grid-area: d; background-color: orange; }
.e { grid-area: e; background-color: teal;   }
.f { grid-area: f; background-color: purple; }

<div class="wrapper">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
  <div class="d">D</div>
  <div class="e">E</div>
  <div class="f">F</div>
</div>

Browser support is now pretty strong for CSS Grid.

Also, the order property works in both Grid and Flex layouts. But you may not need order in Grid to re-arrange your layout for mobile screens. You can simply use grid properties.

Lieselotteliestal

This does produce what my pictures look like, however whenever I add more content to div A, then B expands with it. I looked at the threads you posted and I am now positive it is not possible to accomplish what I'm looking for without Javascript. Thanks! – Krusche

Post a new question with a more complete example. Is the content added dynamically to each grid item? If you know the heights beforehand, the layout may be possible without scripting. See my answer here for details: https://mcmap.net/q/37693/-css-only-masonry-layout/3597276 – Lieselotteliestal

Answer 2

Inspired from Easy-Masonry-Layout-With-Flexbox

Seems to do the job for me

<div id="masonry">
    <img src="irina.jpg" alt>
    <img src="daniella.jpg" alt>
    <img src="karina.jpg" alt>
    …
</div>

div#masonry {
  display: -ms-flexbox;
  -ms-flex-direction: column;
  -ms-flex-wrap: wrap;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100vw;
  font-size: 0; 
}

div#masonry img { 
    width: 33.3%;
    transition: .8s opacity;
}

Misread