CSS Flexible Box Layout

Diseño de Caja Flexible, comúnmente conocido como Flexbox,​ es un modelo de diseño CSS3.​ Está en la etapa de recomendación de candidatos (CR) del W3C.​ La disposición de flexbox permite que los elementos adaptables dentro de un contenedor se organicen automáticamente dependiendo del tamaño de la pantalla o del dispositivo.

Conceptos

La mayoría de las páginas web están escritas en una combinación de HTML (Lenguaje de Marcado de Hipertexto) y CSS (Hojas de Estilos en Cascada). En resumen, HTML especifica el contenido y estructura lógica de la página, mientras que el CSS especifica cómo se ve: sus colores, fuentes, formato, diseño, y estilos.

El diseño flex-box de CSS es una forma particular de especificar el diseño de las páginas HTML.

Uno de los rasgos más definitorios de la disposición de flex es su capacidad para adaptarse al entorno, basada en su entorno de visualización. Las cajas flex pueden ajustarse en tamaño, ya sea disminuyendo, para evitar acaparar innecesariamente el espacio, o aumentando para dejar espacio para que el contenido se limite dentro de sus límites. Además, la disposición de las cajas flexibles es menos restrictiva en cuanto al flujo de contenidos que las de los tipos de visualización en bloque y en línea, que suelen ser unidireccionales. De hecho, no sólo puede especificarse el flujo flex direccional, a nivel de estilo, como hacia la derecha, hacia la izquierda, hacia arriba o hacia abajo; los elementos individuales dentro de un contenedor flex también pueden reordenarse y reorganizarse automáticamente para adaptarse al espacio de disposición disponible.​

Historia

En la década de 2000, el uso intensivo de la Web por parte de los agentes móviles motivó "diseños líquidos" y elementos adaptables para la creciente variedad de tamaños de pantallas.​ En la década de 2010, el uso intensivo de frameworks de diseño de Javascript, como Bootstrap, inspiró las especificaciones de diseño de flex-box y grid.​​

Los módulos de CSS 3 incluían soluciones similares a esta, como flexbox y grid​.​

Terminología

A continuación se presentan algunos términos asociados con el modelo de diseño flexible.

Flex Container

El elemento padre que sostiene todos los elementos flex. Usando la propiedad display de CSS, el contenedor puede ser definido como flex o inline-flex.

Flex item

Cualquier elemento hijo directo que se mantenga directo del contenedor flex se considera un elemento flex. Cualquier texto dentro del elemento contenedor es envuelto en un elemento flex desconocido.

Ejes

Cada caja con propiedad flex contiene dos ejes: el principal y hachas de cruz. El main axis (eje principal) en el que los elementos se alinean entre sí. El cross axis (eje transversal) es perpendicular al eje principal.

Flex-direction

Establece el eje principal. Posibles argumentos: row (por defecto), row-reverse, column, column-reverse.

Justify-content

Determina cómo el contenido se coloca en el eje principal de la línea actual.

Argumentos opcionales: left, right, center, space-between, space-around.

Alinea-elementos

Determina el valor por defecto de cómo se colocan los elementos flex en el eje transversal de cada línea.

Align-content

Determina el valor por defecto de cómo se alinean las líneas de los ejes transversales.

Align-self

Determina cómo se coloca solo un elemento a lo largo del eje transversal. Esto anula los valores predeterminados establecidos por los elementos de alineación.

Directions

Los valores main-start/main-end determinan dónde empezar a colocar los items flex dentro del contenedor flex, empezando por el extremo del final principal. main-start/main-end determinan donde se llenan las líneas flex con los items flex desde el cross-start hasta el cross-end.

Order

Coloca los elementos en grupos y determina el orden en que deben ser colocados dentro del contenedor.

Flex-flow

Es una shorthand-property entre flex-direction y flex-wrap para colocar el contenido flex.

Líneas

Los elementos flex pueden colocarse en una línea singular o en múltiples líneas, según se define en la propiedad flex-wrap, que controla tanto la dirección del eje transversal como la forma en la que las líneas se apilan dentro de un contenedor.

Dimensiones

El Main size y el cross size son esencialmente la altura y el ancho del contenedor flex, cada uno de los cuales se ocupa del eje principal y del eje transversal respectivamente.

Designar un elemento flex

Designar un elemento como elemento flex es relativamente fácil. Todo lo que se necesita es establecer la propiedad display en flex o inline-flex de la siguiente manera:

display: flex;

O:

display: inline-flex;

Al ajustar la pantalla a uno de los dos valores anteriores, un elemento se convierte en contenedor flex y sus hijos en elementos flex. Si se ajusta la pantalla a flex, el contenedor se convierte en un elemento de nivel de bloque, mientras que si se ajusta a la pantalla a inline-flex, el contenedor de convierte en un elemento de nivel inline.​

Alinear al centro

Una de las ventajas de flexbox es la capacidad de alinear fácilmente elementos del contenedor con el centro de la página, tanto vertical como horizontalmente.

display: flex;
align-items: center;
justify-content: center;

Referencias

• Datos: Q17049185