Comprendre le Conteneur Flex
Lorsque vous definissez display: flex sur un element, il devient un conteneur flex et ses enfants directs deviennent des items flex. Le conteneur controle l'axe principal (determine par flex-direction) et l'axe transversal (perpendiculaire a l'axe principal). Toutes les proprietes d'espacement et d'alignement operent le long de ces deux axes.
Alignement de l'Axe Principal avec justify-content
justify-content distribue les items le long de l'axe principal. flex-start regroupe les items au debut ; flex-end a la fin ; center les groupe au milieu. space-between met un espace egal entre les items ; space-around ajoute un espace egal autour de chaque item ; space-evenly distribue des ecarts identiques entre et autour des items.
Alignement de l'Axe Transversal avec align-items
align-items positionne les items le long de l'axe transversal. stretch remplit toute la dimension transversale ; flex-start aligne au bord de depart ; flex-end au bord de fin ; center place les items au milieu ; baseline aligne les items par leurs lignes de base de texte, ce qui est utile lorsque les items ont des tailles de police differentes.
Dimensionnement des Items Flex : grow, shrink, basis
flex-grow controle comment les items s'etendent pour remplir l'espace supplementaire. flex-shrink controle comment les items se contractent lorsque l'espace est insuffisant. flex-basis definit la taille initiale avant de grandir ou de retrecir. Le raccourci flex: 1 1 0 signifie grandir egalement, retrecir egalement, en commencant a zero.
