Chapitre 510 | Alignement vertical (align-items)

Alignement vertical (`align-items`)

La propriété align-items contrôle l’alignement des enfants sur l’axe secondaire (vertical par défaut si l’axe principal est horizontal). Voici les différentes valeurs que nous allons explorer :

Valeurs que nous allons voir :

flex-start (par défaut) : Les enfants s’alignent en haut du conteneur.
flex-end : Les enfants s’alignent en bas du conteneur.
center : Les enfants sont alignés au centre verticalement.
baseline : Les enfants s’alignent selon leur ligne de base de texte.
stretch (par défaut si aucune taille spécifique n’est définie) : Les enfants s’étirent pour remplir tout l’espace vertical disponible.

<div class="main">
  <div>
    <h4>1 : align-items: flex-start</h4>
    <div class="flex-container example-1">
      <div class="box red">Élément 1</div>
      <div class="box green">Élément 2</div>
      <div class="box yellow">Élément 3</div>
    </div>
  </div>

  <div>
    <h4>2 : align-items: flex-end</h4>
    <div class="flex-container example-2">
      <div class="box red">Élément 1</div>
      <div class="box green">Élément 2</div>
      <div class="box yellow">Élément 3</div>
    </div>
  </div>

  <div>
    <h4>3 : align-items: center</h4>
    <div class="flex-container example-3">
      <div class="box red">Élément 1</div>
      <div class="box green">Élément 2</div>
      <div class="box yellow">Élément 3</div>
    </div>
  </div>

  <div>
    <h4>4 : align-items: baseline</h4>
    <div class="flex-container example-4">
      <div class="box red">Élément 1</div>
      <div class="box green">Élément 2</div>
      <div class="box yellow">Élément 3</div>
    </div>
  </div>

  <div>
    <h4>5 : align-items: stretch</h4>
    <div class="flex-container example-5">
      <div class="box red">Élément 1</div>
      <div class="box green">Élément 2</div>
      <div class="box yellow">Élément 3</div>
    </div>
  </div>
</div>

* {
  font-family: arial;
}
.main {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
h2 {
  display: inline-block;
}
div {
  gap: 10px;
}
.flex-container {
  display: inline-flex; /* Active le mode Flexbox */
  height: 150px; /* Hauteur fixe pour bien voir l'effet vertical */
  background-color: lightblue; /* Fond pour mieux visualiser */
  padding: 10px; /* Espace autour des enfants */
  margin-bottom: 20px; /* Espacement entre chaque exemple */
  border: 1px solid darkblue; /* Bordure pour délimiter les conteneurs */
}

.box {
  background-color: lightcoral;
  padding: 10px;
  border: 1px solid darkred;
}

/* Couleurs spécifiques des enfants */
.red {
  background-color: red;
}

.green {
  background-color: green;
}

.yellow {
  background-color: yellow;
}

/* Exemple 1 : align-items: flex-start */
.example-1 {
  align-items: flex-start; /* Aligne les enfants en haut du conteneur */
}

/* Exemple 2 : align-items: flex-end */
.example-2 {
  align-items: flex-end; /* Aligne les enfants en bas du conteneur */
}

/* Exemple 3 : align-items: center */
.example-3 {
  align-items: center; /* Centre les enfants verticalement */
}

/* Exemple 4 : align-items: baseline */
.example-4 {
  align-items: baseline; /* Aligne les enfants sur leur ligne de base de texte */
}

/* Exemple 5 : align-items: stretch */
.example-5 {
  align-items: stretch; /* Étire les enfants pour occuper toute la hauteur disponible */
}

ToolBox :

Expérimentez à votre guise…