Align-self

La propriété align-content est une sous-propriété du module Flexible Box Layout (Flexbox). Elle permet de supplanter la valeur d'align-items pour un ou plusieurs items spécifiques.

La propriété align-self accepte les mêmes 5 valeurs qu'align-items :

  • flex-start : le premier bord (début) de l'item est placé au début de la ligne transversale
  • flex-end : le dernier bord (fin) de l'item est placé à la fin de la ligne transversale
  • center : l'item est centré sur 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)

Syntaxe

//CSS
align-self: auto | flex-start | flex-end | center | baseline | stretch

.flex-item {
  align-self: flex-end;
}

Démo

La démo suivante montre la façon dont un item peut s'aligner dans le conteneur flex, selon la valeur d'align-self :

  • Le premier item a pour valeur flex-start
  • Le deuxième item a pour valeur flex-end
  • Le troisième item a pour valeur center
  • Le quatrième item a pour valeur baseline
  • Le cinquième item a pour valeur stretch
  • 1
  • 2
  • 3
  • 4
  • 5

À 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.