Comprendre et utiliser Flexbox en CSS
Flexbox est un système de mise en page introduit en CSS3 qui permet de disposer les éléments d'un conteneur de manière efficace, même lorsque la taille de ces éléments est inconnue ou dynamique.
Il fonctionne en appliquant des propriétés à un conteneur parent qui affectent la disposition de ses éléments enfants. Il se distingue par sa capacité à gérer à la fois l'alignement horizontal et vertical, et à réorganiser dynamiquement les éléments en fonction de l'espace disponible.
Propriétés appliquées au conteneur parent
flex-direction
La propriété flex-direction contrôle la direction dans laquelle les éléments sont placés dans le conteneur.
row (par défaut) |
Les éléments sont placés horizontalement, de gauche à droite. |
row-reverse |
Les éléments sont placés horizontalement, mais dans l'ordre inverse, de droite à gauche. |
column |
Les éléments sont disposés verticalement, de haut en bas. |
column-reverse |
Les éléments sont disposés verticalement, mais dans l'ordre inverse, de bas en haut |
justify-content
La propriété justify-content contrôle l'alignement des éléments enfants le long de l'axe principal du conteneur. L'axe principal dépend de la valeur de flex-direction :
- Si
flex-directionest défini surrowourow-reverse, l'axe principal est horizontal (axe X). - Si
flex-directionest défini surcolumnoucolumn-reverse, l'axe principal est vertical (axe Y).
flex-start (par défaut) |
Les éléments s'alignent au début du conteneur (à gauche pour l'axe X, en haut pour l'axe Y). |
flex-end |
Les éléments s'alignent à la fin du conteneur (à droite pour l'axe X, en bas pour l'axe Y). |
center |
Les éléments sont centrés le long de l'axe principal. |
space-between |
Les éléments sont espacés avec un espace égal entre eux, mais pas aux extrémités. |
space-around |
Les éléments sont espacés avec un espace égal autour d'eux (y compris aux extrémités). |
align-items
La propriété align-items contrôle l'alignement des éléments enfants sur l'axe secondaire (perpendiculaire à l'axe principal).
- Si
flex-directionest défini surrowourow-reverse, l'axe secondaire est vertical (axe Y). - Si
flex-directionest défini surcolumnoucolumn-reverse, l'axe secondaire est horizontal (axe X).
flex-start |
Les éléments s'alignent au début de l'axe secondaire (haut ou gauche). |
flex-end |
Les éléments s'alignent à la fin de l'axe secondaire (bas ou droite). |
center |
Les éléments sont centrés sur l'axe secondaire. |
stretch (par défaut) |
Les éléments sont étirés pour remplir l'espace disponible le long de l'axe secondaire. |
flex-wrap
La propriété flex-wrap détermine si les éléments flex doivent être répartis sur plusieurs lignes lorsque l'espace disponible est insuffisant. Elle accepte les valeurs suivantes :
nowrap (par défaut) |
Les éléments sont maintenus sur une seule ligne, même s'ils doivent se chevaucher pour tenir dans le conteneur. |
ABCDEF |
wrap |
Les éléments se répartissent sur plusieurs lignes si nécessaire, afin d'éviter qu'ils ne se chevauchent. |
A B C D E F |
wrap-reverse |
Les éléments se répartissent également sur plusieurs lignes, mais dans l'ordre inverse. |
D E F A B C |
flex-flow
La propriété flex-flow est un raccourci qui permet de définir à la fois flex-direction et flex-wrap en une seule déclaration. Elle accepte deux valeurs séparées par un espace :
- La première valeur correspond à
flex-direction. - La deuxième valeur correspond à
flex-wrap.
align-content
La propriété align-content contrôle l'espacement entre les lignes de l'élément flex, lorsque plusieurs lignes sont présentes. Elle définit la manière dont l'espace est réparti entre ces lignes dans le conteneur. Les valeurs disponibles sont les suivantes :
flex-start |
Les lignes sont regroupées en haut du conteneur. |
flex-end |
Les lignes sont regroupées en bas du conteneur. |
center |
Les lignes sont regroupées au centre vertical du conteneur. |
space-between |
Les lignes sont espacées de manière égale, avec le premier et le dernier alignés aux bords du conteneur. |
space-around |
Les lignes sont espacées de manière égale, avec un espace autour de chaque ligne. |
stretch (par défaut) |
Les lignes sont étendues pour occuper tout l'espace disponible dans le conteneur. |
Pour clarifier la distinction entre les deux propriétés : align-content et align-items
align-contentcontrôle l'espacement entre les différentes lignes d'éléments.align-itemscontrôle l'alignement des éléments au sein de chaque ligne, en fonction de l'axe secondaire du conteneur.
align-content n’a d’effet que lorsqu'il y a plusieurs lignes d’éléments dans le conteneur. Si les éléments sont sur une seule ligne, cette propriété n'a aucun impact.
Propriétés appliquées à des éléments enfants
order
Dans certains cas, inverser l'ordre des éléments dans une rangée ou une colonne avec la propriété flex-direction ne suffit pas. Pour ajuster l'ordre d'un élément particulier, on peut utiliser la propriété order.
Par défaut, tous les éléments ont une valeur order de 0, mais il est possible de lui attribuer une valeur numérique, qu'elle soit positive ou négative, afin de modifier leur position dans l'ordre d'affichage.
Voici un exemple simple pour illustrer son utilisation :
Si nous souhaitons que le cercle vert apparaisse dans le carré vert, nous pouvons appliquer ce style :
.green {
order: 1;
}
align-self
Cette propriété fonctionne de manière similaire à align-items, mais contrairement à align-items, align-self s'applique uniquement à l'élément ciblé, et non à l'ensemble des éléments enfants. Elle accepte les mêmes valeurs que align-items, permettant ainsi de personnaliser l'alignement vertical (ou horizontal, selon l'orientation) d'un élément spécifique, indépendamment des autres éléments du conteneur.
Aucune page ou chapitre n'a été ajouté à cet article.