Flexbox

La propiedad Flexible Box, o flexbox, de CSS3 es un modo de diseño que permite colocar los elementos de una página para que se comporten de forma predecible cuando el diseño de la página debe acomodarse a diferentes tamaños de pantalla y diferentes dispositivos.

Lo que caracteriza un diseño flexible es su habilidad para alterar el ancho y alto de sus elementos para ajustarse lo mejor posible al espacio disponible en cualquier dispositivo. Un contenedor flexible expande sus elementos para rellenar el espacio libre, o los comprime para evitar que rebasen el área prevista.

El algoritmo del modelo de diseño de "cajas flexibles" no parte de niguna dirección predeterminada, al contrario de lo que ocurre con el modelo "bloque", que asume una disposición vertical de los elementos, o lo que pasa con el modelo "en línea", que asume una disposición horizontal.

Aunque al hablar de las "cajas flexibles" nos olvidamos de términos como "horizontal/en línea" y "vertical/bloque", se hace necesario emplear una nueva terminología. Fíjate en el siguiente diagrama para afianzar el vocabulario empleado en sus elementos. Se muestra un contenedor flexible que tiene una flex-direction de tipo row, que significa que los elementos flexibles se muestra uno a continuación del otro horizontalmente a lo largo del eje principal (main axis) de acuerdo con el modo de escritura preestablecido, y en este caso, la dirección en que el texto de los elementos fluye es de izquierda-a-derecha.

Partes y propiedades importantes de flexbox:

Contenedor flexible (Flex container):

El elemento "padre" que contiene los elementos flexibles. Un contenedor flexible se define usando los valoresflexoinline-flexen la propiedad display.

Elemento flexible (Flex item):

Cada hijo de un contenedor flex se convierte en un elemento flexible. Si hay texto directamente incluido en el contenedor flexible, se envuelve automáticamente en un elemento flexible anónimo.

Ejes:

Cada diseño de "caja flexible" sigue dos ejes. El eje principal es el eje a lo largo del cual los elementos flexibles se suceden unos a otros. El eje secundario es el eje perpendicular al eje principal.
La propiedadflex-directionestablece el eje principal.
La propiedadjustify-contentdefine cómo los elementos flexibles se disponen a lo largo del eje principal en la línea en curso.
La propiedadalign-itemsdefine cómo los elementos flexibles se disponen a lo largo del eje secundario de la línea en curso.
La propiedadalign-selfdefine cómo cada elemento flexible se alinea respecto al eje secundario, y sustituye al valor por defecto establecido poralign-items.

Direcciones:

Los lados inicio principal/fin principal (main start/main end) e inicio secundario/fin secundario (cross start/cross end) del contenedor flexible describen el origen y final del flujo de los elementos flexibles. Estos siguen los eje principal y secundario según el vector establecido por writing-mode (izquierda-a-derecha, derecha-a-izquierda, etc.).
La propiedadorderasigna elementos a grupos ordinales y determina qué elementos aparecen primero. La propiedadflex-flow propertycombina las propiedadesflex-direction yflex-wrappara colocar los elementos flexibles.

Líneas:

Los elementos flexibles pueden disponerse en una sola o varias líneas de acuerdo con la propiedadflex-wrap, que controla la dirección del eje secundario y la dirección en la que las nuevas líneas se apilan.

Dimensiones:

Los términos equivalentes a "altura" y "anchura" usados en los elementos flexibles son tamaño principal (main size) y tamaño secundario (cross size), que respectivamente siguen al eje principal y al eje secundario del contenedor flexible.
Las propiedadesmin-heightymin-widthtienen un nuevo valor,autoque establece el tamaño mínimo de un elemento flexible.
La propiedadflex combina las propiedadesflex-basis,flex-grow, yflex-shrinkpara establecer el grado de flexibilidad de los elementos flexibles.

Pinchar aquí para ver ejemplos

Pinchar aquí para volver a inicio