CSS Flex Container

Propriétés du conteneur Flex CSS

L'élément conteneur flex peut avoir les propriétés suivantes :

  • display - Doit être défini sur flex ou inline-flex
  • flex-direction - Définit la direction d'affichage des éléments flex
  • flex-wrap - Spécifie si les éléments flex doivent se plier ou non
  • flex-flow - Propriété abrégée pour flex-direction et flex-wrap
  • justify-content - Aligne les éléments flex lorsqu'ils n'utilisent pas tout l'espace disponible sur l'axe principal (horizontalement)
  • align-items - Aligne les éléments flex lorsqu'ils n'utilisent pas tout l'espace disponible sur l'axe transversal (verticalement)
  • align-content - Aligne les lignes flex lorsqu'il y a de l'espace supplémentaire dans l'axe transversal et que les éléments flex se plient

Propriété flex-direction CSS

La propriété flex-direction spécifie la direction d'affichage des éléments flex dans le conteneur flex.

Cette propriété peut avoir l'une des valeurs suivantes :

  • row (par défaut)
  • column
  • row-reverse
  • column-reverse

Exemple

La valeur row est la valeur par défaut, et elle affiche les éléments flex horizontalement (de gauche à droite) :

.flex-container {
display: flex;
flex-direction: row;
}

Résultat :

1
2
3

Essayez-le vous-même »

Exemple

La valeur column affiche les éléments flex verticalement (de haut en bas) :

.flex-container {
display: flex;
flex-direction: column;
}

Résultat :

1
2
3

Essayez-le vous-même »

Exemple

La valeur row-reverse affiche les éléments flex horizontalement (mais de droite à gauche) :

.flex-container {
display: flex;
flex-direction: row-reverse;
}

Résultat :

1
2
3

Essayez-le vous-même »

Exemple

La valeur column-reverse affiche les éléments flex verticalement (mais de bas en haut) :

.flex-container {
display: flex;
flex-direction: column-reverse;
}

Résultat :

1
2
3

Essayez-le vous-même »

Propriété flex-wrap CSS

La propriété flex-wrap spécifie si les éléments flex doivent se plier ou non, s'il n'y a pas assez de place pour eux sur une ligne flex.

Cette propriété peut avoir l'une des valeurs suivantes :

  • nowrap (par défaut)
  • wrap
  • wrap-reverse

Exemple

