Seul l'item 3 a une hauteur et une largeur définies à 100px
Les items débordent du conteneur (pas de retour à la colonne). La hauteur des items est la plus petite possible (ici le mot Item).
Les items retournent à la colonne suivante. Ils sont contenus dans le conteneur. Ils se placent du haut vers le bas.
Les items débordent du conteneur (pas de retour à la colonne). Ils sont rangés du bas vers le haut.
Propriété générique réunissant flex-direction et flex-wrap.
Les items sont disposés en bas sur l'axe principal (axe y) => justify-content: flex-end;
Les items sont centrés sur l'axe principal (axe y) => justify-content: center;
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;
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;
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;
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;
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)
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;
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;
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;
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;
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;
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;
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;
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;