La Méthode CSS de Positionnement Flexbox display:flex;

Vidéos

Résumé

La propriété css display:flex; pour l'élément conteneur affiche les elements en ligne, de gauche à droite par défaut.

Propriété CSS à placer dans Élément #conteneur	Valeurs Possibles ( valeur par défaut )	Description / Résultat
\(\varnothing\) par défaut	\(\varnothing\)	Affiche éléments verticalement, de haut en bas
display	flex	Affiche éléments horizontalement, de gauche à droite
flex-direction Définit l'axe principal d'affichage (\(=\) l'axe horizontal par défaut)	row	horizontal, de gauche à droite
\(\,\)	row-reverse	horizontal, de droite à gauche
\(\,\)	column	vertical, de haut en bas
\(\,\)	column-reverse	vertical, de bas en haut
justify-content Définit le positionnement des éléments sur l'axe principal	flex-start	de gauche vers droite, espace à droite si non fini
\(\,\)	flex-end	de droite vers gauche, espace à gauche si non fini
\(\,\)	center	centré, sans espace entre les éléments
\(\,\)	space-between	centré, avec un espace entre les éléments, mais pas aux extrémités
\(\,\)	space-around	centré, avec un espace entre les éléments, et aussi aux extrémités
\(\,\)	space-evenly	centré, avec un espace ÉGAL entre les éléments, et aussi aux extrémités
align-items Définit le positionnement des éléments sur l'axe secondaire (perpendiculaire à l'axe principal)	stretch	de haut en bas, espace en bas si non fini
\(\,\)	flex-start	de haut en bas, espace en bas si non fini
\(\,\)	flex-end	de bas en haut, espace en haut si non fini
\(\,\)	center	centré sur axe secondaire, espaces autour des éléments
\(\,\)	baseline	de haut en bas, espace en bas si non fini
flex-wrap Modifie le comportement des éléments en cas d'overflow	nowrap	les éléments ne vont pas à la ligne en cas d'overflow Ils tentent de se resserer pour rester sur la même ligne
\(\,\)	wrap	les éléments vont à la ligne en cas d'overflow
\(\,\)	wrap-reverse	les éléments vont à la ligne en cas d'overflow, en sens inverse