Caixa flexível: alinhar a última linha à grade

Eu tenho um layout simples de caixa flexível com um contêiner como:

.grid {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

Agora, quero que os itens na última linha estejam alinhados com os outros. justify-content: space-between;deve ser usado porque a largura e a altura da grade podem ser ajustadas.

Atualmente parece

Aqui, quero que o item no canto inferior direito esteja na "coluna do meio". Qual é a maneira mais simples de conseguir isso? Aqui está um pequeno jsfiddle que mostra esse comportamento.

.exposegrid {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.exposetab {
  width: 100px;
  height: 66px;
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 5px;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  margin-bottom: 10px;
}

<div class="exposegrid">
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
</div>

Adicione um ::afterque preencha automaticamente o espaço. Não há necessidade de poluir seu HTML. Aqui está um codepen mostrando: http://codepen.io/DanAndreasson/pen/ZQXLXj

.grid {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.grid::after {
  content: "";
  flex: auto;
}

Uma técnica seria inserir um número de elementos extras (o número máximo de elementos que você espera ter em uma linha) que recebem altura zero. O espaço ainda está dividido, mas as linhas supérfluas entram em colapso:

http://codepen.io/dalgard/pen/Dbnus

body {
  padding: 5%;
}

div {
  overflow: hidden;
  background-color: yellow;
}

ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -4px -4px 0;
  list-style: none;
  padding: 0;
}

li {
  flex: 1 0 200px;
  height: 200px;
  border-right: 4px solid black;
  border-bottom: 4px solid black;
  background-color: deeppink;
}
li:empty {
  height: 0;
  border: none;
}

*,
:before,
:after {
  box-sizing: border-box;
}

<div>
  <ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
    <li>f</li>
    <li>g</li>
    <li>h</li>
    <li>i</li>
    <li>j</li>
    <li>k</li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

No futuro, isso pode ser possível através do uso de múltiplos ::after(n).

Como outros pôsteres mencionaram - não há uma maneira limpa de alinhar à esquerda a última linha com o flexbox (pelo menos conforme as especificações atuais)

No entanto, para o que vale a pena: Com o CSS Grid Layout Module, é surpreendentemente fácil de produzir:

Basicamente, o código relevante se resume a isso:

ul {
  display: grid; /* 1 */
  grid-template-columns: repeat(auto-fill, 100px); /* 2 */
  grid-gap: 1rem; /* 3 */
  justify-content: space-between; /* 4 */
}

1) Faça do elemento container um container grid

2) Defina a grade com colunas automáticas de largura 100px. (Observe o uso do preenchimento automático (ao contrário de auto-fit- que (para um layout de 1 linha) reduz as faixas vazias para 0 - fazendo com que os itens se expandam ocupem o espaço restante. Isso resultaria em um justificado espaço entre 'layout quando a grade tem apenas uma linha que, no nosso caso, não é o que queremos. (confira esta demonstração para ver a diferença entre elas).

3) Defina espaços / calhas para as linhas e colunas da grade - aqui, como deseja um layout de 'espaço entre' - o espaço será realmente um espaço mínimo, pois aumentará conforme necessário.

4) Semelhante ao flexbox.

ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
  grid-gap: 1rem;
  justify-content: space-between;
  
  /* boring properties */
  list-style: none;
  background: wheat;
  padding: 2rem;
  width: 80vw;
  margin: 0 auto;
}

li {
  height: 50px;
  border: 1px solid green;
}

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Codepen Demo (Redimensione para ver o efeito)

Sem nenhuma marcação extra, apenas adicionar ::afterfuncionou para mim especificando a largura da coluna.

.grid {
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
}
.grid::after{
  content: '';
  width: 10em // Same width of .grid__element
}
.grid__element{
  width:10em;
}

Com o HTML assim:

<div class=grid">
   <div class="grid__element"></div>
   <div class="grid__element"></div>
   <div class="grid__element"></div>
</div>

Você não pode. O Flexbox não é um sistema de grade. Ele não possui construções de linguagem para fazer o que você está pedindo, pelo menos não se você estiver usando justify-content: space-between. O mais próximo que você pode chegar do Flexbox é usar a orientação da coluna, que requer a definição de uma altura explícita:

http://cssdeck.com/labs/pvsn6t4z (observação: prefixos não incluídos)

