Flex
Base
flex-container : créer le context général d'affichage pour ses enfants
flex-item : enfants direct du conteur.
Propriété sur le parent
Display
display : flex = deveint un flex-container et ce comporte comme un block
- A
- B
- C
- D
- E
- F
display : inline-flex = flex-container et ce comporte comme un inline-block
Flex-Direction
flex-direction : row Alignement horizontal des flex-item (valeur par défault)
- A
- B
- C
- D
- E
- F
flex-direction : row-reverse Alignement horizontal inversé
- A
- B
- C
- D
- E
- F
flex-direction : column Alignement vertical
- A
- B
- C
- D
- E
- F
flex-direction : column-reverse Alignement vertical inversé
- A
- B
- C
- D
- E
- F
Flex-Wrap
flex-wrap : nowrap Les éléments flex-item ne passent pas à la ligne (valeur par défault)
- A
- B
- C
- D
- E
- F
flex-wrap : wrap Les éléments flex-item passent à la ligne
- A
- B
- C
- D
- E
- F
flex-wrap : wrap-reverse Les éléments flex-item passent à la ligne dans un sens inversé
- A
- B
- C
- D
- E
- F
Flex-flow
flex-flow : row nowrap Propriété raccourcie de flex-direction et flex-wrap, toutes les associations sont possible celle ci est la valeur par défault
- A
- B
- C
- D
- E
- F
Justify-Content
justify-content: flex-start Elément positionné au début de l'axe principale (valeur par défault)
- A
- B
- C
- D
- E
- F
justify-content: flex-end Elément positionné à la fin de l'axe principale
- A
- B
- C
- D
- E
- F
justify-content: center Elément centré dans l'axe principale
- A
- B
- C
- D
- E
- F
justify-content: space-between Eléméent répartie de façon "justifié"
- A
- B
- C
- D
- E
- F
justify-content: space-around Variante de répartition justifié
- A
- B
- C
- D
- E
- F
Align-Items
align-items: stretch Elément étirés dans l'espace disponible (valeur par défault)
- A
- B
- C
- D
- E
- F
align-items: flex-start Elément disposés au début de l'axe secondaire
- A
- B
- C
- D
- E
- F
align-items: flex-end Elément disposés à la fin de l'axe secondaire
- A
- B
- C
- D
- E
- F
align-items: center Eléméent centré dans l'axe secondaire
- A
- B
- C
- D
- E
- F
align-items: baseline Element aligné sur la ligne de base du text
- A
- B
- C
- D
- E
- F
Align-Content
Ne fonctionne que si le contneur autorise la passage à la ligne (flex-wrap : wrap
align-content: stretch Les rangés occupent tous l'espace disponible (valeur par défault)
- A
- B
- C
- D
- E
- F
align-content: flex-start Les rangées s'affichent au début du flex-container
- A
- B
- C
- D
- E
- F
align-content: flex-end Les rangées s'affichent à la fin du flex-container
- A
- B
- C
- D
- E
- F
align-content: center Les rangées s'affichent au centre du flex-container
- A
- B
- C
- D
- E
- F
align-content: space-between L'espace entre les rangées est répartie de façon "justifié"
- A
- B
- C
- D
- E
- F
align-content: space-around Variante de space-between
- A
- B
- C
- D
- E
- F
Propriété sur les enfants
Order
orderPermet de réordonner les éléments, l'élément ayant le chiffre le plus grand sera à la fin et les chiffres négatif seront prioritére
- A
- B
- C
- D
- E
- F
Align-Self
Permet de distinguer l'alignement d'un item de ses fréres
align-self: autoAdopte l'alignement général définit par align-items (valeur par défault)
- A
- B
- C
- D
- E
- F
align-self: stretch Elément étirés dans l'espace disponible
- A
- B
- C
- D
- E
- F
align-self: flex-start Elément disposés au début de l'axe secondaire
- A
- B
- C
- D
- E
- F
align-self: flex-end Elément disposés à la fin de l'axe secondaire
- A
- B
- C
- D
- E
- F
align-self: center Eléméent centré dans l'axe secondaire
- A
- B
- C
- D
- E
- F
align-self: baseline Element aligné sur la ligne de base du text
- A
- B
- C
- D
- E
- F
Flex
prorpiété contenant les trois suivant et s'appliquant aux flex-item
flex-grow permet a un flex-item de s'élargir pour occuper une proportion de l'espace libre restant, pour rendre un elemnt flexible lui attribuer un chiffre supérieur à zéro
flex-shrinkPermet à un flex-item de se compreser automatoiquemnt s'in n'y a pas assez de place
flex-basis taille initial de l'élément avnat que l'espace ne soit distribué
- A
- B
- C
- D
- E
- F