3

I have a problem with some items that leave space and cannot continue filling spaces between rows

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
}

.flex-start { 
  justify-content: flex-start; 
}

.flex-wrap{
  flex-wrap: wrap;
}

.flex-item {
  background: tomato;
  padding: 5px;
  width: 60px;
  height: 50px;
  margin: 5px;
  line-height: 50px;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
}

.row-only {
  flex-basis:79%;
}

.growing-item {
  height: 300px !important;
  flex-basis: 15%;
}
<ul class="flex-container flex-start flex-wrap">
  <li class="flex-item growing-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item row-only">5</li>
</ul>

What it looks like now:

flex_now

What I want it to look like:

flex_expected

Thank you in advance!

justDan
  • 2,302
  • 5
  • 20
  • 29
MikeVelazco
  • 885
  • 2
  • 13
  • 30
  • U can use case grid layout – Deepshika S Jan 22 '20 at 16:18
  • @DeepshikaS The thing is that I need it to be flex (I have some styles for mobile) and i think it can be doable but I'm just not that good at CSS. – MikeVelazco Jan 22 '20 at 16:19
  • It must be an unordered list? – Sfili_81 Jan 22 '20 at 16:19
  • Not possible with flexbox and the current HTML structure. – Paulie_D Jan 22 '20 at 16:21
  • @Sfili_81 No, it can be any kind of item. It's just styles. – MikeVelazco Jan 22 '20 at 16:23
  • @Paulie_D Why is not posible with flexbox? – MikeVelazco Jan 22 '20 at 16:23
  • Because flexbox won't you. That's not the way flex wrapping works. Once it wraps the element goes to the next row following the height of the tallest element as you have found. You would have to change the structure to achieve this in flexbox. – Paulie_D Jan 22 '20 at 16:27
  • I'll make a little example of what do you want [https://jsfiddle.net/pwydu8cn/1/](https://jsfiddle.net/pwydu8cn/1/) IT is a point to start, try to achieve your solution. – Sfili_81 Jan 22 '20 at 16:30
  • to reproduce the screen shot, float does the job : https://codepen.io/gc-nomade/pen/GRgzRLo , a mixed of inline-block + float + formating context would also. this is not a typical flex layout, probably a grid layout if size are known – G-Cyrillus Jan 22 '20 at 17:08

0 Answers0