Mosaico con flexboxes en CSS

Ahora aprendamos a crear un mosaico con flexboxes. Primero, organicemos los bloques flex en varias filas, con tres bloques por fila.

Para ello, establezcamos el ancho del contenedor flex en 300px y flex-wrap en el valor wrap, y un ancho de 100px a los elementos hijos:

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

.parent {
	display: flex;
	flex-wrap: wrap;
	width: 300px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Ahora agreguemos espacio horizontal entre nuestros bloques. Para ello, aumentemos el ancho del contenedor para dar espacio adicional para los márgenes.

Como tenemos tres bloques por fila, resulta que hay dos espacios entre ellos. Supongamos que queremos que cada espacio tenga un ancho de 10px. Resulta que el ancho del contenedor necesita aumentarse en 20px, es decir, hacerlo no de 300px, sino de 320px.

Ahora asignemos al contenedor de los bloques justify-content con el valor space-between y obtendremos la distancia deseada entre los bloques:

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

.parent {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 320px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Ahora agreguemos la misma distancia entre los bloques también verticalmente. Para ello, podemos establecer la propiedad align-content en el valor space-between.

Sin embargo, para esto es necesario definir una altura al contenedor, de lo contrario align-content no funcionará. Establezcamos la altura en 320px. En este caso, cabrán exactamente tres filas de bloques de 100px de alto más dos espacios entre filas de 10px.

Ejecutemos:

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

.parent {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-content: space-between;
	flex-wrap: wrap;
	width: 320px;
	height: 320px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Todo funciona maravillosamente, pero hay algunos problemas que consideraremos en la siguiente lección.