Flexbox - Contenitori Flex

Per utilizzare Flexbox nella tua applicazione, devi creare / definire un contenitore flessibile utilizzando il file display proprietà.

Usage -

display: flex | inline-flex

Questa proprietà accetta due valori

  • flex - Genera un contenitore flessibile a livello di blocco.

  • inline-flex - Genera una scatola contenitore flessibile in linea.

Ora vedremo come utilizzare il file display proprietà con esempi.

Flettere

Passando questo valore alla proprietà display, verrà creato un contenitore flessibile a livello di blocco. Occupa l'intera larghezza del contenitore principale (browser).

L'esempio seguente mostra come creare un contenitore flessibile a livello di blocco. Qui stiamo creando sei scatole con colori diversi e abbiamo utilizzato il contenitore flessibile per contenerle.

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

Produrrà il seguente risultato:

Dal momento che abbiamo dato il valore flex al display proprietà, il contenitore utilizza la larghezza del contenitore (browser).

Puoi osservarlo aggiungendo un bordo al contenitore come mostrato di seguito.

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

Produrrà il seguente risultato:

Flessibilità in linea

Passando questo valore al file displayproprietà, verrà creato un contenitore flessibile a livello in linea. Prende solo il posto richiesto per il contenuto.

L'esempio seguente mostra come creare un contenitore flessibile in linea. Qui stiamo creando sei scatole con colori diversi e abbiamo utilizzato il contenitore inline-flex per contenerle.

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

Produrrà il seguente risultato:

Poiché abbiamo utilizzato un contenitore flessibile in linea, ci è voluto solo lo spazio necessario per avvolgere i suoi elementi.