Visualisez le conteneur flex et les éléments pour voir clairement comment les éléments enfants se positionnent dans le conteneur flex
Ajustez les propriétés flexbox pour observer différents effets d'alignement et de distribution
Direction des éléments flex
Alignement des éléments le long de l'axe transversal
Alignement et distribution le long de l'axe principal
Si les éléments passent à de nouvelles lignes
Alignement des lignes enveloppées le long de l'axe transversal
flex-direction: row | align-items: center | justify-content: flex-start | flex-wrap: nowrap | align-content: stretchConteneur flex avec des éléments de différentes tailles pour démontrer les effets d'alignement flexbox
row - Les éléments s'écoulent horizontalement (gauche à droite)row-reverse - Les éléments s'écoulent horizontalement (droite à gauche)column - Les éléments s'écoulent verticalement (haut en bas)column-reverse - Les éléments s'écoulent verticalement (bas en haut)nowrap - Les éléments restent sur une seule lignewrap - Les éléments passent à de nouvelles lignes selon les besoinswrap-reverse - Les éléments passent à de nouvelles lignes dans l'ordre inverseflex-start - Aligner les éléments au début de l'axe transversalcenter - Centrer les éléments sur l'axe transversalflex-end - Aligner les éléments à la fin de l'axe transversalstretch - Étirer les éléments pour remplir l'axe transversalbaseline - Aligner les éléments le long de leur ligne de baseflex-start - Regrouper les éléments au début de l'axe principalcenter - Centrer les éléments sur l'axe principalflex-end - Regrouper les éléments à la fin de l'axe principalspace-* - Distribuer l'espace entre les éléments