Flexbox - pojemniki Flex

Aby używać Flexbox w swojej aplikacji, musisz utworzyć / zdefiniować kontener Flex przy użyciu rozszerzenia display własność.

Usage -

display: flex | inline-flex

Ta właściwość przyjmuje dwie wartości

flex - Generuje elastyczny kontener na poziomie bloku.
inline-flex - Generuje wbudowany pojemnik elastyczny.

Teraz zobaczymy, jak używać display własność z przykładami.

Zgiąć

Po przekazaniu tej wartości do właściwości display zostanie utworzony kontener elastyczny na poziomie bloku. Zajmuje całą szerokość kontenera nadrzędnego (przeglądarki).

Poniższy przykład ilustruje sposób tworzenia kontenera elastycznego na poziomie bloku. Tutaj tworzymy sześć pudełek w różnych kolorach i do ich przechowywania użyliśmy pojemnika flex.

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

To da następujący wynik -

Ponieważ podaliśmy wartość flex do display właściwość, kontener wykorzystuje szerokość kontenera (przeglądarki).

Możesz to zaobserwować, dodając obramowanie do kontenera, jak pokazano poniżej.

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

To da następujący wynik -

Inline flex

Po przekazaniu tej wartości do displayzostanie utworzony kontener elastyczny na poziomie inline. Po prostu zajmuje miejsce wymagane dla treści.

Poniższy przykład ilustruje sposób tworzenia wbudowanego kontenera elastycznego. Tutaj tworzymy sześć pudełek w różnych kolorach i użyliśmy pojemnika inline-flex do ich przechowywania.

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

To da następujący wynik -

Ponieważ użyliśmy wbudowanego pojemnika elastycznego, zajmował po prostu miejsce wymagane do owinięcia jego elementów.