Caja flexible: alinee la última fila con la cuadrícula

Tengo un diseño simple de caja flexible con un contenedor como:

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

Ahora quiero que los elementos en la última fila estén alineados con el otro. justify-content: space-between;debe usarse porque el ancho y la altura de la cuadrícula se pueden ajustar.

Actualmente parece

Aquí, quiero que el elemento en la parte inferior derecha esté en la "columna central". ¿Cuál es la forma más sencilla de lograr eso? Aquí hay un pequeño jsfiddle que muestra este comportamiento.

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

Agregue uno ::afterque rellene automáticamente el espacio. No es necesario contaminar su HTML. Aquí hay un codepen que lo muestra: http://codepen.io/DanAndreasson/pen/ZQXLXj

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

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

Una técnica sería insertar una cantidad de elementos adicionales (tantos como la cantidad máxima de elementos que alguna vez esperas tener en una fila) que tienen altura cero. El espacio todavía está dividido, pero las filas superfluas colapsan en nada:

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>

En el futuro, esto se puede lograr mediante el uso de múltiples ::after(n) .

Como han mencionado otros carteles: no hay una forma limpia de alinear a la izquierda la última fila con flexbox (al menos según las especificaciones actuales)

Sin embargo, para lo que vale: con el Módulo de diseño de cuadrícula CSS, esto es sorprendentemente fácil de producir:

Básicamente, el código relevante se reduce a esto:

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

1) Convertir el elemento contenedor en un contenedor de cuadrícula

2) Establezca la cuadrícula con columnas automáticas de ancho 100px. (Tenga en cuenta el uso de autocompletar (como se indica en este documento auto-fit, que (para un diseño de 1 fila) contrae las pistas vacías a 0), lo que hace que los elementos se expandan para ocupar el espacio restante. 'diseño cuando la cuadrícula tiene solo una fila, que en nuestro caso no es lo que queremos (consulte esta demostración para ver la diferencia entre ellos).

3) Establezca espacios / canales para las filas y columnas de la cuadrícula, aquí, dado que desea un diseño de 'espacio intermedio', el espacio en realidad será un espacio mínimo porque crecerá según sea necesario.

4) Similar a 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 (Cambiar tamaño para ver el efecto)

Sin ningún marcado adicional, solo agregar ::afterfuncionó para mí especificando el ancho de la columna.

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

Con el HTML como este:

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

No puedes Flexbox no es un sistema de cuadrícula. No tiene las construcciones del lenguaje para hacer lo que está pidiendo, al menos no si está usando justify-content: space-between. Lo más cercano que puede obtener con Flexbox es usar la orientación de la columna, que requiere establecer una altura explícita:

http://cssdeck.com/labs/pvsn6t4z (nota: prefijos no incluidos)

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

Sin embargo, sería más simple usar columnas, que tienen un mejor soporte y no requieren establecer una altura específica:

http://cssdeck.com/labs/dwq3x6vr (nota: prefijos no incluidos)

ul {
  columns: 15em;
}

Una posible solución es usar justify-content: flex-start;en el .gridcontenedor, restricciones de tamaño en sus elementos secundarios y márgenes en los elementos secundarios apropiados , dependiendo del número deseado de columnas.

Para una cuadrícula de 3 columnas, el CSS básico se vería así:

.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%;
}

Es otra solución imperfecta, pero funciona.

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

Sé que hay muchas respuestas aquí, pero ... La forma más simple de hacer esto es con un en gridlugar de flexy grid template columnscon repeaty auto fills, donde debe establecer el número de píxeles que ha dado a cada elemento, 100pxdesde su código de fragmento.

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

Si.! Podemos pero con algunas consultas de medios y el número máximo de columnas están predefinidas .

Aquí estoy usando 4 columnas. Revisa mi 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) No es necesario crear div hijo. Puede ser cualquier otra etiqueta como 'img' r lo que quieras ...
2) Si quieres más columnas, ajusta las consultas de medios y el número máximo de columnas.

Si desea una cuadrícula con algo de espacio entre los elementos y los elementos que comienzan sin ningún espacio inicial, entonces esta solución simple 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.
}

Si desea el espacio inicial de 5px, simplemente elimine el margen negativo :) Simple.

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

La respuesta aceptada, aunque es buena, hace que no haya espacio entre los elementos en la segunda fila.

Si desea alinear el último elemento a la cuadrícula, use el siguiente código:

Contenedor de rejilla

.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%;
}

Artículo en la cuadrícula

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

}

El truco consiste en establecer el ancho máximo del elemento igual al ancho máximo de .card-grid: después.

Demostración en vivo en Codepen

Es posible usar "flex-start" y agregar los márgenes manualmente. Requiere un poco de pirateo matemático, pero definitivamente es fácil de hacer y es fácil de usar con un preprocesador CSS como LESS.

Ver por ejemplo este MENOS mixin:

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

Y luego se puede usar fácilmente para mostrar un diseño de cuadrícula sensible:

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;
}

Aquí hay un ejemplo de

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

Este problema se resolvió para mí usando la cuadrícula CSS,

Esta solución es aplicable solo si tiene un número fijo de columnas, es decir, no. de elementos para mostrar en una sola fila

