Flexbox es un modelo unidimensional de layout, nos ayuda a distribuir elementos o items dentro de interfaz web, mejorando sus capacidades de alineación.

Para trabajar con flexbox necesitamos al menos un contenedor (flex-container) y al menos un hijo (flex-item)

Los elementos flex-item son las verdaderas cajas flexibles, sólo serán flex item los hijos directos del flex-container.

¿Cómo definir o usar Flexbox?

Para usar Flexbox debemos usar la propiedad display con el valor flex o flex-inline, lo que hace esto es definir a los items hijos como cajes flexibles.

La diferencia entre flex y flex-inline es que flex ocupará el 100% del ancho mientras que con flex-inline el ancho estará definido por su contenido.

Ejemplo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <style>
                
        .flex-container{
            display: flex;
        }

        .flex-item{
            width: 50px;
            height: 50px;
            background-color: blue;
            text-align: center;
            margin: 0.5em;
        }

    </style>

</head>
<body>


    <div class="flex-container">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>    
        <div class="flex-item">4</div>    
        <div class="flex-item">5</div>    
    </div>
    
</body>
</html>

 

 

Resultado:

1
2
3
4
5

 

Cuanda usamos Flexbox internamente se crean dos ejes en el contenedor un eje principal llamado main axis y un eje perpenticular a este llamado cross axis, por defecto el eje principal es horizontal pero esa propiedad puede cambiar.

 

 

 

Propiedad flex-direction

La propiedad flex-direction nos permite definir la dirección del eje principal puede tener cuatro valores:

Por defecto se aplicará row

 

Propiedades justify-content y align-content

 

Las propiedades justify-content nos permiten alinear elementos en el eje prinicipal o main axis, mientras que align-content nos permite alinear elementos en el eje secundario o across axis

Propiedad justify-content

Como mencionamos esta propiedad nos permite alinear elementos en el eje principal los posibles valores que puede tener son:

 

**Recuerda que la propiedad justify-content: valor; deber ser aplicada al contenedor padre.

 

Propiedad align-items

Nos permite alinear los elementos en el eje secundario o across axis los posibles valores que puede tener son:

 

**Recuerda que la propiedad aling-items: valor; deber ser aplicada al contenedor padre.

 

Propiedad flex-wrap

En ocasiones los flex items podrán llegar a ser más grandes que su su contenedor padre o flex container para ello podemos usar la propiedad flex-wrap que puede tener 3 posible valores

.flex-container{
  display:flex;
  flex-wrap: nowrap | wrap | wrap-reverse

}

Por defecto el valor sera no nowrap, al definir el valor como wrap llegado el momento en que los flex items sobre pasen el tamaño del flex container estos colapsarán a una nueva línea, considerando cada linea como un flex-container.

 

 

 

 

 

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *