How to prevent flex-box item to push down other items?

1

The 3rd item is pushing 4 and 5 down. How to prevent it? This is the code: https://codepen.io/amuhana/pen/zELMOp

2

Hi!

I don’t see how that can be possible with flexbox.

The only way I can think is by knowing hoy many columns you need and which one is going to be the large one.

If you need that exact configuration you could use display: grid instead.

.container {
  padding: 10px;
  width:230px;
  background-color: #b9c7e5;
  display: grid;
  grid-auto-flow: row;
  grid-template-rows: 60px 60px 0px 0px 0px;
  grid-template-columns: auto auto auto;
}

.box {
  background-color: gray;
  width:50px;
  height: 50px;
}
.third{
  height:110px;
}

Regards!

3

Hey. A way of doing that with flexbox would be having two inner divs separating the content:

HTML

<div class="container">
  <div class="inner_one">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">4</div>
    <div class="box">5</div>
  </div>
  <div class="inner_two">
    <div class="box third">3</div>
  </div>
</div>

Then, in your CSS you would force the container to not wrap, and the two inner divs to, instead, wrap normally:

CSS

.container {
  width:230px;
  background-color: #b9c7e5;
  display: flex;
  flex-flow: row nowrap; /* Force no wrapping */
  align-items:center; /* Center aligning */
}
/* Others declarations */
.inner_one, .inner_two {
  display:flex;
  flex-flow:row wrap;
}