17

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?

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
stackers
  • 2,701
  • 4
  • 34
  • 66
  • 1
    Possible duplicate of [Can flexbox divide items evenly on multiple rows?](http://stackoverflow.com/questions/22085646/can-flexbox-divide-items-evenly-on-multiple-rows) – roberrrt-s Nov 25 '16 at 16:27
  • Yeah, sounds like that person was looking for the same thing. – stackers Nov 25 '16 at 16:31
  • Your question raises two problems: (1) keep items the same size when they wrap, and (2) distribute items evenly when they wrap. Problem (2) may be resolved by moving `flex-wrap` into a media query. Problem (1) may be solved with invisible trailing items: [**demo**](http://codepen.io/anon/pen/eBRwae?editors=1100). – Michael Benjamin Nov 25 '16 at 16:48
  • evenly spacing and amount of children from rows to rows is not native in flexmodel, mediaquerie might be needed to achieve this. sprayed evenly rows by rows could be . an example that you can play with involving flex-shrink & basis and justify-content : http://codepen.io/gc-nomade/pen/QGMLEV – G-Cyrillus Nov 25 '16 at 18:42
  • Would this be a duplicate question/answer for you ? http://stackoverflow.com/questions/40794461/flex-box-two-boxes-wrap-when-scaling-window-browser/40794631#comment68811866_40794631 – G-Cyrillus Nov 25 '16 at 18:49
  • can you get this to work with fixed width boxes? – chovy Feb 10 '17 at 10:10
  • 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. – stackers Mar 22 '17 at 01:15

2 Answers2

3

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

walidvb
  • 322
  • 1
  • 9
0

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.

stackers
  • 2,701
  • 4
  • 34
  • 66