Flexible layout: Say hello to Flexbox!
Este artículo es un extracto traducido al español de A Complete Guide To Flexbox.
Flexbox es un módulo que provee una manera más eficiente de diseñar, alinear y distribuir elementos dentro de un contenedor, incluso cuando su tamaño es desconocido o dinámico (debido a esto, la palabra flex).
La principal idea detrás de flexbox es dar al contenedor la habilidad de alterar el ancho/alto (y orden) de sus elementos para acomodarlos de la mejor manera dentro del espacio disponible (mayormente, acomodarlos en cualquier tipo de dispositivo y tamaños de pantalla). Un flex container (contenedor flex) expande sus elementos para ocupar todo el espacio libre disponible, o se encoge para prevenir que se sobrepase.
Un aspecto muy importante es que flexbox es direction-agnostic, no se ve afectado por la dirección, a diferencia de los layouts regulares (block que está basado verticalmente e inline que está basado horizontalmente). Mientras que estos funcionan bien para páginas, carecen de flexibilidad para soportar aplicaciones largas o complejas (especialmente cuando se trata de cambio de orientación, cambio de tamaño, ajuste de ancho o alto, etc.).
Terminología
Debido a que flexbox es un módulo completo y no una simple propiedad, esto implica muchas cosas incluyendo su conjunto de propiedades. Algunas de estas están pensadas para ser establecidas en el contenedor (elemento padre, conocido como “flex container”) mientras que otras son para los elementos hijos (también llamado “flex items”).
Si un layout regular está basado tanto en direcciones block e inline, flexbox está basado en “flex-flow directions”. En la siguiente imagen muestra la terminología usada con flexbox:
Básicamente, los elementos serán alineados siguiendo tanto el eje principal (main axis, desde main-start hasta main-end) o el eje perpendicular (cross axis, desde cross-start hasta cross-end).
- main axis — El eje principal de un flex container es el eje primario mediante el cual serán alineados los flex items. Tener en cuenta que no es necesariamente el eje horizontal, esto dependerá de la propiedad flex-direction.
- main-start | main-end — Los flex items son ubicados dentro del contenedor empezando por main-start y terminando en main-end.
- cross axis — El eje perpendicular al eje principal es llamado cross axis. Su dirección depende de la dirección del eje principal.
- cross-start | cross-end — Los flex items son ubicados dentro del contenedor empezando por cross-start y terminando en cross-end.
Soporte de Navegadores
Dividido por versiones de Flexbox:
- (new) significa la reciente sintaxis de la especificación oficial (ejemplo: display: flex;).
- (tweener) significa una extraña sintaxis no oficial del 2011 (ejemplo: display: flexbox;).
- (old) significa una sintaxis antigua del 2009 (ejemplo: display: box;).
