Flexbox - Flexibilité

base flexible

Nous utilisons le flex-basis propriété pour définir la taille par défaut de l'élément flexible avant la distribution de l'espace.

L'exemple suivant illustre l'utilisation de la propriété flex-based. Ici, nous créons 3 boîtes colorées et fixons leur taille à 150 px.

<!doctype html>
<html lang = "en">
   <style>
      .box{
         font-size:15px;
         padding:15px;
      }
      .box1{background:green; flex-basis:150px; }
      .box2{background:blue; flex-basis:150px;}
      .box3{background:red; flex-basis:150px;}
      
      .container{
         display:flex;
         height:100vh;
         align-items:flex-start;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
      </div>
   </body>
</html>

Il produira le résultat suivant -

Flex-Grow

Nous utilisons le flex-grow propriété pour définir la flex-growfacteur. En cas d'espace excessif dans le conteneur, il spécifie la croissance d'un élément flexible particulier.

<!doctype html>
<html lang = "en">
   <style>
      .box{
         font-size:15px;
         padding:15px;
      }
      .box1{background:green; flex-grow:10; flex-basis:100px; }
      .box2{background:blue; flex-grow:1; flex-basis:100px; }
      .box3{background:red; flex-grow:1; flex-basis:100px; }
      
      .container{
         display:flex;
         height:100vh;
         align-items:flex-start;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
      </div>
   </body>
</html>

Il produira le résultat suivant -

flex-shrink

Nous utilisons la propriété flex-shrink est utilisée pour définir le flex shrink-factor. Dans le cas où il n'y a pas assez d'espace dans le conteneur, il spécifie combien un élément flexible doit être réduit.

<!doctype html>
<html lang = "en">
   <style>
      .box{
         font-size:15px;
         padding:15px;
      }
      .box1{background:green; flex-basis:200px; flex-shrink:10}
      .box2{background:blue; flex-basis:200px; flex-shrink:1}
      .box3{background:red; flex-basis:200px; flex-shrink:1}
      
      .container{
         display:flex;
         height:100vh;
         align-items:flex-start;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
      </div>
   </body>
</html>

Il produira le résultat suivant -

fléchir

Il existe un raccourci pour définir les valeurs de ces trois propriétés à la fois; on l'appelleflex. À l'aide de cette propriété, vous pouvez définir simultanément des valeurs flex-grow, flex-shrink et flex-base. Voici la syntaxe de cette propriété.

.item {
   flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}