Fondamentaux de Flexbox

5.1 Concepts de base de Flexbox

Flexbox (Flexible Box Layout) — est un système de mise en page CSS puissant qui offre des moyens flexibles et efficaces pour répartir l'espace et aligner les éléments à l'intérieur d'un conteneur. Flexbox est particulièrement utile pour créer des mises en page complexes et un design réactif. Maintenant, nous allons examiner les bases de Flexbox, y compris la création de conteneurs et d'éléments Flex, ainsi que l'utilisation de la propriété display: flex;.

Concepts de base de Flexbox

Flexbox se compose de deux composants clés :

• Conteneur Flex : l'élément parent qui contient les éléments Flex.
• Éléments Flex : les éléments enfants à l'intérieur du conteneur Flex, qui sont alignés et distribués selon les règles de Flexbox.

Conteneur Flex

Un conteneur Flex est créé avec la propriété display: flex; ou display: inline-flex;. Le conteneur Flex gère l'emplacement de ses éléments enfants (éléments Flex) et offre de nombreuses possibilités pour leur alignement et leur distribution.

    
      .container {
        display: flex; /* ou inline-flex */
      }
    
  

Exemple d'utilisation :

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

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

    
      <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>
    
  

Explication du code :

• .container: Conteneur Flex créé avec display: flex;. À l'intérieur de ce conteneur, les éléments sont alignés et distribués selon les règles de Flexbox.
• .item: Éléments Flex qui sont les éléments enfants du conteneur Flex

5.2 Propriétés du conteneur Flex

La propriété display: flex; définit un élément comme un conteneur Flex. Les éléments enfants de ce conteneur deviennent automatiquement des éléments Flex et commencent à suivre les règles de Flexbox.

display: flex;

Crée un conteneur Flex en bloc. Le conteneur Flex se comporte comme un élément en bloc, occupant toute la largeur disponible de l'élément parent.

    
      .container {
        display: flex;
      }
    
  

display: inline-flex;

Crée un conteneur Flex en ligne. Le conteneur Flex se comporte comme un élément en ligne, n'occupant que la largeur nécessaire, et peut être placé à côté d'autres éléments en ligne.

    
      .inline-container {
        display: inline-flex;
      }
    
  

Exemple d'utilisation :

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

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

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

      <div class="inline-container">
        <div class="item">Élément 4</div>
        <div class="item">Élément 5</div>
      </div>
    
  

Explication du code :

• inline-container — est un conteneur Flex créé avec display: inline-flex;. À l'intérieur de ce conteneur, les éléments sont alignés et distribués selon les règles de Flexbox. Les conteneurs se comportent comme des éléments en ligne et sont placés côte à côte.

5.3 Propriétés des éléments Flex

1. La propriété flex est une abréviation pour définir flex-grow, flex-shrink, et flex-basis. Elle permet de contrôler la façon dont les éléments Flex grandissent et rétrécissent pour remplir l'espace disponible.

Syntaxe :

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

Exemple d'utilisation :

    
      .item {
        flex: 1;
      }
    
  

2. Propriété order

La propriété order détermine l'ordre dans lequel les éléments Flex sont disposés à l'intérieur du conteneur Flex. Par défaut, tous les éléments ont la valeur order: 0;.

Valeurs

Entiers. Les éléments avec une valeur inférieure seront placés avant ceux avec une valeur supérieure.

Syntaxe :

    
      .element {
        order: value;
      }
    
  

Exemple d'utilisation :

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

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

      .item-2 {
        order: 1;
        background-color: #2ecc71;
        color: white;
        padding: 10px;
        margin: 5px;
      }

      .item-3 {
        order: 3;
        background-color: #e74c3c;
        color: white;
        padding: 10px;
        margin: 5px;
      }
    
  

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

Explication du code :

• .item-1 : a une valeur order: 2, il sera donc placé après l'élément avec order: 1
• .item-2 : a une valeur order: 1, il sera donc placé en premier
• .item-3 : a une valeur order: 3, il sera donc placé en dernier