Plus généralement, on utilisera le GRID pour créer les zones qui
structurent la page du site et les FLEXbox pour répartir des éléments dans
ces différentes zones.
Appliquer un FLEX au bloc parent va avoir plusieurs propriétés par défaut
:
Les BLOCS enfants vont être disposés en colonnes et s'étendre sur toute la
hauteur du parent.
La propriété justify-content dispose les blocs
flexibles sur le main axis (axe des x en disposition rangée)
La propriété aligne-item dispose les blocs flexibles
dans la cross axis (axe des y en disposition rangée)
La propriété aligne-content va disposer les lignes
flexibles en jouant sur l'espace restant au niveau du cross axis
La propriété flex-direction va inverser le sens
d'alignement des blocs enfants
La propriété gap --> va créer un espacement entre
chaque bloc enfant
Exemples
justify-content: center --> centre les éléments enfants sur l'axe X
justify-content: start / end --> place les éléments enfants au début / à
la fin de l'axe X
justify-content: space-between / space-around --> réparti les espaces
entre / autour des éléments enfants sur l'axe X
align-item: start / strech --> va limiter ou étendre la hauteur des
enfants
align-item: center --> centrer les éléments enfants sur l'axe Y
flex-direction: column --> fais passer l'alignement des blocs en colonne
et inverse les axis
1
2
3
FLEX-WRAP par défaut sur nowrap, entraîne un dépassement des blocs
enfants si on réduit la largeur de l'écran.
La propriété flex-wrap: wrap --> permet le passage à la
ligne des blocs enfants.
La propriété align-content: space-between --> reparti
l'espace restant entre les blocs enfants.
1
2
3
4
5
6
7
8
9
2. Les propriétés des FLEX-ITEMS
La propriété align-self permet de modifier la position
du bloc enfant nth-child(2)
La propriété flex-shrink: 1 limite la largeur des blocs
enfants par rapport à la FLEXbox
La propriété flex-grow: 1 réparti la largeur des blocs
enfants sur l'espace restant.
(On peut utiliser flex-grow: 2 pour donner plus d'espace à un élément en
particulier)
