CSS Flexbox

Posicionamiento de elementos con cajas flexibles.

Flexible box es un módulo de diseño unidimensional para distribuir elementos en filas o columnas. Los elementos se flexionan para llenar espacio adicional y se encogen para encajar en espacios más pequeños. Este artículo explica los fundamentos.

Photo by David Hofmann on Unsplash

¿Porqué Flexbox?

Por un largo periodo de tiempo, las únicas herramientas confiables y compatibles con todos los navegadores para crear Layouts con CSS eran float y positioning. Dichas herramientas son muy buenas, y funcionan, pero en ciertos momentos tienden a hacer limitadas y frustrantes.

La idea principal detrás de un diseño flexible es dar a un container la habilidad de alterar el ancho/alto (y ordenar) sus items para llenar el espacio disponible(comúnmente en cualquier clase de dispositivos y tamaños de pantalla). Un container flexible expande sus items para llenar todo el espacio disponible, o los encoje para prevenir su desbordamiento.

Si el diseño “regular” está basado en direcciones de flujo en bloque y en linea, el diseño flexible es basado en “la dirección del flujo flexible”.

Bases

• Eje principal — El eje principal de un contenedor flexible es el eje primario, a lo largo del cual se disponen los items flexibles. Cuidado, este eje no es necesariamente horizontal; depende de la propiedad flex-direction que veremos debajo.
• Eje transversal — El eje perpendicular al eje primario se denomina eje transversal. Su dirección depende de la dirección del eje principal.
• Elemento padre (Container) — El contenedor se convierte flexible cuando se le coloca la propiedad display: flex.
• Elementos hijos (Items) — Los hijos del contenedor flexible son llamados items.

¿Como se utiliza?

Todo inicia aplicándole la propiedad display: flex; o display: inline-flex al contenedor. Esto define un container flexible; en línea o bloque dependiendo del valor dado. Además, habilita el contexto de flexibilidad para todos sus hijos directos.

.container {   
    display: flex; /* o inline-flex */ 
}

Debido a que flexbox es todo un módulo y no una simple propiedad, implica muchas cosas, incluido todo su conjunto de propiedades. Algunas de ellas están destinadas a colocarse en el contenedor (elemento principal, conocido como “flex container”), mientras que los otros están destinados a colocarse en los hijos (“flex items”) de dicho contenedor.

Propiedades para el contenedor (contenedor flexible)

• flex-direction: Cambia el comportamiento del eje principal.

Photo by CSS-Tricks

.container {   
    flex-direction: row | row-reverse | column | column-reverse; 
}

row — Establece la dirección del eje principal en horizontal.

row-reverse — Establece la dirección del eje principal en horizontal pero invertido.

column — Establece la dirección del eje principal en vertical.

column-reverse — Establece la dirección del eje principal en vertical pero inverso.

• flex-wrap: Evita o permite el desbordamiento.

Photo by CSS-Tricks

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

nowrap: (default): Todos los items flexibles estarán en una línea.

wrap: Los items flexibles se envolverán en múltiples lineas, desde arriba a abajo.

wrap-reverse: Los items flexibles se envolverán en múltiples líneas de abajo a arriba.

• flex-flow: Propiedad alias que combina las propiedades “flex-wrap” y “flex-direction”. Acepta valores de ambas propiedades.

.container {   
    flex-flow: <‘flex-direction’> || <‘flex-wrap’>
}

• justify-content: Se usa para alinear los ítems actuando sobre el eje principal

.container {   
     justify-content: flex-start | flex-end | center | space-between   | space-around | space-evenly;
 }

flex-start: Agrupa los ítems al comienzo del eje principal.

flex-end: Agrupa los ítems al final del eje principal.

center: Agrupa los ítems al centro del eje principal.

space-between: Distribuye los ítems dejando el mismo espacio entre ellos sobre el eje principal.

space-around: Distribuye los ítems dejando el mismo espacio a ambos lados de cada uno de ellos.

space-evenly: Los ítems se distribuyen de modo que el espaciado entre dos elementos (y el espacio en los bordes) sea igual.

Photo by CSS-Tricks

• align-content: Se usa para alinear los ítems actuando sobre el eje primario sólo cuando se está en modo multilínea.

.container {   
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
    flex-wrap: wrap | wrap-reverse; 
}

flex-start: Distribuye los ítems al principio del eje principal.

flex-end: Distribuye los ítems al final del eje principal.

center: Distribuye los ítems al centro del eje principal.

space-between: Distribuye los ítems de inicio a fin.

space-around: Distribuye los ítems de dejando el mismo espacio a los lados de cada uno.

space-evenly: Distribuye los ítems para que es espacio vacío sea equitativo.

strech: Estira los ítems para ocupar de forma equitativa todo el espacio.

Photo by CSS-Tricks

• align-items: Se encarga de alinear los ítems en el eje secundario.

.container {   
    align-items: stretch | flex-start | flex-end | center | baseline; 
}

flex-start: Alinea los ítems al comienzo del eje secundario.

flex-end: Alinea los ítems al final del eje secundario.

center: Alinea los ítems al centro del eje secundario.

strech: Alinea los ítems estirándolos de forma que ocupen todo el espacio.

baseline: Alinea los ítems según la base del contenido de los ítems.

Photo by CSS-Tricks

Propiedades para los items (elementos flexibles)

• align-self: Igual que “align-items” pero este actúa directamente sobre un ítem.

.item {   
    align-self: auto | flex-start | flex-end | center | baseline | stretch; 
}

flex-start: Alinea el ítem al comienzo del eje secundario.

flex-end: Alinea el ítem al final del eje secundario.

center: Alinea el ítem al centro del eje secundario.

stretch: Estira el ítem al para que ocupe todo el espacio.

Photo by CSS-Tricks

• flex-grow: Indica el factor de crecimiento de un ítem con respecto al resto.

.item {   
    flex-grow: <number>; /* default 0 */ 
}

Photo by CSS-Tricks

• flex-basis: Define el tamaño por defecto de base que tendrá el ítem antes de aplicarle cualquier tipo de distribución.

.item {   
    flex-basis: <length> | auto; /* default auto */ 
}

• flex-shrink: Igual que “flex-grow” pero al contrario, mientras más grande el número, más pequeño el ítem.

.item {   
    flex-shrink: <number>; /* default 1 */ 
}

• order: Modifica y establece el orden del ítem según una secuencia numérica, por defecto todos los ítems tienen order 0

.item {   
     order: <integer>; /* default is 0 */ 
}

Photo by CSS-Tricks