Acerca de Flexbox

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.

¿Te ha resultado útil esta información?

¿Cómo podemos mejorar esta página?
Búsqueda
Borrar búsqueda
Cerrar búsqueda
Aplicaciones de Google
Menú principal
14561833031076053654