Répartition de l'espace

9.1 Propriété flex-grow

En Flexbox, il existe différents outils pour gérer la répartition de l'espace entre les éléments dans un conteneur Flex. Les propriétés flex-grow, flex-shrink et flex-basis jouent un rôle clé dans le contrôle de la taille et du comportement des éléments Flex dans diverses conditions. Nous allons maintenant examiner en détail chaque propriété et comment les utiliser.

La propriété flex-grow détermine la capacité d'un élément Flex à augmenter de taille pour occuper l'espace disponible dans le conteneur. La valeur de flex-grow représente un coefficient indiquant dans quelle mesure l'élément peut croître par rapport aux autres éléments Flex.

Valeurs :

• Nombre entier ou valeur décimale
• Valeur par défaut : 0 (l'élément ne grandit pas)

Exemple d'utilisation :

    
      .container {
        display: flex;
        border: 2px solid #000;
        padding: 10px;
        width: 500px;
      }

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

      .grow-1 {
        flex-grow: 1;
      }

      .grow-2 {
        flex-grow: 2;
      }
    
  

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

Explication du code :

• .grow-1 : ces éléments ont la valeur flex-grow: 1;, ce qui leur permet de croître de manière égale
• .grow-2 : cet élément a la valeur flex-grow: 2;, ce qui lui permet de croître deux fois plus par rapport aux éléments avec flex-grow: 1;

9.2 Propriété flex-shrink

La propriété flex-shrink détermine la capacité d'un élément Flex à réduire sa taille si l'espace dans le conteneur est limité. La valeur de flex-shrink représente un coefficient indiquant dans quelle mesure l'élément peut se réduire par rapport aux autres éléments Flex.

Valeurs :

• Nombre entier ou valeur décimale
• Valeur par défaut : 1 (l'élément peut se réduire)

Exemple d'utilisation :

    
      .container {
        display: flex;
        border: 2px solid #000;
        padding: 10px;
        width: 300px;
      }

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

      .shrink-0 {
        flex-shrink: 0;
      }

      .shrink-1 {
        flex-shrink: 1;
      }
    
  

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

Explication du code :

• .shrink-0 : cet élément a la valeur flex-shrink: 0;, ce qui ne lui permet pas de se réduire
• .shrink-1 : ces éléments ont la valeur flex-shrink: 1;, ce qui leur permet de se réduire si nécessaire

9.3 Propriété flex-basis

La propriété flex-basis détermine la taille initiale d'un élément Flex avant la répartition de l'espace libre. Elle peut être définie dans diverses unités de mesure, telles que des pixels, des pourcentages et d'autres.

Valeurs :

• Longueur dans diverses unités (px, %, em, etc.)
• Valeur par défaut : auto (la taille est déterminée par le contenu)

Exemple d'utilisation :

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

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

      .basis-auto {
        flex-basis: auto;
      }

      .basis-100px {
        flex-basis: 100px;
      }

      .basis-50percent {
        flex-basis: 50%;
      }
    
  

    
      <div class="container">
        <div class="item basis-auto">Élément 1</div>
        <div class="item basis-100px">Élément 2</div>
        <div class="item basis-50percent">Élément 3</div>
      </div>
    
  

Explication du code :

• .basis-auto : cet élément a la valeur flex-basis: auto;, ce qui signifie que sa taille est déterminée par le contenu
• .basis-100px : cet élément a une taille initiale fixe de 100 pixels
• .basis-50percent : cet élément a une taille initiale de 50% de la largeur du conteneur

9.4 Utilisation des propriétés

La propriété flex est une écriture abrégée pour définir flex-grow, flex-shrink et flex-basis. Elle permet de gérer les trois aspects de la répartition de l'espace en une seule propriété.

Syntaxe :

    
      .container {
        flex: [flex-grow] [flex-shrink] [flex-basis];
      }
    
  

Exemple d'utilisation :

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

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

      .flex-1 {
        flex: 1 1 auto;
      }

      .flex-2 {
        flex: 2 1 100px;
      }

      .flex-3 {
        flex: 1 0 50%;
      }
    
  

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

Explication du code :

• .flex-1 : cet élément a flex: 1 1 auto;, ce qui signifie qu'il peut croître et se contracter de manière égale avec d'autres éléments, et sa taille initiale est déterminée par le contenu
• .flex-2 : cet élément a flex: 2 1 100px;, ce qui signifie qu'il peut croître deux fois plus par rapport aux éléments avec flex-grow: 1;, peut se contracter et a une taille initiale de 100 pixels
• .flex-3 : cet élément a flex: 1 0 50%;, ce qui signifie qu'il peut croître mais pas se contracter, et sa taille initiale est de 50% de la largeur du conteneur

1

Mission

Frontend SELF FR, niveau 17, leçon 5

Bloqué

Utilisation de flex-grow

Utilisation de flex-grow

Ouvrir

1

Mission

Frontend SELF FR, niveau 17, leçon 5

Bloqué

Utilisation de flex-shrink

Utilisation de flex-shrink

Ouvrir