Pequeño truco para alinear a la izquierda los elementos de la última fila con Flexbox

Si adoras trabajar con Flexbox, probablemente hayan encontrado en el pasado el problema de los elementos en la última fila que no se comportan del todo bien. Lo que significa que no tienen una alineación a la izquierda.

Bueno, hay una manera muy simple de tener una alineación izquierda perfecta con una propiedad html simple: aria-hidden

Esta propiedad indicará que tanto el elemento como sus hijos no serán visibles ni perceptibles por el usuario o el lector. Para obtener más información, puede visitar el sitio web de W3.

Aquí tienes un html simple para crear unos cuadrados azules con los que practicar:

<div class="container">
<div class="containerItem"></div>
<div class="containerItem"></div>
<div class="containerItem"></div>
<div class="containerItem"></div>
<div class="containerItem"></div>
<div class="containerItem"></div>
&lt;!-- marca aquí <i aria-hidden="true"></i> para convertirlos en una columna --&gt;
<i aria-hidden="true"></i>
<i aria-hidden="true"></i>
<i aria-hidden="true"></i>
</div>

En el código anterior, tienes 6 divisiones vacías para crear los cuadrados y debajo 3 divisiones con la etiqueta <i> adjunto de la propiedad aria-hidden establecida en verdadero / true.

Estas etiquetas <i> corresponden a los elementos cuadrados que podrías necesitar colocar para completar la última fila.

Necesitas tantas etiquetas <i> como lugares haya en la fila, menos uno. Necesitarás algo como así:

.container {
display: flex;
flex-idrection: row;
flex-wrap: wrap;
margin: 0 30px;

justify-content: center;

&Item {
display: block;
background-color: #blue;
border-radius: 10px;
width: 250px;
height: 250px;
margin: 20px;
}

i {
width: 250px;
height: 250px;
margin: 20px;
}
}

En este código se da al contenedor de las filas diferentes propiedades de Flexbox, incluidas justify-content: center. Pero este truco funciona con otros valores como space-betweeno space-around.

Lo importante aquí es que debes dar a tus etiquetas <i> el mismo ancho, alto y márgene que a tus etiquetas articles.