Flexbox

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

 

 

 

Establecer orientación de FlexBox con la propiedad flex-direction

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

  • row
  • row-reverse
  • column
  • column-reverse

Por defecto se aplicará row

 

Alineación en el eje principal con la propiedades justify-content

Las propiedades justify-content nos permiten alinear elementos en el eje prinicipal o main axis

Propiedad justify-content y sus posibles valores

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

  • flex-start - Alinea los elementos al inicio del main axis
  • center - Alinea los elementos al centro del main axis
  • flex-end - Alinea los elementos al fin del main axis
  • space-between - Alinea los elementos dejando el mismo espacio entre ellos, inicia en el marge
  • space-around - Alinea los elementos y deja el mismo espacio hacia las orillas
  • space-evenly- Deja el mismo espacio entre los elementos

 

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

 

Alineación en el eje secundario con las propiedades align-items y align-content

Las propiedades align-items y aling-content nos permite alinear los elementos en el eje secundario o across axis, la diferencia radica que usaremos align-item cuando se tiene una sola línea de elementos y align-content cuando se tienen varias líneas.

Los posibles valores que puede tener son:

  • stretch - Expande los elementos en el eje secundario
  • flex-start - Alinea los elementos al inicio del eje secundario
  • center - Alinea los elementos al centro del eje secundario
  • flex-end - Alinea los elementos al fin del eje secundario
  • space-between - Distribuye los elementos en el eje secundario dejando el mismo espacio iniciando a las orillas
  • space-around - Distribuye los elementos en el eje secundario y deja el mismo espacio a las orillas

 

**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.