Flexbox：缺少一个元素

Question

I have three elements in a row. I need to divide them in the following way:

flex: 0 0 20%;
max-width: 20%;
min-width: 20%;

But the result looks like this:

What exactly I want to get is that the green bar contains the sixth element. How to achieve that?

Answer 1

You set the width to 20% that means you can have exactly 5 elements in a row. If you want the next item to wrap on a new row you need to add flex-wrap: wrap

If you want the elements to always span 100% regardless of how many there are then simply don't specify any widht.

 .flex { display: flex; background: blue; } .flex--element { background: green; flex-grow: 1; } 

 <div class="flex"> <div class="flex--element"> Element </div> <div class="flex--element"> Element </div> <div class="flex--element"> Element </div> <div class="flex--element"> Element </div> </div>