ul {
  display: flex;
  flex-flow: column wrap;
  align-content: space-between;
  height: 4em;
}

No entanto, seria mais simples usar apenas colunas, que oferecem melhor suporte e não exigem a definição de uma altura específica:

http://cssdeck.com/labs/dwq3x6vr (observação: prefixos não incluídos)

ul {
  columns: 15em;
}

Uma solução possível é usar justify-content: flex-start;no .gridcontêiner, restrições de tamanho em seus filhos e margens nas devidas elementos filhos - dependendo do número desejado de colunas.

Para uma grade de 3 colunas, o CSS básico seria assim:

.grid {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
}

.grid > * {
    flex: 0 0 32%;
    margin: 1% 0;
}

.grid > :nth-child(3n-1) {
    margin-left: 2%;
    margin-right: 2%;
}

É outra solução imperfeita, mas funciona.

http://codepen.io/tuxsudo/pen/VYERQJ

Eu sei que há muitas respostas aqui, mas ... A maneira mais simples de fazer isso é com um em gridvez de flexe grid template columnscom repeate auto fills, onde você deve definir o número de pixels que você atribuiu a cada elemento, a 100pxpartir do seu código de trecho.

.exposegrid {
     display: grid;
     grid-template-columns: repeat(auto-fill, 100px);
     justify-content: space-between;
}
 .exposetab {
     width: 100px;
     height: 66px;
     background-color: rgba(255, 255, 255, 0.2);
     border: 1px solid rgba(0, 0, 0, 0.4);
     border-radius: 5px;
     box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
     margin-bottom: 10px;
}

<div class="exposegrid">
   <div class="exposetab"></div>
   <div class="exposetab"></div>
   <div class="exposetab"></div>
   <div class="exposetab"></div>
   <div class="exposetab"></div>
   <div class="exposetab"></div>
   <div class="exposetab"></div>
   <div class="exposetab"></div>
   <div class="exposetab"></div>
   <div class="exposetab"></div>
   <div class="exposetab"></div>
   <div class="exposetab"></div>
   <div class="exposetab"></div>
   <div class="exposetab"></div>
</div>

Sim.! Podemos, mas com algumas consultas de mídia, o número máximo de colunas é predefinido .

Aqui estou usando 4 colunas. Verifique meu código:

.container {
  display: flex;
  display: -webkit-flex;
  display: -moz-flex;
  flex-flow: row wrap;
  -webkit-flex-flow: row wrap;
  -moz-flex-flow: row wrap;
}

.container .item {
  display: flex;
  display: -webkit-flex;
  display: -moz-flex;
  justify-content: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  flex-basis: 25%; //max no of columns in %, 25% = 4 Columns
}

.container .item .item-child {
  width: 130px;
  height: 180px;
  background: red;
  margin: 10px;
}

@media (max-width: 360px) {
  .container .item {
    flex-basis: 100%;
  }
}

@media (min-width:360px) and (max-width: 520px) {
  .container .item {
    flex-basis: 50%;
  }
}

@media (min-width:520px) and (max-width: 680px) {
  .container .item {
    flex-basis: 33.33%;
  }
}

<div class="container">

  <div class="item">
    <div class="item-child">1</div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>

</div>

NOTA
1) Não há necessidade de criar div filho. Pode ser qualquer outra tag, como 'img' r, o que você quiser.
2) Se você quiser mais colunas, ajuste as consultas de mídia e o número máximo de colunas.

Se você deseja uma grade com algum espaço entre os itens e os itens iniciados sem nenhum espaço inicial, esta solução simples funciona:

.grid {
    display: flex;
    flex-flow: row wrap;
    margin: 0 -5px; // remove the inital 5px space
    width: auto;
}
.grid__item {
    width: 25%;
    padding: 0 5px; // should be same as the negative margin above.
}

Se você deseja o espaço inicial de 5 px, remova a margem negativa :) Simples.

https://jsfiddle.net/b97ewrno/2/

A resposta aceita, embora boa, faz com que não haja espaço entre os elementos na segunda linha.

Se você deseja alinhar o último item à grade, use o seguinte código:

Recipiente de grade

.card-grid {
  box-sizing: border-box;
  max-height: 100%;
  display: flex;
  flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  justify-content: space-between;
  align-items: stretch;
  align-content: stretch;
  -webkit-box-align: stretch;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
}

.card-grid:after {
  content: "";
  flex: 1 1 100%;
  max-width: 32%;
}

Item na grade

.card {
  flex: 1 1 100%;
  box-sizing: border-box;
  -webkit-box-flex: 1;
  max-width: 32%;
  display: block;
  position: relative;

}

O truque é definir a largura máxima do item igual à largura máxima da grade .card: after.

Demonstração ao vivo no Codepen

É possível usar o "flex-start" e adicionar as margens manualmente. Requer alguns hackers matemáticos, mas é definitivamente fácil de fazer e facilita o uso com um pré-processador CSS como o LESS.

Veja, por exemplo, este mix MENOS:

.flexboxGridMixin(@columnNumber,@spacingPercent) {
  @contentPercent: 100% - @spacingPercent;
  @sideMargin: @spacingPercent/(@columnNumber*2);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  > * {
    box-sizing: border-box;
    width: @contentPercent/@columnNumber;
    margin-left: @sideMargin;
    margin-right: @sideMargin;
  }
}

E, em seguida, pode ser facilmente usado para exibir um layout de grade responsivo:

ul {
  list-style: none;
  padding: 0;
  @spacing: 10%;
  @media only screen and (max-width: 499px) { .flexboxGridMixin(1,@spacing); }
  @media only screen and (min-width: 500px) { .flexboxGridMixin(2,@spacing); }
  @media only screen and (min-width: 700px) { .flexboxGridMixin(3,@spacing); }
  @media only screen and (min-width: 900px) { .flexboxGridMixin(4,@spacing); }
  @media only screen and (min-width: 1100px) { .flexboxGridMixin(5,@spacing); }
}

li {
  background: pink;
  height: 100px;
  margin-top: 20px;
}

Aqui está um exemplo de

http://codepen.io/anon/pen/YyLqVB?editors=110

Esse problema foi resolvido para mim usando a grade CSS,

Esta solução é aplicável apenas se você estiver tendo um número fixo de colunas, ou seja, não. de elementos a serem exibidos em uma única linha

-> usando grade, mas não especificando o número de linhas, à medida que o número de elementos aumenta, ele agrupa em colunas e adiciona linhas dinamicamente, especifiquei três colunas neste exemplo

-> você não precisa dar nenhuma posição ao seu (s) filho (s), pois ele o consertará, o que não queremos.

.grid-class{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 80px;
}

Esta versão é a melhor maneira para blocos com largura fixa:

http://codepen.io/7iomka/pen/oxxeNE

Em outros casos - versão do dalgard

http://codepen.io/dalgard/pen/Dbnus

body {
  padding: 5%;
}

div {
  overflow: hidden;
  background-color: yellow;
}

ul {
  display: flex;
  flex-wrap: wrap;
justify-content:center;
  margin: 0 -4px -4px 0;
  list-style: none;
  padding: 0;
}

li {
  flex: 1 0 200px;
  height: 200px;
  max-width:200px;
  min-width:200px;
  border-right: 4px solid black;
  border-bottom: 4px solid black;
  background-color: deeppink;
}
li:empty {
  height: 0;
  border: none;
}

*,
:before,
:after {
  box-sizing: border-box;
}

<div>
  <ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
    <li>f</li>
    <li>g</li>
    <li>h</li>
    <li>i</li>
    <li>j</li>
    <li>k</li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

Existe uma maneira sem o flexbox, embora você precise atender às seguintes condições. 1) O recipiente possui preenchimento. 2) Os itens têm o mesmo tamanho e você sabe exatamente quantos deseja por linha.

ul {
  padding: 0 3% 0 5%;
}
li {
  display: inline-block; 
  padding: 0 2% 2% 0;
  width: 28.66%;
}

O preenchimento menor no lado direito do contêiner permite o preenchimento extra à direita de cada item da lista. Supondo que outros itens no mesmo pai que o objeto de lista sejam preenchidos com 0 a 5%, ele será alinhado com eles. Você também pode ajustar as porcentagens para a margem que desejar ou usar os valores de cálculo de px.

Obviamente, você pode fazer o mesmo sem o preenchimento no contêiner usando o enésimo filho (IE 9+) para remover a margem em cada terceira caixa.

