Flexbox
C'est quoi ?
Flexbox, abréviation de "Flexible Box", est un modèle de disposition introduit dans CSS3.
Il vise à fournir une manière plus efficace de concevoir et de distribuer l'espace entre les éléments dans une structure html. Il peut le faire même lorsque la taille est inconnue ou dynamique.
De plus il offre une méthode robuste et prévisible pour créer des mises en page par rapport aux méthodes CSS traditionnelles.
Pourquoi Flexbox ?
Flexbox résout de nombreux problèmes de mise en page auxquels les développeurs sont souvent confrontés, tels que le centrage vertical, les colonnes de hauteur égale et le redimensionnement flexible des éléments.
Il offre une approche plus simple et plus intuitive pour créer des mises en page complexes, réduisant ainsi le besoin de librairies et de contournements.
Bien sûr ! Voici un tutoriel sur l'utilisation de Flexbox en CSS :
Container
Pour utiliser Flexbox, il faut définir un conteneur flex en appliquant la propriété display: flex; à un élément parent.
Cela transforme automatiquement les enfants directs de cet élément en éléments flexibles.
.conteneur-flex {
display: flex;
}
On va aussi pouvoir indiquer à notre container si son contenu peux ou non déborder.
Pour celà il faut utiliser flex-wrap.
Axes
Dans Flexbox, il existe deux axes : l'axe principal (main axis) et l'axe transversal (cross axis).
L'axe principal dépend de la direction dans laquelle les éléments flexibles sont disposés (horizontalement avec row ou verticalement avec column), tandis que l'axe transversal est perpendiculaire à l'axe principal.
flex-direction
La propriété flex-direction définit la direction dans laquelle les éléments flexibles sont disposés à l'intérieur du conteneur flex. Les valeurs possibles sont row, row-reverse, column et column-reverse.
.conteneur-flex {
display: flex;
flex-direction: row; /* Par défaut */
}
row
Les éléments sont disposés horizontalement dans le conteneur, en commençant par la gauche et allant vers la droite. L'axe principal est horizontal.
row-reverse
Les éléments sont disposés horizontalement dans le conteneur, mais en commençant par la droite et allant vers la gauche.
L'axe principal est toujours horizontal.
column
Les éléments sont disposés verticalement dans le conteneur, en commençant par le haut et allant vers le bas.
L'axe principal est vertical.
column-reverse
Les éléments sont disposés verticalement dans le conteneur, mais en commençant par le bas et allant vers le haut.
L'axe principal est toujours vertical.
justify-content
La propriété justify-content est utilisée en Flexbox pour aligner les éléments flexibles le long de l'axe principal du conteneur flex.
Elle contrôle la distribution de l'espace disponible entre les éléments flexibles ou leur alignement par rapport à l'axe principal.
flex-start
Les éléments sont alignés au début du conteneur flex.
Cela signifie qu'ils seront tous alignés sur le côté gauche du conteneur si la direction est row, ou en haut du conteneur si la direction est column.
flex-end
Les éléments sont alignés à la fin du conteneur flex.
Cela signifie qu'ils seront tous alignés sur le côté droit du conteneur si la direction est row, ou en bas du conteneur si la direction est column.
center
Les éléments sont alignés au centre du conteneur flex sur l'axe principal.
Cela signifie qu'ils seront tous centrés horizontalement si la direction est row, ou verticalement si la direction est column.
space-between
Les éléments sont répartis de manière égale le long de l'axe principal du conteneur, avec un espace vide entre chaque paire d'éléments et aucun espace avant le premier élément ou après le dernier élément.
space-around
Les éléments sont répartis de manière égale le long de l'axe principal du conteneur, avec un espace vide entre chaque élément ainsi qu'un espace égal avant le premier élément et après le dernier élément.
space-evenly
Les éléments sont répartis de manière égale le long de l'axe principal du conteneur, avec un espace égal entre chaque élément ainsi qu'un espace égal avant le premier élément et après le dernier élément.
align-items
Cette propriété permet d'aligner les éléments le long de l'axe secondaire du container.
stretch
Cette valeur est la valeur par défaut.
Les éléments flexibles sont étirés pour remplir la hauteur du conteneur flex.
Si aucun alignement n'est spécifié, les éléments s'étendront pour remplir toute la hauteur du conteneur.
flex-start
Les éléments sont alignés au début du conteneur flex sur l'axe secondaire.
Cela signifie que les éléments seront alignés en haut du conteneur si la direction est row, ou sur le côté gauche si la direction est column.
flex-end
Les éléments sont alignés à la fin du conteneur flex sur l'axe transversal.
Cela signifie que les éléments seront alignés en bas du conteneur si la direction est row, ou sur le côté droit si la direction est column.
center
Les éléments flexibles sont alignés au centre du conteneur flex sur l'axe secondaire.
Cela signifie que les éléments seront centrés verticalement si la direction est row, ou horizontalement si la direction est column.
baseline
Les éléments sont alignés sur leur ligne de base commune.
Cela signifie que les éléments seront alignés selon la ligne de base de leur contenu textuel.