Alignement sur l'axe transversal

8.1 Propriété align-items

Les propriétés align-items et align-self permettent d'aligner les éléments Flex sur l'axe transversal, offrant flexibilité et précision dans la mise en page.

La propriété align-items gère l'alignement des éléments Flex sur l'axe transversal (perpendiculaire à l'axe principal) à l'intérieur du conteneur Flex. L'axe transversal dépend de la valeur de la propriété flex-direction :

• Si flex-direction a la valeur row ou row-reverse, l'axe transversal sera vertical
• Si flex-direction a la valeur column ou column-reverse, l'axe transversal sera horizontal

Valeurs :

• stretch : les éléments sont étirés pour remplir le conteneur (valeur par défaut)
• flex-start : les éléments sont alignés au début du conteneur
• flex-end : les éléments sont alignés à la fin du conteneur
• center : les éléments sont alignés au centre du conteneur
• baseline : les éléments sont alignés sur la ligne de base du texte

Exemple d'utilisation :

    
      .container {
        display: flex;
        height: 200px;
        border: 2px solid #000;
        padding: 10px;
        margin-bottom: 20px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
      }

      .align-stretch {
        align-items: stretch;
      }

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

    
      <div class="container align-stretch">
        <div class="item">Élément 1</div>
        <div class="item">Élément 2</div>
        <div class="item">Élément 3</div>
      </div>

      <div class="container align-flex-start">
        <div class="item">Élément 1</div>
        <div class="item">Élément 2</div>
        <div class="item">Élément 3</div>
      </div>
    
  

8.2 Propriété align-self

La propriété align-self permet de remplacer la valeur de align-items pour un élément Flex spécifique. Cette propriété s'applique directement à l'élément Flex et contrôle son alignement sur l'axe transversal à l'intérieur du conteneur Flex.

Valeurs :

• auto : la valeur est héritée du parent (par défaut)
• stretch : l'élément est étiré pour remplir le conteneur
• flex-start : l'élément est aligné au début du conteneur
• flex-end : l'élément est aligné à la fin du conteneur
• center : l'élément est aligné au centre du conteneur
• baseline : l'élément est aligné sur la ligne de base du texte

Exemple d'utilisation :

    
      .container {
        display: flex;
        height: 200px;
        border: 2px solid #000;
        padding: 10px;
        margin-bottom: 20px;
        align-items: flex-start;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
      }

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

      .self-center {
        align-self: center;
      }

      .self-baseline {
        align-self: baseline;
      }
    
  

    
      <div class="container">
        <div class="item self-flex-end">Élément 3</div>
        <div class="item self-center">Élément 4</div>
        <div class="item self-baseline">Élément 5</div>
      </div>
    
  

Explication du code :

• .self-flex-end : cet élément est aligné sur le bord inférieur du conteneur
• .self-center : cet élément est centré verticalement
• .self-baseline : cet élément est aligné sur la ligne de base du texte

8.3 Centrage des éléments

Flexbox permet de centrer facilement les éléments verticalement et horizontalement, en utilisant une combinaison de justify-content et align-items ou align-self.

Exemple d'utilisation :

    
      .center-container {
        display: flex;
        justify-content: center; /* centrage horizontal */
        align-items: center; /* centrage vertical */
        height: 300px;
        border: 2px solid #000;
      }

      .center-item {
        background-color: #3498db;
        color: white;
        padding: 20px;
      }
    
  

    
      <div class="center-container">
        <div class="center-item">Élément centré</div>
      </div>
    
  

Explication du code :

• .center-container : Conteneur Flex dans lequel les éléments sont centrés horizontalement avec justify-content: center; et verticalement avec align-items: center;
• .center-item : Élément Flex qui est aligné au centre du conteneur