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 transversale
  • flex-end : le dernier bord (fin) des items est placé à la fin de la ligne transversale
  • center : les items sont regroupés au centre de l'axe transversal
  • baseline : les items sont répartis de manière à ce que leur ligne de base s'aligne
  • stretch (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 :

image

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

À lire également dans La Cascade :

Flexbox, guide complet

Autres ressources à consulter sur ce sujet :

Cet article est pour l’essentiel tiré de l’almanach de CSS-Tricks de Chris Coyier, avec son aimable autorisation.

Sur l’auteur : 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.