Align-content

La propriété align-content est une sous-propriété du module Flexible Box Layout (Flexbox). Elle sert à aligner les lignes d’un container flexible lorsqu’il y a de l’espace sur l’axe perpendiculaire (cross axis), de la même façon que justify-content permet d’aligner des items individuels sur l’axe principal (main axis).

Note : cette propriété est sans effet lorsque la flexbox ne comporte qu’une seule ligne.

La propriété align-content accepte 6 valeurs :

  • flex-start : les lignes sont regroupées au début du container
  • flex-end : les lignes sont regroupées à la fin du container
  • center : les lignes sont regroupées au centre du container
  • space-between : les lignes sont réparties de manière égale ; la première ligne est au début du container, la dernière est à la fin
  • space-around : les lignes sont réparties de manière égale avec le même espacement entre chacune
  • stretch (par défaut) : les lignes s’étirent pour recouvrir tout l’espace.

Le schéma suivant permet de mieux comprendre la façon dont les lignes s’empilent dans un container flexible selon la valeur donnée à align-content :

image

Syntaxe

//CSS
align-content: flex-start | flex-end | center | space-between | space-around | stretch

.flex-container {
  align-content: space-around;
}

Démo

La démo suivante montre la façon dont les lignes sont empilées selon la valeur de la propriété align-content :

  • 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 = space-between
  • Dans la liste rose, valeur = space-around
  • 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
  • 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.