Une Flexbox, c'est une boîte conteneur que l'on appelle le flex-container et qui contient d'autres boîtes, que l'on appelle les flex-items. La spécificité réside dans le fait que, le programmeur, à travers les propriétés du flex-container va avoir un contrôle quasi total, sur la répartition des flex-items dans ce dernier.
Par contrôle, on entend, la répartition des flex-items dans le flex-container, leur taille, leur position, leur étirement, leur rétrécissement, leur ordre, le retour à la ligne ect. Le contrôle se limite aux flex-items pas à leur contenu.
Le fait d'avoir un contrôle total entraîne une certaine complexité, avec un nombre important de propriétés CSS et de valeurs différentes.
La répartition des flex-items se fait selon deux axes, l'axe principal et l'axe secondaire. Par défaut, l'axe principal est horizontal et la distribution des flex-items se fait de la gauche vers la droite. L'axe secondaire est toujours à angle droit avec l'axe principal et la distribution se fait par défaut du haut vers le bas. On retrouve ici, le sens de l'écriture du texte sur une page écrite par exemple en français.
Suivant les valeurs de la propriété flex-direction l'axe principal se trouve orienté de cette manière.
1 2 3
Ci-dessous, je teste les quatre valeurs de la propriété flex-direction. Soit row puis row-reverse puis column puis column-reverse.
Dans cet exemple, la propriété flex-direction a la valeur row, et les flex-items sont placés sur le côté gauche du flex-container, sur l'origine de l'axe principal.
Tester le code
Dans cet exemple, la propriété flex-direction a la valeur row-reverse, et les flex-items sont placés sur le côté droit du flex-container, sur l'origine de l'axe principal. Cette fois, l'axe principal est dirigé de la droite vers la gauche.
Tester le code
Dans cet exemple, la propriété flex-direction a la valeur column, et les flex-items sont placés en haut du flex-container, sur l'origine de l'axe principal. Cette fois, l'axe principal est dirigé du haut vers le bas.
Tester le code
Dans cet exemple, la propriété flex-direction a la valeur column-reverse, et les flex-items sont placés en bas du flex-container, sur l'origine de l'axe principal. Cette fois, l'axe principal est dirigé du bas vers le haut.
