Alignement sur l'axe principal

7.1 Propriété justify-content

Flexbox offre des outils géniaux pour gérer l'alignement et la distribution de l'espace entre les éléments dans un conteneur Flex. L'une des propriétés clés pour cela est justify-content, qui gère l'alignement des éléments Flex le long de l'axe principal.

La propriété justify-content définit comment les éléments Flex seront distribués le long de l'axe principal du conteneur Flex. L'axe principal dépend de la valeur de la propriété flex-direction:

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

Valeurs :

• flex-start: les éléments sont alignés au début du conteneur (valeur par défaut)
• flex-end: les éléments sont alignés à la fin du conteneur
• center: les éléments sont alignés au centre du conteneur
• space-between: les éléments sont répartis uniformément avec des espaces égaux entre eux
• space-around: les éléments sont répartis uniformément avec des espaces aux extrémités et entre eux
• space-evenly: les éléments sont répartis uniformément avec des espaces égaux entre eux et aux extrémités du conteneur

Exemple d'utilisation :

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

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

      .flex-start {
        justify-content: flex-start;
      }
    
  

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

7.2 Valeurs justify-content

1. flex-start

Avec la valeur flex-start, les éléments sont alignés au début du conteneur Flex, c'est-à-dire à gauche si l'axe principal est horizontal (row), ou en haut si l'axe principal est vertical (column).

Exemple d'utilisation :

    
      .container {
        display: flex;
        justify-content: flex-start;
      }
    
  

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

2. flex-end

Avec la valeur flex-end, les éléments sont alignés à la fin du conteneur Flex, c'est-à-dire à droite si l'axe principal est horizontal (row), ou en bas si l'axe principal est vertical (column).

Exemple d'utilisation :

    
      .container {
        display: flex;
        justify-content: flex-end;
      }
    
  

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

3. center

Avec la valeur center, les éléments sont centrés dans le conteneur Flex. Cette valeur est utile pour créer des mises en page centrées.

Exemple d'utilisation :

    
      .container {
        display: flex;
        justify-content: center;
      }
    
  

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

4. space-between

Avec la valeur space-between, les éléments sont répartis uniformément le long de l'axe principal avec des espaces égaux entre eux. Le premier élément est aligné au début du conteneur et le dernier élément à la fin du conteneur.

Exemple d'utilisation :

    
      .container {
        display: flex;
        justify-content: space-between;
      }
    
  

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

5. space-around

Avec la valeur space-around, les éléments sont répartis uniformément avec des espaces aux extrémités et entre eux. Les espaces entre les éléments sont deux fois plus grands que les espaces aux extrémités du conteneur.

Exemple d'utilisation :

    
      .container {
        display: flex;
        justify-content: space-around;
      }
    
  

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

6. space-evenly

Avec la valeur space-evenly, les éléments sont répartis uniformément avec des espaces égaux entre eux et aux extrémités du conteneur. Cette valeur assure des espaces égaux partout dans le conteneur.

Exemple d'utilisation :

    
      .container {
        display: flex;
        justify-content: space-evenly;
      }
    
  

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

7.3 Centrement d'un menu

Exemple d'utilisation dans des projets réels — centrer un menu de navigation :

    
      .nav {
        display: flex;
        justify-content: center;
        background-color: #333;
        padding: 10px;
      }

      .nav-item {
        color: white;
        padding: 10px 20px;
        text-decoration: none;
      }

      .nav-item:hover {
        background-color: #575757;
      }
    
  

    
      <nav class="nav">
        <a href="#" class="nav-item">Accueil</a>
        <a href="#" class="nav-item">À propos</a>
        <a href="#" class="nav-item">Services</a>
        <a href="#" class="nav-item">Contact</a>
      </nav>
    
  

Explication du code :

• .nav: conteneur Flex pour le menu de navigation avec alignement des éléments au centre
• .nav-item: éléments Flex (liens) avec les styles de base