Flexbox grid - justify: space-around and aligning last items left

Question

Trying to set-up my flexbox grid as simply as possible.

I want the flex-item to be justify: space-around at all times.

However, once it is time for a flex-item to wrap to the next line, it should 'float left' so it can continue to align to the rest of the elements above.

Can't seem to get the right combination of flexbox properties to do this:

.flex-container{
  display:flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.flex-item{
  flex: 0 0 200px;
  height: 200px;
  background: blue;
  margin: 1em;
}

.flex-item:after{
  content:'';
  flex-grow: 1000000000;
}

<div class="flex-container">

  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</div>

Pretty standard layout behavior for a grid of products right?

Anyone got an idea how I can achieve this? Maybe I am 'missing something' with how flexbox is meant to be used, but I sadly had to revert to my old floats and clears to get what I wanted for this layout.

Answer 1

You don't need to justify the content. use margin instead.

.flex-container {
  display: flex;
  flex-wrap: wrap;
  /*optional*/
  margin: auto;
  max-width: 980px
}
.flex-item {
  flex: 0 0 200px;
  height: 200px;
  background: blue;
  margin: 1em;
}

<div class="flex-container">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</div>

---

Update

I want the flex-items to be able to distribute neatly within the flex-container, no matter how wide it is. However, if the the flex-container gets below a width that can contain the flex-items at the minimum spacing allowed = the margin: 1em of each flex-item, they should wrap, floating left and aligning to the flexible grid

You can use the hack provided here by @Michael_B , using ::after won't work 100%, but close to that.

.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between
}
.flex-container::after {
  content: '';
  height: 0;
  width: 232px
  /* width + 2x(margin: 1em) */
}
.flex-item {
  flex: 0 0 200px;
  height: 200px;
  background: blue;
  margin: 1em;
}

<div class="flex-container">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</div>

---

Update #2

Yes saw that one thanks @dippas. Unfortunately this work-around requires manually setting CSS or writing javascript - and I definitely want a pure CSS solution. The flex-items will be generated dynamically, so I can't know what number there are, which is necessary for Michael_B's solution

Then forget flexbox because it can't do what you want, just use inline-block

.flex-item {
  display: inline-block;
  width: 200px;
  height: 200px;
  background: blue;
  margin: 1em;
}

<div class="flex-container">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</div>