CODEWITHSUNDEEP
htmlcssflexbox
stackers
stackers

Reputation: 3270

Distribute flex items evenly when they wrap

When my flexbox container has more than a certain number of elements, I want it to use multiple rows. Here is my current solution: 

.container {
  display: flex;
  width: 400px;
  background: black;
  padding: 6px;
  margin: 10px;
  flex-wrap: wrap;
}
.box {
  flex: 1 1 0;
  height: 32px;
  flex-grow: 1;
  min-width: 15%;
  border: solid 1px black;
}
.box:nth-child(even) {
  background: blue;
}
.box:nth-child(odd) {
  background: red;
}
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

http://codepen.io/samkeddy/pen/mOwZBv?editors=1100

The problem is the items in the last row get stretched to fill the row.

What I want is for it to distribute the elements evenly between rows, so that every element is as close to the same size as possible.

For example, there are a maximum of 6 elements per row. When you have 8 elements, it puts 6 on the first row, and 2 on the second. I want it to put 4 on each row.

Is this possible with flexbox? Is this possible in any way?

Upvotes: 18

Views: 11532

Answers (2)

stackers
stackers

Reputation: 3270

What I had to eventually do was calculate the number of boxes per row (server side) and then use that to get the minimum width for each box, and applied it to each one with inline css.

edit: I know it's not good, but this is still the only answer. You can't do it with CSS.

Upvotes: 0

walidvb
walidvb

Reputation: 322

There is actually a trick to do this: Add a pseudo element to the container, and give it a flex-grow of 50 or so. This will create a pretend element that will fill the rest of the space. Note that I removed the border rule, as it counts towards the width of the element and conflicts with flex-basis.

Here is the modified example: https://codepen.io/walidvb/pen/ZXvLYE

Upvotes: 3

Related Questions