Le propriétés liés au conteneur => display: flex;

L'axe principal est l'horizontal (axe des x) et l'axe secondaire est le vertical (axe y).

Axe principal horizontal

Par défaut, les items sont disposés en lignes. Seul l'item 3 a une hauteur et une largeur définies à 100px

1 Axe principal (les lignes) => flex-direction: row;

Les items débordent du conteneur (pas de retour à la ligne). La largeur des items est la plus petite possible (ici le mot Item).

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
code 01

2 Axe principal (avec retour à la ligne des items) => flex-wrap: wrap;

Les items retournent à la ligne. Ils sont contenus dans le conteneur. Ils se placent de la gauche vers la droite.

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
code 02

3 Les items sont inversés sur l'axe principal => flex-direction: row-reverse;

Les items débordent du conteneur (pas de retour à la ligne). Ils sont rangés de la droite vers la gauche.

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
code 03

4 Les items sont inversés sur l'axe principal avec retour à la ligne => flex-flow: row-reverse wrap;

Propriété générique réunissant flex-direction et flex-wrap.

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
code 04

5 Les items sont alignés sur l'axe principal avec retour à la ligne => flex-flow: row wrap;

Les items sont disposés à droite sur l'axe principal (axe x) => justify-content: flex-end;

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
code 05

6 Les items sont alignés sur l'axe principal avec retour à la ligne => flex-flow: row wrap;

Les items sont centrés sur l'axe principal (axe x) => justify-content: center;

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
code 06

7 Les items sont alignés sur l'axe principal avec retour à la ligne => flex-flow: row wrap;

Les items sont répartis équitablement sur l'axe principal (axe x). À chaque extrémité, entre le bord du conteneur et le premier/dernier élément, on a la moitié de l'espace appliqué entre chaque élément => justify-content: space-around;

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
code 07

8 Les items sont alignés sur l'axe principal avec retour à la ligne => flex-flow: row wrap;

Les items sont répartis équitablement sur l'axe principal (axe x). Le premier item est aligné sur le début du conteneur, et le dernier item est aligné sur la fin du conteneur => justify-content: space-between;

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
code 08

9 Les items sont alignés sur l'axe principal avec retour à la ligne => flex-flow: row wrap;

Les items sont répartis équitablement sur l'axe principal (axe x). Tous les items sont séparés par le même espace => justify-content: space-evenly;

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
code 09

10 Les items sont disposés en ligne avec retour à la ligne => flex-flow: row wrap;

Les items sont alignés sur l'axe secondaire (axe y). Les items démarrent au début de l'axe secondaire (axe y) => align-items: flex-start;

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
code 10

11 Les items sont disposés en ligne avec retour à la ligne => flex-flow: row wrap;

Les items sont alignés sur l'axe secondaire (axe y). Les items occupent toute la largeur qui leur est alouée, tout en respectant les contraintes de hauteur et de largeur => align-items: stretch; (comportement par défaut)

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
code 11

12 Les items sont disposés en ligne avec retour à la ligne => flex-flow: row wrap;

Les items sont alignés sur l'axe secondaire (axe y). Les items sont centrés sur l'axe secondaire (axe y) => align-items: center;

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
code 12

13 Les items sont disposés en ligne avec retour à la ligne => flex-flow: row wrap;

Les items sont alignés sur l'axe secondaire (axe y). Les items démarrent en fin de l'axe secondaire (axe y) => align-items: flex-end;

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
code 13

14 Les items sont disposés en ligne avec retour à la ligne => flex-flow: row wrap;

La propriété align-content permet de prendre l'espace alloué aux autres items lorsqu'un item a une hauteur donnée. Seul l'item 3 a une hauteur donnée de 200px.
Cette propriété n'a aucun effet lorsque le conteneur flex n'a qu'une seule ligne.
Les lignes sont alignées sur l'axe secondaire (axe y). => align-content: flex-start;

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
code 14

15 Les items sont disposés en ligne avec retour à la ligne => flex-flow: row wrap;

La propriété align-content permet de prendre l'espace alloué aux autres items lorsqu'un item a une hauteur donnée. Seul l'item 3 a une hauteur donnée de 200px.
Cette propriété n'a aucun effet lorsque le conteneur flex n'a qu'une seule ligne.
Les lignes sont alignées sur l'axe secondaire (axe y). => align-content: flex-end;

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
code 15

16 Les items sont disposés en ligne avec retour à la ligne => flex-flow: row wrap;

La propriété align-content permet de prendre l'espace alloué aux autres items lorsqu'un item a une hauteur donnée. Seul l'item 3 a une hauteur donnée de 200px.
Cette propriété n'a aucun effet lorsque le conteneur flex n'a qu'une seule ligne.
Les lignes sont alignées sur l'axe secondaire (axe y). => align-content: flex-center;

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
code 16

17 Les items sont disposés en ligne avec retour à la ligne => flex-flow: row wrap;

La propriété align-content permet de prendre l'espace alloué aux autres items lorsqu'un item a une hauteur donnée. Seul l'item 3 a une hauteur donnée de 200px.
Cette propriété n'a aucun effet lorsque le conteneur flex n'a qu'une seule ligne.
Les lignes sont alignées sur l'axe secondaire (axe y). => align-content: space-between;

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
code 17

18 Les items sont disposés en ligne avec retour à la ligne => flex-flow: row wrap;

La propriété align-content permet de prendre l'espace alloué aux autres items lorsqu'un item a une hauteur donnée. Seul l'item 3 a une hauteur donnée de 200px.
Cette propriété n'a aucun effet lorsque le conteneur flex n'a qu'une seule ligne.
Les lignes sont alignées sur l'axe secondaire (axe y). => align-content: space-around;

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
code 18

19 Les items sont disposés en ligne avec retour à la ligne => flex-flow: row wrap;

La propriété align-content permet de prendre l'espace alloué aux autres items lorsqu'un item a une hauteur donnée. Seul l'item 3 a une hauteur donnée de 200px.
Cette propriété n'a aucun effet lorsque le conteneur flex n'a qu'une seule ligne.
Les lignes sont alignées sur l'axe secondaire (axe y). => align-content: space-evenly;

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
code 19