Flexbox, wrap items by column

Question

I am trying to control the position of some blocks contained in a wrapper with flexbox functionalities. Here is what I want at the end:

Here is the markup I would like to use. I wish not to change it and visually organize my box with CSS:

<div class="wrapper">
  <div class="list-1">
    Liste 1
  </div>
  <div class="list-2">
    Liste 2
  </div>
  <div class="list-3">
    Liste 3
  </div>
</div>

I tried multiple things but it does not work. Here is the closest thing I came with, but list-3 only starts when list-2 also starts:

.wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
div[class^="list-"] {
  text-align: center;
}
.list-1 {
  background: red;
  flex-basis: 80%;
  line-height: 50px;
}
.list-2 {
  background: pink;
  flex-basis: 80%;
  line-height: 50px;
}
.list-3 {
  background: green;
  flex-basis: 20%;
  line-height: 100px;
}

<div class="wrapper">
  <div class="list-1">
    Liste 1
  </div>
  <div class="list-2">
    Liste 2
  </div>
  <div class="list-3">
    Liste 3
  </div>
</div>

Is it even possible? Thank you for your help.

Ho, well I didn't know it existed, shame on me, I'm going to check it out! I'm completely open to not use flexbox — Hammerbot, Dec 06 '18 at 13:13
I agree with @philipp on this, CSS grid would indead be the way to go for this layout if you do not wish to change your markup. — Jake, Dec 06 '18 at 13:21
Well, it seems to work! https://jsfiddle.net/2z5haer7/2/ Thank you very much guys. I don't know if you can still respond to the question since it has been marked as duplicate — Hammerbot, Dec 06 '18 at 13:27

score 1 · Answer 1 · answered Dec 06 '18 at 13:16

try this code

add div to first and second list and use flex-basis:80% for new div

i add class

.list {
  flex-basis: 80%;
}

.wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

div[class^="list-"] {
  text-align: center;
}

.list-1 {
  background: red;
  flex-basis: 80%;
  line-height: 50px;
}

.list-2 {
  background: pink;
  flex-basis: 80%;
  line-height: 50px;
}

.list-3 {
  background: green;
  flex-basis: 20%;
  line-height: 100px;
}

.list {
  flex-basis: 80%;
}

<div class="wrapper">
  <div class="list">
    <div class="list-1">
      Liste 1
    </div>
    <div class="list-2">
      Liste 2
    </div>
  </div>
  <div class="list-3">
    Liste 3
  </div>
</div>

Yep, that would work but as stated in my question it would change my html markup and "I wish not to change it and visually organize my box with CSS". But thank you for taking the time to help me! I'm going to try what @philipp commented about `css-grid` — Hammerbot, Dec 06 '18 at 13:18

score 0 · Answer 2 · answered Dec 06 '18 at 13:17

.wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch; /* this is for the children of flex to be of equal height. */
}
div[class^="list-"] {
  text-align: center;
}
.list-1 {
  background: red;
  line-height: 200px;
  height:200px;
}
.list-2 {
  background: pink;
  line-height: 100px;
  height:100px;
}
.list-3 {
  background: green;
  flex-basis: 20%;
  /* following 3 codes is for centered the liste3. deletable */
  display:flex;
  align-items:center;
  justify-content:center;
}

.column {
  display:flex;
  flex-direction:column;
  flex:4;
}

 <div class="wrapper">
   <div class="column">
  <div class="list-1">
    Liste 1
  </div>
  <div class="list-2">
    Liste 2
  </div>
   </div>
  <div class="list-3">
    Liste 3
  </div>
</div>

Flexbox, wrap items by column

2 Answers2