Left-align last row of flexbox using space-between and margins [duplicate]

Question

I've got an unknown number of elements in a container that need to wrap with no margins on the outside, but minimum margins between them.

I also need these to be justified with space-between and the last row left aligned.

I'm trying to do this with flexbox like so:

.outside {
  border: 1px solid black;
}
.container {
  margin: -5px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.container:after {
  content: '';
  flex: auto;
}
.box {
  background: red;
  width: 50px;
  height: 50px;
  margin: 5px;
}

<div class="outside">
  <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 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 class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

View JSFiddle

This works correctly, except that the spacing on the last row is off, as you can see in the screenshot:

Is there any way to get this to work if we don't know how many columns there will be (using flexbox or something else other than javascript)?

Answer 1

Last row alignment is a common problem with flexbox.

One method to consider is using invisible flex items after the last visible item. For short, I just call them "trailing phantom items".

.outside {
  border: 1px solid black;
}
.container {
  margin: -5px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.container:after {
  content: '';
  flex: auto;
}
.box {
  background: red;
  width: 50px;
  height: 50px;
  margin: 5px;
}

.hidden {
  visibility: hidden;
  margin: 0 5px;
  height: 0;
}

<div class="outside">
  <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 class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box hidden"></div>
    <div class="box hidden"></div>
    <div class="box hidden"></div>
    <div class="box hidden"></div>
    <div class="box hidden"></div>
    <div class="box hidden"></div>
    <div class="box hidden"></div>
    <div class="box hidden"></div>
    <div class="box hidden"></div>
    <div class="box hidden"></div>
    <div class="box hidden"></div>
    <div class="box hidden"></div>
    <div class="box hidden"></div>
  </div>
</div>

Answer 2

Michael is right that the problem is you can't do space-between and then select the last row to be flex-start. The part that sticks out to me though is the specified width. Is that important?

If not, the usual way to do this would be to use media queries to control how many items are displayed per row. You can set a lots of media query steps to make sure the items don't stretch too much, but that way the space between more closely lines up with your normal grid gutters and it makes the "last row problem" go away. Think that would work?

Example: http://codepen.io/anon/pen/JbpPKa