Flexbox - Flexbehälter

Um Flexbox in Ihrer Anwendung zu verwenden, müssen Sie einen Flex-Container mit dem erstellen / definieren display Eigentum.

Usage - -

display: flex | inline-flex

Diese Eigenschaft akzeptiert zwei Werte

flex - Erzeugt einen Flex-Container auf Blockebene.
inline-flex - Erzeugt eine Inline-Flex-Container-Box.

Jetzt werden wir sehen, wie man das benutzt display Eigenschaft mit Beispielen.

Biegen

Wenn Sie diesen Wert an die Anzeigeeigenschaft übergeben, wird ein Flex-Container auf Blockebene erstellt. Es nimmt die gesamte Breite des übergeordneten Containers (Browsers) ein.

Das folgende Beispiel zeigt, wie ein Flex-Container auf Blockebene erstellt wird. Hier erstellen wir sechs Boxen mit unterschiedlichen Farben und haben den Flex-Container verwendet, um sie zu halten.

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

Es wird das folgende Ergebnis erzeugt -

Da haben wir den Wert angegeben flex zum display Eigenschaft verwendet der Container die Breite des Containers (Browser).

Sie können dies beobachten, indem Sie dem Container einen Rand hinzufügen, wie unten gezeigt.

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

Es wird das folgende Ergebnis erzeugt -

Inline-Flex

Bei Übergabe dieses Wertes an die displayEigenschaft wird ein Inline-Level-Flex-Container erstellt. Es nimmt nur den für den Inhalt erforderlichen Platz ein.

Das folgende Beispiel zeigt, wie Sie einen Inline-Flex-Container erstellen. Hier erstellen wir sechs Boxen mit unterschiedlichen Farben und haben den Inline-Flex-Container verwendet, um sie zu halten.

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

Es wird das folgende Ergebnis erzeugt -

Da wir einen Inline-Flex-Container verwendet haben, hat er nur den Platz benötigt, der zum Umwickeln seiner Elemente erforderlich ist.