Propriétés sur conteneur Flex
Align-items

Découverte #1

Exemple : Vignettes

Sur codePen

CSS Le code complet à tester se trouve sur CodePen

Augmentons le contenu de l'article 2. La hauteur de cet article n'étant pas défini, sa hauteur est donc dépendante du contenu.

Par défaut, la hauteur de tous les enfants flex s'adapte en fonction de la hauteur de l'enfant le plus grand.

Nous pouvons modifier ce comportement en utilisant la propriété align-items Testez cette propriété.

align-items: flex-start;

Testez d'autres valeurs comme center, baseline, center...

Align-items

La taille du conteneur selon l'axe croisé est soit fixée explicitement, soit déterminée par l'élément contenu le plus grand. La propriété align-items permet de déterminer comment doit être réparti l'espace restant selon l'axe croisé pour les éléments plus petits que le conteneur.

propriété	illustration
stretch (par défaut) :
flex-start :
flex-end :
center :
baseline :

Testez la propriété