Flexbox en CSS — Correction d'exercices

Voici des propositions de solutions en mode console (via readline()). N’hésite pas à les adapter.

#1 — Direction de l'axe

Aligne les enfants en colonne au lieu de ligne.

Voir le corrigé

.container {
    display: flex;
    flex-direction: column;
}

Centre les éléments sur l'axe principal (horizontal par défaut).

Voir le corrigé

.container {
    display: flex;
    justify-content: center;
}

Aligne les éléments au centre sur l'axe secondaire (vertical par défaut).

Voir le corrigé

.container {
    display: flex;
    align-items: center;
}

Autorise les éléments à passer à la ligne s'ils n'ont plus de place.

Voir le corrigé

.container {
    display: flex;
    flex-wrap: wrap;
}

Fais en sorte qu'un élément enfant prenne tout l'espace restant disponible.

Voir le corrigé

.item-grow {
    flex-grow: 1;
}