Flexbox - Contenedores Flex

Para usar Flexbox en su aplicación, necesita crear / definir un contenedor flexible usando el display propiedad.

Usage -

display: flex | inline-flex

Esta propiedad acepta dos valores

  • flex - Genera un contenedor flexible a nivel de bloque.

  • inline-flex - Genera una caja contenedor flexible en línea.

Ahora veremos cómo utilizar el display propiedad con ejemplos.

Flexionar

Al pasar este valor a la propiedad de visualización, se creará un contenedor flexible a nivel de bloque. Ocupa todo el ancho del contenedor principal (navegador).

El siguiente ejemplo demuestra cómo crear un contenedor flexible a nivel de bloque. Aquí, estamos creando seis cajas con diferentes colores y hemos utilizado el contenedor flexible para sujetarlas.

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

Producirá el siguiente resultado:

Dado que le hemos dado el valor flex al display propiedad, el contenedor utiliza el ancho del contenedor (navegador).

Puede observar esto agregando un borde al contenedor como se muestra a continuación.

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

Producirá el siguiente resultado:

Flexión en línea

Al pasar este valor al displaypropiedad, se creará un contenedor flexible de nivel en línea. Simplemente ocupa el lugar requerido para el contenido.

El siguiente ejemplo demuestra cómo crear un contenedor flexible en línea. Aquí, estamos creando seis cajas con diferentes colores y hemos utilizado el contenedor inline-flex para guardarlas.

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

Producirá el siguiente resultado:

Dado que hemos utilizado un contenedor flexible en línea, solo tomó el espacio necesario para envolver sus elementos.