La propriété align-items
est une sous-propriété du module Flexible Box Layout (Flexbox). Elle sert à définir la façon dont les flex items sont disposés le long de l’axe transversal (cross axis
) sur la ligne courante. On peut la voir comme une version de justify-content pour l’axe transversal (cross axis
).
La propriété align-items
accepte 5 valeurs :
flex-start
: le premier bord (début) des items est placé au début de la ligne transversaleflex-end
: le dernier bord (fin) des items est placé à la fin de la ligne transversalecenter
: les items sont regroupés au centre de l'axe transversalbaseline
: les items sont répartis de manière à ce que leur ligne de base s'alignestretch
(par défaut) : les items s'étirent de façon à remplir le conteneur (tout en respectant min-width/max-width)
Le schéma suivant permet de mieux comprendre la façon dont les flex-items sont disposés selon la valeur donnée à align-items
:
Syntaxe
//CSS
align-items: flex-start | flex-end | center | baseline | stretch
.flex-container {
align-items: flex-start;
}
Démo
La démo suivante montre la façon dont les flex-items sont disposés selon la valeur donnée à align-items
:
- Dans la liste rouge, valeur =
flex-start
- Dans la liste jaune, valeur =
flex-end
- Dans la liste bleue, valeur =
center
- Dans la liste verte, valeur =
baseline
- Dans la liste marron, valeur =
stretch
- 1
2 - 3
- 4
5 - 6
- 1
2 - 3
- 4
5 - 6
- 1
2 - 3
- 4
5 - 6
- 1
2 - 3
- 4
5 - 6
- 1
2 - 3
- 4
5 - 6
(publicité)
À lire également dans La Cascade :
Autres ressources à consulter sur ce sujet :
- MDN : align-items
- Spécification W3C (en anglais)
- Autres entrées du Dico CSS :
- justify-content
- align-self
- flex-direction
- flex-flow
- flex-wrap
Cet article est pour l’essentiel tiré de l’almanach de CSS-Tricks de Chris Coyier, avec son aimable autorisation.
Sur l’auteur : Chris Coyier est designer, blogger, conférencier. Créateur de CSS-Tricks, de CodePen, animateur du Podcast Shop Talk, il est l’auteur avec Jeff Starr de "Digging into WordPress". Vous pouvez le retrouver sur Twitter, Google+.
NdT : CSS-Tricks est un site ressource d’une richesse exceptionnelle, axé sur CSS et le web design en général. Vous pouvez suivre son actualité sur Twitter, Facebook, YouTube, GitHub. Mélange d’articles, de vidéos, de forums, de ressources diverses (jetez un coup d’oeil à son "Almanac" ), il est très populaire sur le web anglophone.
CodePen est un site où vous pouvez tester votre code, faire des maquettes, proposer vos dernières créations et recueillir les observations de vos pairs. C’est aussi une source d’inspiration pour vos propres designs.