Alinhar à esquerda a última linha do flexbox usando o espaço entre as margens e as margens [duplicado]

Question

Dec 02, 2016, 05:13 PM

Alinhar à esquerda a última linha do flexbox usando o espaço entre as margens e as margens [duplicado]

Esta pergunta já tem uma resposta aqui:

Segmentação de itens flexíveis na última linha 3 respostas

Eu tenho um número desconhecido de elementos em um contêiner que precisa quebrar sem margens do lado de fora, mas com margens mínimas entre eles.

Eu também preciso que estes sejam justificados comspace-between e a última linha esquerda alinhada.

Estou tentando fazer isso com o flexbox assim:

.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>

Exibir JSFiddle

Isso funciona corretamente, exceto que o espaçamento na última linha está desativado, como você pode ver na captura de tela:

Existe alguma maneira de fazer isso funcionar se não soubermos quantas colunas haverá (usando flexbox ou outra coisa que não seja javascript)?