Flexbox (diseño de cuadros flexibles de CSS) es una forma de organizar de forma flexible los elementos de un contenedor (llamado "contenedor flex"). Los elementos del contenedor (denominados "elementos del flex") pueden ampliarse o reducirse para optimizar el espacio del contenedor, conservando el orden y el espacio especificados. Flexbox puede resultar especialmente útil si quiere alinear los elementos de diferentes tamaños en filas o columnas, ya que los elementos más grandes ocupan más espacio que los más pequeños.
Configuración de Flexbox
Puede encontrar la configuración de Flexbox en el panel Adaptable, en la pestaña Flexbox.
Usar Flexbox
Para usar Flexbox, marque la casilla Usar Flexbox. El elemento superior se convertirá en el contenedor flex y podrá seleccionar las propiedades de Flexbox en el panel Adaptable.
Flexbox no está disponible si:
- El elemento superior actual es un elemento de texto como
<p>o<h1>. - El elemento superior actual contiene elementos insertados, como
<span>o<a>. Esta regla no se aplica si el elemento superior es una página.
Todos los elementos secundarios directos del contenedor flex se convierten en elementos del flex. No se incluyen las capas guía. Los elementos del flex se organizan en torno a un eje principal, que se puede establecer en horizontal o en vertical. También puede configurar la dirección en la que fluye el contenido a lo largo del eje. Como la orientación y la dirección de Flexbox pueden cambiar, las propiedades se definen con valores como "flex-start" y "flex-end" (principio o final del flex, respectivamente) en lugar de "top", "bottom", "left" o "right" (parte superior, inferior, izquierda o derecha, respectivamente)
Dirección
La dirección determina cómo se disponen los elementos del flex, definiendo el eje principal y la dirección del flujo a lo largo del eje.
| Dirección | Comportamiento | Eje principal |
|---|---|---|
| row | Los elementos del flex se disponen en filas, en la dirección del flujo del texto (desde la izquierda en los idiomas que usan una escritura de izquierda a derecha, como el español). |
Horizontal |
| row-reverse | Los elementos del flex se disponen en filas, en la dirección inversa al flujo del texto (desde la derecha en los idiomas que usan una escritura de izquierda a derecha, como el español). |
Horizontal |
| column | Los elementos del flex se disponen en columnas, en la dirección del flujo del contenido (normalmente, desde la parte superior). |
Vertical |
| column-reverse | Los elementos del flex se disponen en columnas, en la dirección inversa al flujo del contenido (normalmente, desde la parte inferior). |
Vertical |
Espacio
El espacio establece si los elementos del flex se espacian automáticamente o si se utilizan distancias fijas.
| Espacio | Comportamiento |
|---|---|
| Estándar | Los elementos del flex se disponen automáticamente en el contenedor flex según la configuración de Justificación, Encapsulado y Alineación. |
| Fijo | Los elementos del flex se disponen de acuerdo con el espacio entre elementos secundarios y la distancia de los elementos externos. |
Justificación
La justificación determina cómo se disponen los elementos del flex a lo largo del eje principal. Esta opción está disponible al usar el espacio estándar.
| Justificación | Comportamiento |
|---|---|
| flex-start | Los elementos del flex se apilan en el borde inicial de la fila o columna. |
| flex-end | Los elementos del flex se apilan en el borde final de la fila o columna. |
| center | Los elementos del flex se centran en torno al eje principal. |
| space-between | Los elementos del flex se espacian de manera uniforme a lo largo del eje principal, con los elementos iniciales y finales en los bordes del contenedor. |
| space-around | Los elementos del flex se espacian de manera uniforme a lo largo del eje principal, dejando la mitad de ese espacio a ambos extremos. |
| space-evenly | Los elementos del flex se espacian de manera uniforme a lo largo del eje principal, dejando el mismo espacio a ambos extremos. |
Alineación del eje transversal
La alineación del eje transversal es la forma en la que se disponen los elementos del flex en el eje transversal de la fila o columna.
| Alineación del eje transversal | Comportamiento |
|---|---|
| flex-start | Los elementos del flex se colocan en el borde inicial del eje transversal. |
| flex-end | Los elementos del flex se colocan en el borde final del eje transversal. |
| center | Los elementos del flex se centran a lo largo del eje transversal. |
| stretch | Los elementos del flex se estiran para rellenar el espacio disponible a lo largo del eje transversal. |
| baseline | Los elementos del flex se colocan a lo largo del eje transversal de forma que sus líneas base de texto estén alineadas. |
Encapsulado
El encapsulado determina si el contenido se envuelve dentro del contenedor. Esta opción está disponible al usar el espacio estándar.
| Encapsulado | Comportamiento |
|---|---|
| nowrap | Los elementos del flex se disponen en una sola fila o columna. |
| wrap | Los elementos del flex se pueden envolver para formar varias filas o columnas cuando los elementos del flex son demasiado grandes y no caben en una sola línea. |
| wrap-reverse | Los elementos del flex se pueden envolver para formar varias filas o columnas cuando los elementos del flex son demasiado grandes y no caben en una sola línea. La dirección del eje transversal se invierte. |
Envolver alineación
La opción Envolver alineación define la disposición de las filas o columnas a lo largo del eje transversal (que es perpendicular con respecto al eje principal) si hay varias filas o columnas en el contenedor flex. Esta opción está disponible cuando se usa el espacio estándar y el encapsulado está habilitado.
| Envolver alineación | Comportamiento |
|---|---|
| flex-start | Las filas o columnas se apilan en el borde inicial del contenedor. |
| flex-end | Las filas o columnas se apilan en el borde final del contenedor. |
| center | Las filas o columnas se centran a lo largo del eje transversal. |
| stretch | Las filas o columnas se estiran para rellenar el espacio disponible a lo largo del eje transversal, a menos que tengan una altura definida. |
| space-between | Las filas o columnas se espacian de manera uniforme a lo largo del eje transversal, con las filas o columnas iniciales y finales en los bordes del contenedor. |
| space-around | Las filas o columnas se espacian de manera uniforme a lo largo del eje transversal, dejando la mitad de ese espacio a ambos extremos. |
Espacio entre elementos secundarios
Distancia en píxeles entre dos elementos en el contenedor flex. Esta opción está disponible al usar un espacio fijo.
Distancia de los elementos externos
Distancia en píxeles entre los elementos externos y el contenedor flex. Esta opción está disponible al usar un espacio fijo.
Orden de los elementos secundarios
Los elementos incluidos en el contenedor flex se muestran aquí. Para que aparezcan en otro orden, arrastre los elementos a su nueva posición en la lista.
También puede mover elementos del flex en la escena para cambiar su orden.
Propiedades de los elementos secundarios de Flexbox
Los elementos del flex tienen sus propias propiedades. Selecciona un elemento secundario para ver y editar su configuración de Flexbox.
Aunque los elementos del flex pueden ampliarse o reducirse, respetan las anchuras y alturas mínimas y máximas. Sus propiedades Izquierda y Arriba están inhabilitadas, ya que los elementos del flex se ordenan de acuerdo con la configuración de Flexbox, pero las propiedades de Traslación se pueden usar para desplazar sus posiciones.
Alineación del eje transversal
La alineación del eje transversal de un elemento del flex anula la configuración de alineación del eje transversal predeterminada definida para el contenedor.
| Alineación del eje transversal | Comportamiento |
|---|---|
| auto | El elemento del flex utiliza la configuración de alineación del eje transversal del contenedor flex. |
| baseline | La línea base de texto del elemento del flex se corresponde con las líneas base de texto de otros elementos del flex. |
| center | El elemento del flex se coloca en el centro del eje transversal. |
| flex-end | El elemento del flex se coloca a lo largo del eje transversal, en el borde final del contenedor. |
| flex-start | El elemento del flex se coloca a lo largo del eje transversal, en el borde inicial del contenedor. |
| stretch | El elemento del flex se estira para rellenar el contenedor a lo largo del eje transversal, a menos que tenga una altura definida. |
Ampliación del flex
El factor de ampliación del flex determina cuánto se ampliará el elemento del flex para rellenar el espacio disponible en el contenedor flex a lo largo del eje principal, en proporción con los factores de ampliación del flex de otros elementos de la misma fila o columna. Esta opción está disponible al usar el espacio estándar.
Por ejemplo, si una fila contiene tres elementos del flex con factores de ampliación de 1, 1 y 2, el último elemento del flex ocupará el doble de espacio disponible en la fila que cada uno de los demás elementos.
Si el total de factores de ampliación del flex de los elementos de una fila o columna es inferior a 1, es posible que los elementos del flex no ocupen todo el espacio disponible.
Si el factor de ampliación del flex es 0, el elemento del flex no se ampliará.
Reducción del flex
El factor de reducción del flex determina cuánto se reducirá el elemento del flex para que quepa en el espacio disponible en el contenedor flex a lo largo del eje principal, en proporción con los factores de reducción del flex de otros elementos de la misma fila o columna. Esta opción está disponible al usar el espacio estándar.
Por ejemplo, si una fila contiene tres elementos del flex con factores de reducción de 1, 1 y 2, el último elemento del flex se reducirá más en relación con los demás elementos. Los factores de reducción del flex tienen en cuenta el tamaño del elemento del flex.
Cuando el factor de reducción del flex es 0, el elemento del flex no se reduce.