Flexbox : Align-items

La propriété CSS FlexBox Parente ALIGN-ITEMS permet de positionner les blocs enfants sur l’axe vertical.

La propriété align-items est une sous-propriété du module Flexible Box Layout (Flexbox).

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 :

* {
  margin:0px;
  padding:0px;
}



section {
  background-color:grey;
  margin:10px;
  display:flex;
}



div { 
  height:200px;
}




.s01 div:nth-child(1) {
  background-color:pink;
  width:300px;
  height:400px;
}

.s01 div:nth-child(2) {
  background-color:blue;
  width:300px;
  height:500px;
}

.s01 div:nth-child(3) {
  background-color:green;
  width:300px;
  height:150px;
}

.s01 div:nth-child(4) {
  background-color:red;
  width:300px;
  height:550px;
}




.s02 div:nth-child(1) {
  background-color:pink;
  width:300px;
  height:400px;
}

.s02 div:nth-child(2) {
  background-color:blue;
  width:300px;
  height:500px;
}

.s02 div:nth-child(3) {
  background-color:green;
  width:300px;
  height:150px;
}

.s02 div:nth-child(4) {
  background-color:red;
  width:300px;
  height:550px;
}




.s03 div:nth-child(1) {
  background-color:pink;
  width:300px;
  height:400px;
}

.s03 div:nth-child(2) {
  background-color:blue;
  width:300px;
  height:500px;
}

.s03 div:nth-child(3) {
  background-color:green;
  width:300px;
  height:150px;
}

.s03 div:nth-child(4) {
  background-color:red;
  width:300px;
  height:550px;
}




.s04 {
height:150px;
}

.s04 div {
  height:unset !important;
}

.s04 div:nth-child(1) {
  background-color:pink;
  width:300px;
  height:400px;
}

.s04 div:nth-child(2) {
  background-color:blue;
  width:300px;
  height:500px;
}

.s04 div:nth-child(3) {
  background-color:green;
  width:300px;
  height:150px;
}

.s04 div:nth-child(4) {
  background-color:red;
  width:300px;
  height:550px;
}




.s05 div:nth-child(1) {
  background-color:pink;
  width:300px;
  height:400px;
}

.s05 div:nth-child(2) {
  background-color:blue;
  width:300px;
  height:500px;
}

.s05 div:nth-child(3) {
  background-color:green;
  width:300px;
  height:150px;
}

.s05 div:nth-child(4) {
  background-color:red;
  width:300px;
  height:550px;
}




.s01 {
align-items:flex-start;
}

.s02 {
align-items:flex-end;
}

.s03 {
align-items:center;
}

.s04 {
align-items:stretch;
}

.s05 {
align-items:baseline;
}