La valeur nowrap spécifie que les éléments flex ne se plieront pas (c'est par défaut) :

.flex-container {
display: flex;
flex-wrap: nowrap;
}

Résultat :

1
2
3
4
5
6
7
8
9

Essayez-le vous-même »

Exemple

La valeur wrap spécifie que les éléments flex se plieront si nécessaire :

.flex-container {
display: flex;
flex-wrap: wrap;
}

Résultat :

1
2
3
4
5
6
7
8
9

Essayez-le vous-même »

Exemple

La valeur wrap-reverse spécifie que les éléments flex se plieront si nécessaire, dans l'ordre inverse :

.flex-container {
display: flex;
flex-wrap: wrap-reverse;
}

Résultat :

1
2
3

Essayez-le vous-même »

Propriété flex-flow CSS

La propriété flex-flow est une propriété abrégée pour définir à la fois flex-direction et flex-wrap .

Exemple

.flex-container {
display: flex;
flex-flow: row wrap;
}

Essayez-le vous-même »

Propriété justify-content CSS

La propriété justify-content est utilisée pour aligner les éléments flex lorsqu'ils n'utilisent pas tout l'espace disponible sur l'axe principal (horizontalement).

Cette propriété peut avoir l'une des valeurs suivantes :

  • center
  • flex-start (par défaut)
  • flex-end
  • space-around
  • space-between
  • space-evenly

Exemple

La valeur center aligne les éléments flex au centre du conteneur :

.flex-container {
display: flex;
justify-content: center;
}

Résultat :

1
2
3

Essayez-le vous-même »

Exemple

La valeur flex-start aligne les éléments flex au début du conteneur (c'est par défaut) :

.flex-container {
display: flex;
justify-content: flex-start;
}

Résultat :

1
2
3

Essayez-le vous-même »

Exemple

La valeur flex-end aligne les éléments flex à la fin du conteneur :

.flex-container {
display: flex;
justify-content: flex-end;
}

Résultat :

1
2
3

Essayez-le vous-même »

Exemple

La valeur space-around affiche les éléments flex avec de l'espace autour d'eux :

.flex-container {
display: flex;
justify-content: space-around;
}

Résultat :

1
2
3

Essayez-le vous-même »

Exemple

La valeur space-between affiche les éléments flex avec de l'espace entre eux :

.flex-container {
display: flex;
justify-content: space-between;
}

Résultat :

1
2
3

Essayez-le vous-même »

Exemple

La valeur space-evenly affiche les éléments flex avec un espace égal autour d'eux :

.flex-container {
display: flex;
justify-content: space-evenly;
}

Résultat :

1
2
3

Essayez-le vous-même »

Propriété align-items CSS

La propriété align-items est utilisée pour aligner les éléments flex lorsqu'ils n'utilisent pas tout l'espace disponible sur l'axe transversal (verticalement).

Cette propriété peut avoir l'une des valeurs suivantes :

  • center
  • flex-start
  • flex-end
  • stretch
  • baseline
  • normal (par défaut)

Dans les exemples suivants, nous utilisons un conteneur de 200 pixels de haut pour mieux démontrer la propriété align-items .

Exemple

La valeur center aligne les éléments flex au milieu du conteneur :

.flex-container {
display: flex;
height: 200px;
align-items: center;
}

Résultat :

1
2
3

Essayez-le vous-même »

Exemple

La valeur flex-start aligne les éléments flex en haut du conteneur :

.flex-container {
display: flex;
height: 200px;
align-items: flex-start;
}

Résultat :

1
2
3

Essayez-le vous-même »

Exemple

La valeur flex-end aligne les éléments flex en bas du conteneur :

.flex-container {
display: flex;
height: 200px;
align-items: flex-end;
}

Résultat :

1
2
3

Essayez-le vous-même »

Exemple

La valeur stretch étire les éléments flex pour remplir le conteneur (c'est équivalent à "normal", qui est par défaut) :

.flex-container {
display: flex;
height: 200px;
align-items: stretch;
}

Résultat :

1
2
3

Essayez-le vous-même »

Exemple

La valeur baseline aligne les éléments flex à la ligne de base du conteneur :

.flex-container {
display: flex;
height: 200px;
align-items: baseline;
}

Remarque : L'exemple utilise différentes tailles de police pour démontrer que les éléments flex sont alignés par la ligne de base du texte :

1

2

3

4

Essayez-le vous-même »

Propriété align-content CSS

La propriété align-content est similaire à align-items , mais au lieu d'aligner les éléments flex, elle aligne les lignes flex.

Cette propriété peut avoir l'une des valeurs suivantes :

  • center
  • stretch (par défaut)
  • flex-start
  • flex-end
  • space-around
  • space-between
  • space-evenly

Dans les exemples suivants, nous utilisons un conteneur de 400 pixels de haut, avec la propriété flex-wrap définie sur wrap , pour mieux démontrer la propriété align-content .

Exemple

Avec center , les lignes flex sont regroupées vers le centre du conteneur :

.flex-container {
display: flex;
height: 400px;
flex-wrap: wrap;
align-content: center;
}

Résultat :

1
2
3
4
5
6
7
8
9

Essayez-le vous-même »

Exemple

Avec stretch , les lignes flex s'étirent pour occuper l'espace restant du conteneur (c'est par défaut) :

.flex-container {
display: flex;
height: 400px;
flex-wrap: wrap;
align-content: stretch;
}

Résultat :

1
2
3
4
5
6
7
8
9

Essayez-le vous-même »

Exemple

Avec flex-start , les lignes flex sont regroupées vers le début du conteneur :

.flex-container {
display: flex;
height: 400px;
flex-wrap: wrap;
align-content: flex-start;
}

Résultat :

1
2
3
4
5
6
7
8
9

Essayez-le vous-même »

Exemple

Avec flex-end , les lignes flex sont regroupées vers la fin du conteneur :

.flex-container {
display: flex;
height: 400px;
flex-wrap: wrap;
align-content: flex-end;
}

Résultat :

1
2
3
4
5
6
7
8
9

Essayez-le vous-même »

Exemple

Avec space-between , l'espace entre les lignes flex est égal, mais le premier élément est aligné avec le bord de début du conteneur, et le dernier élément est aligné avec le bord de fin du conteneur :

.flex-container {
display: flex;
height: 400px;
flex-wrap: wrap;
align-content: space-between;
}

Résultat :

1
2
3
4
5
6
7
8
9

Essayez-le vous-même »

Exemple

Avec space-around , l'espace entre les lignes flex est égal, mais l'espace avant le premier élément et après le dernier élément est défini à la moitié de l'espace entre les lignes flex :

.flex-container {
display: flex;
height: 400px;
flex-wrap: wrap;
align-content: space-around;
}

Résultat :

1
2
3
4
5
6
7
8
9

Essayez-le vous-même »

Exemple

Avec space-evenly , les lignes flex sont réparties uniformément dans le conteneur flex, avec un espace égal en haut, en bas et entre :

.flex-container {
display: flex;
height: 400px;
flex-wrap: wrap;
align-content: space-evenly;
}

Résultat :

1
2
3
4
5
6
7
8
9

Essayez-le vous-même »

Centrage réel

L'exemple suivant montre comment résoudre un problème de style courant : le centrage réel.

Pour obtenir un centrage parfait, définissez à la fois les propriétés justify-content et align-items sur center pour le conteneur flex, et l'élément flex sera parfaitement centré à la fois horizontalement et verticalement :

Élément flex centré

Exemple

.flex-container {
display: flex;
height: 400px;
justify-content: center;
align-items: center;
}

Essayez-le vous-même »

Les propriétés du conteneur Flex CSS

Le tableau suivant répertorie toutes les propriétés du conteneur Flex CSS :

Propriété Description
align-content Modifie le comportement de la propriété flex-wrap. Elle est similaire à align-items, mais au lieu d'aligner les éléments flex, elle aligne les lignes flex
align-items Aligne verticalement les éléments flex lorsque ceux-ci n'utilisent pas tout l'espace disponible sur l'axe transversal
display Spécifie le comportement d'affichage (le type de boîte de rendu) pour un élément
flex-direction Spécifie la direction des éléments flex à l'intérieur d'un conteneur flex
flex-flow Une propriété abrégée pour flex-direction et flex-wrap
flex-wrap Spécifie si les éléments flex doivent se plier ou non, s'il n'y a pas assez de place pour eux sur une ligne flex
justify-content Aligne horizontalement les éléments flex lorsque ceux-ci n'utilisent pas tout l'espace disponible sur l'axe principal