1

I recently started using flexbox and I really like it but I'm having a little issue with flex-grow when im using flex-grow.

Sooo I created this:

section#vertical {
 display: flex;
 width: 90%;
 height: 120px;
 margin: auto;
 flex-direction: column;
 flex-wrap: wrap;
 background-color: cadetblue;
}

.box {
 background-color: salmon;
 flex: 1;
}

.big {
 background-color: turquoise;
 flex-grow: 2;
}
<section id="vertical">
 <div class="box">s</div>
 <div class="box big">b</div>
 <div class="box">s</div>
 <div class="box">s</div>
 <div class="box">s</div>
 <div class="box big">b</div>
 <div class="box">s</div>
 <div class="box">s</div>
 <div class="box big">b</div>
 <div class="box">s</div>
 <div class="box">s</div>
 <div class="box">s</div>
 <div class="box big">b</div>
 <div class="box">s</div>
 <div class="box">s</div>
 <div class="box">s</div>
</section>

As u can see it has some strange behavior, it increases the height slightly. maybe it is because of the height of my section? I don't know, is there maybe a way to have like max5 boxes in a row (column) instead of putting an height on my section?

hippietrail
  • 15,848
  • 18
  • 99
  • 158
Niels
  • 25
  • 5
  • or does 'flex-grow:2' not mean for example: 16px+16px, 'flex-grow:3' 16px+16px+16px and 'flex-grow:4' 16px+16px+16px+16px etc etc? – Niels Jan 11 '17 at 12:36

0 Answers0