Mise en page de tuiles avec les flexbox en CSS

Apprenons maintenant à créer une mise en page de tuiles avec les flexbox. Pour commencer, disposons les blocs flex sur plusieurs rangées, avec trois blocs par rangée.

Pour cela, donnons au conteneur parent une largeur de 300px et flex-wrap avec la valeur wrap, et une largeur de 100px aux éléments enfants :

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

Maintenant, créons un espace entre nos blocs horizontalement. Pour cela, augmentons la largeur du parent pour donner de l'espace supplémentaire pour les marges.

Puisque nous avons trois blocs par rangée, cela signifie qu'il y a deux intervalles entre eux. Supposons que nous voulions que chaque intervalle ait une largeur de 10px. Cela signifie que la largeur du parent doit être augmentée de 20px, c'est-à-dire qu'elle ne doit pas être de 300px, mais de 320px.

Maintenant, donnons au parent des blocs la propriété justify-content avec la valeur space-between et nous obtiendrons la distance souhaitée entre les blocs :

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

Maintenant, ajoutons la même distance entre les blocs verticalement. Pour cela, on peut définir la propriété align-content avec la valeur space-between.

Cependant, pour cela, il faut donner une hauteur au parent, sinon align-content ne fonctionnera pas. Définissons la hauteur à 320px. Dans ce cas, nous aurons exactement la place pour trois rangées de blocs de 100px de haut plus deux intervalles entre les rangées de 10px.

Lançons le code :

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

Tout fonctionne à merveille, mais il y a quelques problèmes que nous examinerons dans la leçon suivante.