Mise en page avec Flexbox

Activer Flexbox

.conteneur {
display: flex;
}

Cette seule ligne aligne les enfants directs de .conteneur sur une ligne, côte à côte, sans qu’aucun autre réglage ne soit nécessaire pour ce comportement de base.

Répartir sur l’axe principal

.conteneur {
display: flex;
justify-content: center;        /* centre les enfants */
/* autres valeurs frequentes : flex-start, flex-end, space-between, space-around */
}

Aligner sur l’axe perpendiculaire

.conteneur {
display: flex;
align-items: center;   /* centre verticalement, par defaut sur l'axe perpendiculaire */
}

À toi de jouer

Rends .conteneur flexible et centre ses enfants horizontalement.

<!-- HTML -->
<div class="conteneur">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

/* CSS */
.conteneur {
/* Complete le style ici */
}