-> usando la cuadrícula pero sin especificar el número de filas, ya que el número de elementos aumenta, se ajusta en columnas y agrega filas dinámicamente, he especificado tres columnas en este ejemplo

-> no tiene que dar ninguna posición a su hijo / células, ya que lo solucionará, lo que no queremos.

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

Esta versión es la mejor manera para bloques con ancho fijo:

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

En otros casos - versión de 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>

Hay una forma sin flexbox, aunque deberá cumplir con las siguientes condiciones. 1) El contenedor tiene relleno. 2) Los artículos son del mismo tamaño y sabes exactamente cuántos quieres por línea.

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

El relleno más pequeño en el lado derecho del contenedor permite el relleno adicional a la derecha de cada elemento de la lista. Suponiendo que otros elementos en el mismo padre que el objeto de la lista están rellenados con 0 5%, quedará al ras con ellos. También puede ajustar los porcentajes a la cantidad de margen que desee o usar calcular valores px.

Por supuesto, puede hacer lo mismo sin el relleno en el contenedor utilizando nth-child (IE 9+) para eliminar el margen en cada tercer cuadro.

Usando flexbox y algunas consultas de medios, hice esta pequeña solución: http://codepen.io/una/pen/yNEGjv (es un poco hacky pero 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;
  }
}

Hice un SCSS mixin para ello.

@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 es el enlace codepen: http://codepen.io/diana_aceves/pen/KVGNZg

Solo tiene que establecer el ancho de los elementos en porcentaje y número de columnas.

Espero que esto pueda ayudarte.

Aquí hay otro par de mezclas de scss.

Estos mixins suponen que no va a utilizar complementos js como Isotope (no respetan el orden de marcado html, por lo que se equivocan con las reglas nss de css).

Además, podrá aprovecharlos al máximo, especialmente si está escribiendo sus puntos de respuesta de manera móvil. Lo ideal sería utilizar flexbox_grid () en el punto de interrupción más pequeño y flexbox_cell () en los siguientes puntos de interrupción. flexbox_cell () se encargará de restablecer los márgenes previamente establecidos que ya no se usan en puntos de interrupción más grandes.

Y, por cierto, siempre y cuando configure correctamente las propiedades flexibles de su contenedor, también puede usar solo flexbox_cell () en los elementos, si es necesario.

Aquí está el 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, depende de usted eventualmente establecer el relleno / margen / ancho del contenedor y los márgenes inferiores de la celda y similares.

¡Espero eso ayude!

Esto es bastante hacky, pero funciona para mí. Estaba tratando de lograr espacios / márgenes 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 nadie propuso la solución de crecimiento flexible en el último artículo. La idea es tener su último elemento flexible para tomar todo el lugar que pueda usando flex-grow: 1.

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

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

Nota: Esta solución no es perfecta, especialmente si tiene elementos centrados dentro de sus elementos flexibles, ya que se centrará en el último elemento posiblemente enorme.

Esta es una combinación de muchas de las respuestas, pero hace exactamente lo que estaba necesitando, es decir, alinear al último niño en un contenedor flexible a la izquierda mientras se mantiene el comportamiento de espacio intermedio (en este caso, es de tres columnas diseño).

Aquí está el marcado:

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

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

Asumiendo:

• Desea un diseño de cuadrícula de 4 columnas con ajuste
• El número de elementos no es necesariamente un múltiplo de 4

Establezca un margen izquierdo en cada elemento, excepto el primer, quinto y noveno elemento, y así sucesivamente. Si el margen izquierdo es de 10 px, entonces cada fila tendrá un margen de 30 px distribuido entre 4 elementos. El ancho porcentual para el artículo se calcula de la siguiente manera:

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

Esta es una solución decente para problemas relacionados con la última fila de 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>

Si conoce el ancho de los espacios entre los elementos en la fila y la cantidad de elementos en una fila, esto funcionaría:

Ejemplo: 3 elementos en una fila, espacio de 10 píxeles entre elementos

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

Simplemente use el truco Jquery / Javascript para agregar un div vacío:

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

Oh chico, creo que encontré una buena solución con CSS mínimo y sin JS. Echale un vistazo:

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>

¡La clave aquí es recordar que lo que estamos tratando de lograr es exactamente lo que text-align: justifyhace!

Los elementos vacíos en el HTML están ahí para que la última fila se muestre perfectamente sin cambiar la apariencia, pero puede que no sea necesario dado lo que está tratando de lograr. Para un equilibrio perfecto en cada situación, necesita al menos x-4 elementos vacíos, x es el número de elementos para mostrar, o n-2, n es el número de columna que desea mostrar.

Simplemente agregue algunos elementos falsos con las mismas propiedades, excepto la altura establecida en 0px hasta el final.

quieres alinear

usar en align-content: flex-start;lugar dejustify-content: space-between;

esto tira los elementos de la última fila hacia la izquierda y también distribuye el espacio de manera uniforme,

.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

¡La solución de danAnderson NO ES DINÁMICA. PERIODO!

cuando el ancho del elemento cambió de 25 a 28, dan anderson falla el espacio entre imágenes

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

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

Eso es lo que he estado tratando de decir. dans es hacky .....

Pude hacerlo justify-content: space-betweenen el contenedor