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

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

Axe principal horizontal

Seul l'item 3 a une hauteur et une largeur définies à 100px

1 Axe principal (les colonnes) => flex-direction: column;

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

Item 1
Item 2
Item 3
Item 4
Item 5

2 L'axe principal est l'axe des y (avec retour à la colonne des items) => flex-wrap: wrap;

Les items retournent à la colonne suivante. Ils sont contenus dans le conteneur. Ils se placent du haut vers le bas.

Item 1
Item 2
Item 3
Item 4
Item 5

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

Les items débordent du conteneur (pas de retour à la colonne). Ils sont rangés du bas vers le haut.

Item 1
Item 2
Item 3
Item 4
Item 5

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

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

Item 1
Item 2
Item 3
Item 4
Item 5

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

Les items sont disposés en bas sur l'axe principal (axe y) => justify-content: flex-end;

Item 1
Item 2
Item 3
Item 4
Item 5

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

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

Item 1
Item 2
Item 3
Item 4
Item 5

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

Les items sont répartis équitablement sur l'axe principal (axe y). À 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

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

Les items sont répartis équitablement sur l'axe principal (axe y). 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

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

Les items sont répartis équitablement sur l'axe principal (axe y). 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

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

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

Item 1
Item 2
Item 3
Item 4
Item 5

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

Les items sont alignés sur l'axe secondaire (axe x). 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

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

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

Item 1
Item 2
Item 3
Item 4
Item 5

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

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

Item 1
Item 2
Item 3
Item 4
Item 5

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

La propriété align-content permet de prendre la même largeur aux autres items lorsqu'un item a une largeur donnée. Seul l'item 3 a une largeur donnée de 200px.
Cette propriété n'a aucun effet lorsque le conteneur flex n'a qu'une seule colonne.
Les colonnes sont alignées sur l'axe secondaire (axe x). => align-content: flex-start;

Item 1
Item 2
Item 3
Item 4
Item 5

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

La propriété align-content permet de prendre la même largeur aux autres items lorsqu'un item a une largeur donnée. Seul l'item 3 a une largeur donnée de 200px.
Cette propriété n'a aucun effet lorsque le conteneur flex n'a qu'une seule colonne.
Les colonnes sont alignées sur l'axe secondaire (axe x). => align-content: flex-end;

Item 1
Item 2
Item 3
Item 4
Item 5

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

La propriété align-content permet de prendre la même largeur aux autres items lorsqu'un item a une largeur donnée. Seul l'item 3 a une largeur donnée de 200px.
Cette propriété n'a aucun effet lorsque le conteneur flex n'a qu'une seule colonne.
Les colonnes sont alignées sur l'axe secondaire (axe x). => align-content: flex-center;

Item 1
Item 2
Item 3
Item 4
Item 5

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

La propriété align-content permet de prendre la même largeur aux autres items lorsqu'un item a une largeur donnée. Seul l'item 3 a une largeur donnée de 200px.
Cette propriété n'a aucun effet lorsque le conteneur flex n'a qu'une seule colonne.
Les colonnes sont alignées sur l'axe secondaire (axe x). => align-content: space-between;

Item 1
Item 2
Item 3
Item 4
Item 5

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

La propriété align-content permet de prendre la même largeur aux autres items lorsqu'un item a une largeur donnée. Seul l'item 3 a une largeur donnée de 200px.
Cette propriété n'a aucun effet lorsque le conteneur flex n'a qu'une seule colonne.
Les colonnes sont alignées sur l'axe secondaire (axe x). => align-content: space-around;

Item 1
Item 2
Item 3
Item 4
Item 5

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

La propriété align-content permet de prendre la même largeur aux autres items lorsqu'un item a une largeur donnée. Seul l'item 3 a une largeur donnée de 200px.
Cette propriété n'a aucun effet lorsque le conteneur flex n'a qu'une seule colonne.
Les colonnes sont alignées sur l'axe secondaire (axe x). => align-content: space-evenly;

Item 1
Item 2
Item 3
Item 4
Item 5