La propriété align-items est liée à la mise en page CSS. Elle affecte la façon dont les éléments sont alignés à la fois dans les mises en page Flexbox et Grid.

• align-items dans Flexbox
• align-items dans Grid

Syntaxe

align-items: flex-start | flex-end | center | baseline | stretch;

La propriété align-items définit le comportement par défaut pour la disposition des éléments le long de l'axe transversal (perpendiculaire à l'axe principal).

Imaginez une mise en page flexbox horizontale. Ce flux horizontal est l'axe principal, donc align-items est l'alignement opposé à celui-ci, sur l'axe vertical. Gardez à l'esprit que ça change évidemment lorsque l'axe principal change, et que l'axe transversal change avec lui.

Vous pouvez considérer align-items comme la version justify-content pour l'axe transversal (perpendiculaire à l'axe principal).

Le reste de cet article est plutôt axé sur flexbox plutôt que sur grid. Les concepts sont toujours très similaires, mais il existe quelques différences. Par exemple, dans flexbox, les axes peuvent changer, alors que dans grid ils ne le peuvent pas. Ça a pour conséquence par exemple le fait que flexbox a des valeurs comme `flex-start` alors que dans grid, c'est juste `start`.

Démo (flexbox)

voir CSS-Tricks: :nth-last-child de Kitty Giraudel dans CodePen