Le reste de la formation est réservé aux inscrits.
S'inscrire gratuitement.container {
display: flex;
justify-content: center; /* horizontal */
align-items: center; /* vertical */
}
Flexbox a remplacé les tableaux, les floats et les positionnements approximatifs. C'est l'outil de mise en page standard depuis 2015.
| Propriété | Valeurs clés | Effet |
|---|---|---|
| justify-content | flex-start, center, flex-end, space-between, space-around | Alignement horizontal (axe principal) |
| align-items | stretch, center, flex-start, flex-end | Alignement vertical (axe secondaire) |
| flex-direction | row, column, row-reverse | Direction du flux |
| flex-wrap | nowrap, wrap | Retour à la ligne |
body { display: flex; justify-content: center; align-items: center; min-height: 100vh; }. La carte est parfaitement centrée horizontalement et verticalement, quel que soit l'écran. Fini les margin: auto approximatifs.