Flexbox CSS
Version beta M. GNING, ingénieur en informatique 2023
Introduction à flexbox
Flexbox est un modèle de mise en page CSS qui a révolutionné la façon dont
nous créons des designs web. Il offre un contrôle puissant sur la disposition
des éléments à l'intérieur d'un conteneur, en particulier dans un agencement
en ligne, comme une rangée ou une colonne. L'objectif principal de Flexbox
est de rendre la création de mises en page responsives, flexibles et faciles à
gérer, en éliminant la nécessité de nombreux ajustements fastidieux de
marges et de positions.
2
M. GNING,
M. GNING, ingénieur
ingénieur en informatiqueen informatique
Base de flexbox
Un conteneur est l’élément HTML qui englobe les éléments flexibles à l’intérieur de lui
Utilisation de display: flex; pour définir un conteneur flexbox
Axe transversal ou secondaire
Propriété css : align-items
container
Axe principal Élément Élément Élément
flexible flexible flexible
Propriété css
justify-content
3
M. GNING, ingénieur en informatique
Base de flexbox
Un conteneur est l’élément HTML qui englobe les éléments flexibles à l’intérieur de lui
Utilisation de display: flex; pour définir un conteneur flexbox
Axe transversal ou secondaire
Élément Propriété css
container flexible
justify-content
Axe principal Élément
flexible
Propriété css : align-items
Élément
flexible
4
M. GNING, ingénieur en informatique
Propriété du conteneur : flex-direction
La propriété CSS flex-direction permet de contrôler l'orientation de la disposition des
éléments dans le conteneur.
flex-direction: column flex-direction: column-reverse
flex-direction: row
1 4
1 2 3 4
2 3
flex-direction: row-reverse
3 2
4 3 2 1
4 1
5
M. GNING, ingénieur en informatique
Propriété du conteneur : flex-direction
valeur description
row (valeur par défaut) Cette valeur organise les éléments flexibles horizontalement dans le conteneur,
de gauche à droite. L'axe principal est horizontal, et l'axe transversal est vertical.
row-reverse Cette valeur est similaire à row, mais les éléments flexibles sont disposés de
droite à gauche, inversant leur ordre d'apparition dans le code HTML.
column Cette valeur organise les éléments flexibles verticalement dans le conteneur, de
haut en bas. L'axe principal est vertical, et l'axe transversal est horizontal.
row-reverse Comme column, mais les éléments flexibles sont disposés de bas en haut,
inversant leur ordre d'apparition dans le code HTML.
6
M. GNING, ingénieur en informatique
Propriété du conteneur : flex-wrap
La La propriété CSS flex-wrap est utilisée pour contrôler le comportement des éléments
flexibles lorsqu'ils atteignent la limite de leur conteneur Flexbox en termes de largeur ou
de hauteur. flex-wrap détermine si les éléments flexibles doivent rester sur une seule ligne
(ou colonne) et déborder du conteneur ou s'ils doivent être "enroulés" (retournés) sur une
nouvelle ligne (ou colonne) lorsque l'espace est insuffisant pour les contenir.
flex-wrap: nowrap flex-wrap: wrap flex-wrap: wrap-reverse
1 2 3 4 5 6 7 8 9 1 2 3 7 8 9
4 5 6 4 5 6
7 8 9 1 2 3
7
M. GNING, ingénieur en informatique
Propriété du conteneur : flex-wrap
La La propriété CSS flex-wrap est utilisée pour contrôler le comportement des
éléments flexibles lorsqu'ils atteignent la limite de leur conteneur Flexbox en termes
de largeur ou de hauteur.
valeur Description
Les éléments flexibles ne sont pas autorisés à s'enrouler sur une nouvelle ligne
nowrap
ou colonne. Ils resteront sur la même ligne (ou colonne) même s'ils débordent
(valeur par défaut)
du conteneur.
Les éléments flexibles sont autorisés à s'enrouler sur une nouvelle ligne (ou
wrap colonne) s'ils ne peuvent pas tous tenir sur la même ligne. Ils occuperont autant
de lignes ou de colonnes que nécessaire pour s'ajuster.
Cette valeur organise les éléments flexibles verticalement dans le conteneur, de
wrap-reverse
haut en bas. L'axe principal est vertical, et l'axe transversal est horizontal.
8
M. GNING, ingénieur en informatique
Alignement et justification: justify-content
justify-content: flex-start justify-content: center
1 2 3 4 1 2 3 4
justify-content: flex-end justify-content: space-between
1 2 3 4 1 2 3 4
justify-content: space-evenly justify-content: space-around
1 2 3 4 1 2 3 4
9
M. GNING, ingénieur en informatique
Alignement et justification: justify-content
valeur Description
flex-start
Les éléments flexibles sont alignés en début de ligne du conteneur.
(valeur par défaut)
flex-end Les éléments flexibles sont alignés en fin de ligne du conteneur.
center Les éléments flexibles sont centrés horizontalement dans le conteneur.
Les éléments flexibles sont répartis uniformément le long de l'axe principal,
space-between
avec un espace nul à l'extrémité initiale et finale.
Les éléments flexibles sont répartis uniformément le long de l'axe principal,
space-around
avec un espace égal autour de chaque élément.
Les éléments flexibles sont répartis uniformément le long de l'axe principal,
space-evenly avec un espace égal autour de chaque élément, ainsi qu'à l'extrémité initiale et
finale.
10
M. GNING, ingénieur en informatique
Alignement et justification: align-items
align-items: flex-start align-items: stretch
1 4
2
3 1 2 3 4
align-items: flex-end align-items : center
3 1 2 3 4
2
1 4
11
M. GNING, ingénieur en informatique
Alignement et justification: align-items
valeur Description
flex-start
Les éléments flexibles sont alignés au début de l'axe transversal.
(valeur par défaut)
flex-end Les éléments flexibles sont alignés à la fin de l'axe transversal.
center Les éléments flexibles sont centrés le long de l'axe transversal.
baseline Les éléments flexibles sont alignés sur leur ligne de base commune.
Les éléments flexibles s'étirent pour occuper toute la hauteur de l'axe
Stretch
transversal.
12
M. GNING, ingénieur en informatique
flex-direction + flex-wrap = flex-flow
La propriété CSS flex-flow est en réalité une propriété abrégée qui combine
deux propriétés Flexbox : flex-direction et flex-wrap. Elle permet de définir à
la fois la direction principale de la disposition des éléments flexibles et si ces
éléments sont autorisés à s'enrouler sur une nouvelle ligne (ou colonne) en
fonction de l'espace disponible.
13
M. GNING, ingénieur en informatique