FlexBox
Théorie
Propriété indispensable sur l'élément englobant les enfants à piloter. Elle active la propriété flex sur tous les enfants du conteneur.
.selecteur {display : flex ou inline-flex;}
Cela placera tous les enfants côte à côte en essayant de remplir tout l'espace. Flex définit le conteneur comme élément de type block. Inline-flex définit le conteneur comme élément de type inline.
Propriété d'ordonnancement permettant de classer les éléments suivant un ordre défini sans modifier le fichier html.
.selecteur {order : nombre;}
Sa valeur initiale est égale à 0. Les valeurs les plus fortes se trouveront en fin de pile. On peut utiliser un nombre positif ou négatif.
Flex-grow : C'est une valeur sans unité qui représente la proportion de place qu'un item prendra au final par rapport à la place disponible.
.selecteur {
flex-grow : x; /* assigne le nombre x comme proportion à l'item sélectionné */
}
Flex-shrink : Donne la possibilité à un item de se rétrécir selon les besoins.
.selecteur {
flex-shrink : x; /* assigne le nombre x comme facteur de réduction en cas de besoin */
}
Flex-basis : taille initiale de l'élément avant que l'espace restant ne soit défini.
.selecteur {
flex-basis : x; /* assigne le nombre x comme taille initiale de l'item sélectionné */
}
Flex : Ça remplace respectivement flex-grow, flex-shrink, et flex-basis.
La propriété flex-direction permet de modifier l'axe d'alignement des items (vertical / horizontal). Elle permet aussi d'inverser l'ordre des items.
- column : positionne en colonne des items qui sont initialement disposés à l'horizontale.
- column-reverse : positionne en colonne des items qui sont initialement disposés à l'horizontale et inverse leur ordre
- row : positionne à l'horizontale des items qui sont initialement disposés en colonne.
- row-reverse : positionne à l'horizontale des items qui sont initialement disposés en colonne et inverse leur ordre.
.selecteur {flex-direction : column ou column-reverse ou row ou row-reverse;}
La propriété flex-wrap permet de chosir si l'on souhaite que les items s'affichent sur une ou plusieurs ligne(s). Elle permet aussi de choisir si les derniers items iront à la ligne d'en dessous ou d'au dessus (ou à droite ou à gauche si les items
sont positionnés en colonnes).
- no-wrap : Les items sont disposés en une seule ligne (au besoin, ils sont compressés pour y tenir).
- wrap : active une fonction "retour à la ligne" comme dans un logiciel de traitement de texte classique.
- wrap-reverse : active le retour à la ligne et les items suivants sont positionnés au dessus des premiers (ou à gauche si les items sont positionnés en colonnes.
.selecteur {flex-wrap : wrap ou no-wrap;}
Ces deux propriétés peuvent être combinées à l'aide de la propriété flex-flow. il suffit de lui appliquer l'argument de flex-direction suivi de l'argument de flex-wrap.
.selecteur {flex-flow : column-reverse wrap;}
Flex-start, center et flex-end sont respectivement les propriétés qui permettent de mettre les éléments flex au début, au centre ou à la fin de l'axe principal, de plus space-between permet de répartir l'espace restant entre les éléments flex et space-around permet de répartir cet espace tout autour des-dits éléments.
.selecteur {justify-content : space-around;}
Très exactement la même chose que pour justify-content mais sur l'axe secondaire => flex-start, center et flex-end sont respectivement les propriétés qui permettent de mettre les éléments flex au début, au centre ou à la fin de l'axe secondaire, de plus space-between permet de répartir l'espace restant entre les éléments flex et space-around permet de répartir cet espace tout autour des-dits éléments.
.selecteur {align-content : flex-end;}
C'est un align-content, qui s'applique à un item visé.
.selecteur {align-items : center;}
A les mêmes propriétés que Align-Items mais elle permet de gérer l'alignement d'un seul élément de manière indépendante.
.selecteur {align-self : auto ou flex-start ou flex-end ou center ou baseline ou stretch;}