Flexbox - Conteneurs Flex

Pour utiliser Flexbox dans votre application, vous devez créer / définir un conteneur flex à l'aide du display propriété.

Usage -

display: flex | inline-flex

Cette propriété accepte deux valeurs

  • flex - Génère un conteneur flexible de niveau bloc.

  • inline-flex - Génère une boîte de conteneur flexible en ligne.

Maintenant, nous allons voir comment utiliser le display propriété avec des exemples.

Fléchir

En transmettant cette valeur à la propriété d'affichage, un conteneur flexible de niveau bloc sera créé. Il occupe toute la largeur du conteneur parent (navigateur).

L'exemple suivant montre comment créer un conteneur flexible de niveau bloc. Ici, nous créons six boîtes de couleurs différentes et nous avons utilisé le conteneur flexible pour les contenir.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .container{
         display:flex;
      }
      .box{
         font-size:35px;
         padding:15px;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Il produira le résultat suivant -

Depuis que nous avons donné la valeur flex à la display propriété, le conteneur utilise la largeur du conteneur (navigateur).

Vous pouvez observer cela en ajoutant une bordure au conteneur comme indiqué ci-dessous.

.container {
   display:inline-flex;
   border:3px solid black;
}

Il produira le résultat suivant -

Flex en ligne

En passant cette valeur au displaypropriété, un conteneur flexible de niveau en ligne sera créé. Il prend juste la place requise pour le contenu.

L'exemple suivant montre comment créer un conteneur flexible en ligne. Ici, nous créons six boîtes de couleurs différentes et nous avons utilisé le conteneur inline-flex pour les contenir.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .container{
         display:inline-flex;
         border:3px solid black;
      }
      .box{
         font-size:35px;
         padding:15px;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Il produira le résultat suivant -

Puisque nous avons utilisé un conteneur flexible en ligne, il a juste pris l'espace nécessaire pour envelopper ses éléments.