Usando flexbox e algumas consultas de mídia, eu fiz essa pequena solução: http://codepen.io/una/pen/yNEGjv (é um pouco hacky, mas funciona):

.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  max-width: 1200px;
  margin: 0 auto;
}

.item {
  background-color: gray;
  height: 300px;
  flex: 0 30%;
  margin: 10px;

  @media (max-width: 700px) {
     flex: 0 45%;
  }

  @media (max-width: 420px) {
    flex: 0 100%;
  }

  &:nth-child(3n-1) {
    margin-left: 10px;
    margin-right: 10px;
  }
}

Eu fiz um SCSS mixin para ele.

@mixin last-row-flexbox($num-columns, $width-items){

  $filled-space: $width-items * $num-columns;
  $margin: calc((100% - #{$filled-space}) / (#{$num-columns} - 1));

  $num-cols-1 : $num-columns - 1;

  &:nth-child(#{$num-columns}n+1):nth-last-child(-n+#{$num-cols-1}) ~ & {
    margin-left: $margin;
  }
  @for $i from 1 through $num-columns - 2 { 
    $index: $num-columns - $i;
    &:nth-child(#{$num-columns}n+#{$index}):last-child{
      margin-right: auto;
    }
  }
}

Este é o link do codepen: http://codepen.io/diana_aceves/pen/KVGNZg

Você só precisa definir a largura dos itens em porcentagem e número de colunas.

Espero que isso possa ajudá-lo.

Aqui está outro par de scss mixins.

Esses mixins assumem que você não utilizará plug-ins js como o Isotope (eles não respeitam a ordem de marcação html, alterando assim as regras da css nth).

Além disso, você poderá tirar o máximo proveito deles, especialmente se estiver escrevendo seus pontos de interrupção responsivos da primeira maneira móvel. Idealmente, você usará flexbox_grid () no ponto de interrupção menor e flexbox_cell () nos seguintes pontos de interrupção. flexbox_cell () cuidará de redefinir as margens definidas anteriormente, que não serão mais usadas em pontos de interrupção maiores.

A propósito, desde que você configure corretamente as propriedades flex do seu contêiner, também poderá usar apenas flexbox_cell () nos itens, se necessário.

Aqui está o código:

// apply to the container (for ex. <UL> element)
@mixin flexbox_grid($columns, $gutter_width){

  display: flex;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content: flex-start;

  > *{
    @include flexbox_cell($columns, $gutter_width);
  }
}

// apply to the cell (for ex. a <LI> element)
@mixin flexbox_cell($columns, $gutter_width){
  $base_width: 100 / $columns;
  $gutters: $columns - 1;
  $gutter_offset: $gutter_width * $gutters / $columns;

  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto; // IE10 doesn't support calc() here

  box-sizing:border-box; // so you can freely apply borders/paddings to items
  width: calc( #{$base_width}% - #{$gutter_offset} );

  // remove useless margins (for cascading breakponts)
  &:nth-child(#{$columns}n){
    margin-right: 0;
  }

  // apply margin
  @for $i from 0 through ($gutters){
    @if($i != 0){
      &:nth-child(#{$columns}n+#{$i}){
        margin-right: $gutter_width;
      }
    }
  }
}

Uso:

ul{
   // just this:
   @include flexbox_grid(3,20px);
}

// and maybe in following breakpoints, 
// where the container is already setted up, 
// just change only the cells:

li{
   @include flexbox_cell(4,40px);
}

Obviamente, cabe a você definir eventualmente o preenchimento / margem / largura do contêiner e as margens inferiores da célula e similares.

Espero que ajude!

Isso é bastante hacky, mas funciona para mim. Eu estava tentando obter espaçamento / margens consistentes.

.grid {
  width: 1024px;
  display: flex;
  flex-flow: row wrap;
  padding: 32px;
  background-color: #ddd;  

  &:after {
    content: "";
    flex: auto;
    margin-left:-1%;
  }

  .item {
    flex: 1 0 24.25%;
    max-width: 24.25%;
    margin-bottom: 10px;
    text-align: center;
    background-color: #bbb;

    &:nth-child(4n+2),
    &:nth-child(4n+3),
    &:nth-child(4n+4) {
      margin-left: 1%;
    }

    &:nth-child(4n+1):nth-last-child(-n+4),
      &:nth-child(4n+1):nth-last-child(-n+4) ~ .item {
        margin-bottom: 0;
    }    

  }
}

http://codepen.io/rustydev/pen/f7c8920e0beb0ba9a904da7ebd9970ae/

Parece que ninguém propôs a solução flex-grow no último item. A idéia é ter seu último item flexível para ocupar todo o lugar possível usando o crescimento flexível: 1.

.grid {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.grid > *:last-child {
  flex-grow: 1;
}

Nota: Essa solução não é perfeita, especialmente se você tiver elementos centralizados nos itens flexíveis, pois ele se concentrará no último item flexível possivelmente enorme.

Essa é uma combinação de muitas respostas, mas faz exatamente o que eu estava precisando - ou seja, alinhar o último filho em um contêiner flexível à esquerda, mantendo o comportamento entre espaços (neste caso, são três colunas layout).

Aqui está a marcação:

.flex-container {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}

.flex-container:after {
  content: "";
  flex-basis: 30%;
}

Assumindo:

• Você deseja um layout de grade de 4 colunas com quebra automática
• O número de itens não é necessariamente um múltiplo de 4

Defina uma margem esquerda em todos os itens, exceto nos itens 1, 5 e 9, e assim por diante. Se a margem esquerda for 10 px, cada linha terá uma margem de 30 px distribuída entre 4 itens. A largura percentual para o item é calculada da seguinte forma:

100% / 4 - horizontal-border - horizontal-padding - left-margin * (4 - 1) / 4

Esta é uma solução decente para problemas que envolvem a última linha do flexbox.

.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 1em 0 3em;
  background-color: peachpuff;
}

.item {
  margin-left: 10px;
  border: 1px solid;
  padding: 10px;
  width: calc(100% / 4 - 2px - 20px - 10px * (4 - 1) / 4);
  background-color: papayawhip;
}

.item:nth-child(4n + 1) {
  margin-left: 0;
}

.item:nth-child(n + 5) {
  margin-top: 10px;
}

<div class="flex">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>
<div class="flex">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>
<div class="flex">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>

Se você souber a largura dos espaços entre os elementos na linha e a quantidade de elementos em uma linha, isso funcionaria:

Exemplo: 3 elementos em uma linha, intervalo de 10 px entre elementos

div:last-child:nth-child(3n+2) {
  flex-grow: 1
  margin-left: 10px
}

Basta usar o truque Jquery / Javascript para adicionar uma div vazia:

if($('.exposegrid').length%3==2){
 $(".exposegrid").append('<div class="exposetab"></div>');
}

Oh garoto, acho que encontrei uma boa solução com CSS mínimo e sem JS. Confira:

img {width:100%;}
li {
  display: inline-block;
  width:8em;
  list-style:none;
}
ul {text-align: justify;}

<ul>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

A chave aqui é lembrar que o que estamos tentando alcançar é exatamente o que text-align: justifyfaz!

Os elementos vazios no HTML estão lá para fazer com que a última linha seja exibida perfeitamente sem alterar a aparência, mas pode não ser necessária, considerando o que você está tentando alcançar. Para um equilíbrio perfeito em todas as situações, você precisa de pelo menos x-4 elementos vazios, x sendo o número de elementos a serem exibidos ou n-2, n sendo o número de colunas que deseja exibir.

Basta adicionar alguns itens falsos com as mesmas propriedades, exceto a altura definida como 0px até o final.

você quer alinhar

use em align-content: flex-start;vez dejustify-content: space-between;

isso puxa os itens da última linha para a esquerda e também distribui o espaço uniformemente,

.container {
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  /*justify-content: space-between; remove this line!!!! */ 
}

https://codepen.io/anon/pen/aQggBW?editors=1100

A solução danAnderson NÃO É DINÂMICA.

quando a largura do item foi alterada de 25 para 28 dan anderson falha no espaço entre as imagens

danAnderson: https://codepen.io/anon/pen/ZwYPmB?editors=1100

dinâmico: https://codepen.io/anon/pen/aQggBW?editors=1100

isso é o que tenho tentado dizer. dans é hacky .....

Consegui fazer isso justify-content: space-betweenno contêiner