Modèle de boîte flexible
Sources en FR
Alsacreations.com
La Cascade.io
Sources en EN
CSS-Trick.com
OpenClassrooms.com
W3schools.com
Modèle flexible -> display
display: (par défaut)
- Premier
- Deuxième
- Troisième
display: flex
- Premier
- Deuxième
- Troisième
Empilement horizontal ou vertical -> flex-direction
flex-direction: row
- Premier
- Deuxième
- Troisième
flex-direction: row-reverse
- Premier
- Deuxième
- Troisième
flex-direction: column
- Premier
- Deuxième
- Troisième
flex-direction: column-reverse
- Premier
- Deuxième
- Troisième
Renvoi à la ligne -> flex-wrap (tester en diminuant la largeur de la fenêtre)
flex-wrap: nowrap
- Premier
- Deuxième
- Troisième
flex-wrap: wrap
- Premier
- Deuxième
- Troisième
flex-wrap: wrap-reverse
- Premier
- Deuxième
- Troisième
Empilement et renvoi à la ligne -> flex-flow = flex-direction + flex-wrap
flex-flow: row wrap
- Premier
- Deuxième
- Troisième
Alignement -> justify-content
justify-content: flex-start
- Premier
- Deuxième
- Troisième
justify-content: flex-end
- Premier
- Deuxième
- Troisième
justify-content: center
- Premier
- Deuxième
- Troisième
justify-content: space-between
- Premier
- Deuxième
- Troisième
justify-content: space-around
- Premier
- Deuxième
- Troisième
Alignement vertical -> flex-direction--column justify-content
justify-content: flex-start
- Premier
- Deuxième
- Troisième
justify-content: flex-end
- Premier
- Deuxième
- Troisième
justify-content: center
- Premier
- Deuxième
- Troisième
justify-content: space-between
- Premier
- Deuxième
- Troisième
justify-content: space-around
- Premier
- Deuxième
- Troisième
Alignement compact -> flex-direction--column align-items
align-items: flex-start
- Premier
- Deuxième
- Troisième
align-items: flex-end
- Premier
- Deuxième
- Troisième
align-items: center
- Premier
- Deuxième
- Troisième
align-items: baseline (généralement comme flex-start)
- Premier
- Deuxième
- Troisième
align-items: stretch (par défaut)
- Premier
- Deuxième
- Troisième
Alignement localisé -> flex-direction--column align-self
align-self: center
- Premier
- Deuxième
- Troisième
Alignement centré pour un seul élément -> margin
margin: auto
margin-top: auto
Ordonnance -> order
order: 1 (L'item dont le numéro est le plus bas s'affiche tout en haut de la liste)
- Premier
- Deuxième
- Troisième
- Quatrième
- Cinquième
- Sixième
Dilaté -> flex-grow
flex-grow: 0 (par défaut contracté)
- Premier
- Deuxième
- Troisième
- Premier
- Deuxième
- Troisième
flex-grow: 1 (n'importe quelle valeur > 0, donc dilaté)
- Premier
- Deuxième
- Troisième
- Premier
- Deuxième
- Troisième
Contracté -> flex-shrink
flex-shrink: 0 (donc dilaté) ???
- Premier
- Deuxième
- Troisième
- Premier
- Deuxième
- Troisième
flex-shrink: 1 (par défaut; n'importe quelle valeur > 0)
- Premier
- Deuxième
- Troisième
- Premier
- Deuxième
- Troisième
Taille initiale avant que l'espace restant ne soit distribué -> flex-basis ???
flex-basis: auto (par défaut) ???
- Premier
- Deuxième
- Troisième
- Premier
- Deuxième
- Troisième
flex-basis: 1 (par défaut; n'importe quelle valeur > 0) ???
- Premier
- Deuxième
- Troisième
- Premier
- Deuxième
- Troisième
Flexibilité -> flex
- raccourci de flex-grow
- regroupe flex-grow + flex-shrink + flex-basis
flex: 0 (par défaut contracté)
- Premier
- Deuxième
- Troisième
- Premier
- Deuxième
- Troisième
flex: 1 (n'importe quelle valeur > 0, donc dilaté)
- Premier
- Deuxième
- Troisième
- Premier
- Deuxième
- Troisième
flex: 1 et flex: 2 (1/3 et 2/3)
- Premier
- Deuxième
- Troisième
- Premier
- Deuxième
- Troisième