Aide-mémoire de mise en page CSS Flexbox

Le modèle de mise en page Flexbox (Flexible Box) offre un moyen plus efficace d’aligner et de répartir les éléments à l’intérieur d’un conteneur, même lorsque leur taille est inconnue ou dynamique.

Conteneur Flex

Set on parent: display: flex; or display: inline-flex;

Propriété	Description	Valeurs Courantes
`flex-direction`	Direction de l’axe principal	`row`, `row-reverse`, `column`, `column-reverse`
`flex-wrap`	Retour à la ligne ou non	`nowrap`, `wrap`, `wrap-reverse`
`flex-flow`	Raccourci pour direction et enroulement	`row wrap`
`justify-content`	Alignement sur l’axe principal	`flex-start`, `flex-end`, `center`, `space-between`, `space-around`
`align-items`	Alignement sur l’axe transversal	`flex-start`, `flex-end`, `center`, `baseline`, `stretch`
`align-content`	Alignement de plusieurs lignes sur l’axe transversal	`flex-start`, `flex-end`, `center`, `space-between`, `stretch`

Éléments Flex

Set on children:

Propriété	Description	Par Défaut
`order`	Ordre de rangement (les petites valeurs en premier)	`0`
`flex-grow`	Facteur d’agrandissement (si espace suffisant)	`0`
`flex-shrink`	Facteur de réduction (si espace insuffisant)	`1`
`flex-basis`	Taille de base avant distribution de l’espace	`auto`
`flex`	Raccourci pour grow, shrink et basis	`0 1 auto`
`align-self`	Permet un alignement différent pour un seul élément	`auto`

Concepts Clés

Axe Principal (Main Axis): Horizontal par défaut, défini par flex-direction.
Axe Transversal (Cross Axis): La direction perpendiculaire à l’axe principal.

Exemples de Scénarios

Centrage horizontal et vertical

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Répartition à largeur égale

.item {
  flex: 1; /* Occuper uniformément l'espace restant */
}

Alignement aux deux extrémités

.navbar {
  display: flex;
  justify-content: space-between;
}