¿Qué es Flexbox (y por qué deberías usarlo)?

Puede construir secciones limpias todo el día, pero la alineación de elementos en cada tamaño de pantalla puede comenzar a sentirse más como prueba y error que el diseño intencional.

Flexbox soluciona eso. Le brinda un control real sobre cómo los elementos se sientan, estiran, encogen y envuelven dentro de un contenedor, sin ajustar constante de márgenes y acolchado. En esta guía, desglosaremos cómo funciona FlexBox, cómo simplifica los diseños y cómo usarlo visualmente dentro del Divi 5 sin escribir una sola línea de código.

Que es flexbox

Flexbox, abreviatura de un diseño de caja flexible , es un modelo de diseño que simplifica cómo los elementos se alinean y se espacian dentro de un contenedor. En lugar de colocar cada elemento manualmente usando márgenes o anchos fijos, Flexbox le permite definir cómo esos elementos deben comportarse dependiendo del espacio disponible.

¿Deberían crecer los elementos para llenar espacio extra? ¿Se encoge cuando el espacio está apretado? ¿Deberían envolverse a la siguiente línea cuando ya no encajan? Usted toma estas decisiones a través de un conjunto de propiedades que aplica al contenedor y sus hijos. Así es como decide cómo debe responder su diseño.

Tomemos ejemplos prácticos para comprender esto. Digamos que tienes tres botones dentro de una fila horizontal. Con FlexBox, puede centrarlos en un punto de vista uniformemente dentro del contenedor:

Decide que el botón central debe ocupar más espacio que los demás:

O es posible que desee que los botones se apilen automáticamente cuando la pantalla se vuelva más estrecha:

Flexbox hace que todo esto sea posible con propiedades simples como Justify-Content, Flex-Wrap y Flex-Crow.

Además, le permite controlar cómo los elementos están espaciados, alineados en diferentes ejes y se ordenan visualmente, sin cambiar su posición real en el constructor. Puede centrar el contenido, empujarlo hacia la parte superior o inferior del contenedor, alinear un elemento de manera diferente al resto o incluso revertir el orden completo a través de los puntos de interrupción.

Podrías pensar: ¿No puedo hacer esto con márgenes y relleno?

Tienes razón. Puede centrar elementos manualmente o ajustar su tamaño con anchos personalizados. Sin embargo, esos métodos dependen de posicionar cada elemento individualmente. Estás ajustando cada elemento uno a la vez, para cada tamaño de pantalla.

Flexbox cambia ese proceso por completo. En lugar de tratar cada elemento por separado, le permite definir reglas de diseño a nivel de contenedor una vez. Usted le dice al contenedor cómo sus hijos deben comportarse en diferentes escenarios, y los ajusta según sea necesario.

Este enfoque hace que los diseños sean más consistentes, más fáciles de administrar y más flexibles a medida que los diseños evolucionan, especialmente cuando se cambian los tamaños de pantalla o se agregan nuevos módulos.

Cómo la dirección flexible afecta la alineación

Una de las primeras opciones que realiza en FlexBox es la dirección en la que deben fluir los elementos, ya sea en una fila o una columna. La propiedad Flex-Direction establece esto y define cómo los elementos se alinean, se envuelven y se espacian dentro del contenedor.

Entendamos esto mejor porque las propiedades comunes como Justify-Content y Aline-Content dependen completamente de qué dirección se establece. No funcionan con el diseño predeterminado del navegador, pero los ejes creados por Flexbox: el eje principal y el eje cruzado . El eje principal sigue la dirección que establece con la dirección flexible: horizontal para filas, vertical para columnas. El eje cruzado va al otro lado: vertical para filas, horizontal para columnas.

Entonces, el eje principal se ejecuta de izquierda a derecha cuando la dirección se establece en fila. Eso significa que Justify-Content mueve elementos a través de la fila, y alinearse, los elementos controla cómo se alinean verticalmente dentro de esa fila.

Y cuando cambia la dirección a la columna, toda la lógica de alineación se voltea. El eje principal ahora funciona de arriba a abajo, lo que significa que justificar el contenido alinea los elementos verticalmente, y los elementos alineados ajustan su posición de izquierda a derecha.

Al principio puede sentirse ligeramente confuso, pero una vez que vea cómo responden los ejes principales y cruzados a la dirección, hace clic. Comenzará a detectar patrones, y las decisiones de diseño se sentirán más intuitivas. También hay una tabla de referencia rápida a continuación si desea verificar dos cosas mientras practica.

Propiedades de sintaxis y flexbox comunes

Cambie la propiedad de visualización de un contenedor desde el bloque para flexionar para activar FlexBox. Cuando haces esto, el navegador comienza a tratar elementos internos como filas, botones, tarjetas o iconos como elementos flexibles.

.container {
display: flex;
}

A partir de ahí, utiliza diferentes propiedades de FlexBox para controlar el comportamiento. Por ejemplo, Justify-Content decide cómo se espacian los elementos a lo largo del eje principal (esto se establece en horizontal de forma predeterminada, Flex-Direction: Row) . Use el arranque flexible para alinear los elementos a la izquierda, Flex-End para empujarlos a la derecha, centrarse para centrarlos o espaciar y espaciarlos para extenderlos de manera uniforme.

Por defecto, Flexbox intenta adaptarse a todos los elementos en una línea. Si hay demasiados, se encenderán para adaptarse a su configuración Flex-Shrink, y si no pueden encogerse lo suficiente, pueden desbordar el contenedor. Para evitar esto, active Flex-Wrap para que los elementos se muevan a una nueva línea en lugar de abrocharme en una.

Ya puede pensar en muchos casos de uso en los que estas dos propiedades pueden resolver problemas de diseño. Pero hay muchos más, y cada uno le brinda un control específico sobre el tamaño, el orden, la alineación y el espacio.

Si tienes curiosidad por ver cómo funcionan realmente de una manera juguetona y práctica, prueba Flexbox Froggy. Es un pequeño juego divertido en el que aplicas un código FlexBox real para mover ranas alrededor de un estanque. En el camino, dejas de adivinar y comienzas a reconocer exactamente lo que hace cada propiedad.

¿Por qué usar Flexbox?

A estas alturas, ya ha visto cómo Flexbox cambia cómo responden los diseños al espacio. Pero el valor real proviene de lo que ese cambio le permite hacer más fácilmente. Flexbox convierte los desafíos de diseño terco en patrones simples y reutilizables.

• Alineación simplificada: Propiedades como Justify-Content y Aline-Items Center o Space elementos sin depender de ajustes de margen o clases auxiliares.
• Responsivo de forma predeterminada: los elementos cultivan, se encogen o envuelven naturalmente según su espacio. Esto da como resultado diseños más limpios que se adaptan sin puntos de interrupción adicionales.
• Espaciado y dimensionamiento automático: controla cómo los elementos comparten espacio con propiedades como Flex-Crow, Flex-Shrink y Flex-Basis, lo que hace que el fluido de diseño en lugar de fijo.
• Reordenamiento sin cambiar HTML: puede cambiar el orden visual de los elementos sin tocar el HTML. La estructura permanece limpia, mientras que el diseño se ajusta para diferentes pantallas.
• Menos hacks de diseño: ya no necesitas flotadores, Clearfixes o scripts de coincidencia de altura. Flexbox reemplaza a aquellos con opciones modernas y confiables.

Y debido a que es compatible con todos los navegadores principales, Flexbox no solo es eficiente sino también confiable. Esto lo convierte en una opción moderna y confiable para proyectos del mundo real.

Por qué Flexbox es a menudo mejor que la red

La cuadrícula es otro sistema de diseño popular, como Flexbox. Sin embargo, ambos están construidos para diferentes casos de uso.

La cuadrícula, por ejemplo, está diseñada para diseños bidimensionales donde necesita control sobre filas y columnas. Las exhibiciones de productos, las galerías de imágenes y los diseños editoriales al estilo de la revista son ejemplos de cuadrícula, ya que dependen de una estructura muy alineada en ambos ejes.

Comienza definiendo la cuadrícula: cuántas filas y columnas hay, y cuán ancho o alto debería ser cada uno. Luego coloca cada elemento en esa estructura.

Este es un diseño de cuadrícula. Los elementos están alineados en ambos ejes: filas y columnas, con espaciado fijo y proporciones.

Pero no todos los diseños necesitan ese nivel de planificación.

La mayoría de las veces, las secciones de UI fluyen en una sola dirección. Las filas de tarjetas, los bloques de icono-plus-text y los enlaces de navegación siguen un eje, no dos. Ahí es exactamente donde encaja Flexbox.

En un diseño de FlexBox, las tarjetas están alineadas en una dirección (fila o columna) y luego envueltas y espaciadas según las reglas del contenedor.

No tiene que mapear todo el diseño por adelantado. Simplemente le indique al contenedor cómo los elementos deben comportarse a lo largo de un solo eje, y Flexbox lo maneja.

Entonces, a menos que esté diseñando algo que realmente dependa de una cuadrícula rígida, Flexbox a menudo será la opción más rápida, más simple y más flexible.

Flexbox en Divi 5

Todo lo que hemos aprendido hasta ahora sobre Flexbox es excelente, pero escribir CSS personalizado para cada ajuste de diseño no es lo que desea hacer, especialmente si ha construido su sitio con un constructor visual como Divi.

Es por eso que Divi 5 ahora incluye controles Flexbox incorporados. Ya no necesita cambiar de pestaña ni agregar CSS manualmente. Todo esto, e incluso los comportamientos de diseño avanzados, ahora está integrado en el constructor visual, menos la codificación y un backend abrumador.

Suscríbete a nuestro canal de YouTube

Larga historia corta, no es necesario recordar la sintaxis o los nombres de las propiedades, simplemente seleccione lo que desea de la interfaz. Haga clic en cualquier sección, fila o columna, diríjase a la pestaña de diseño y en el diseño del diseño> Asegúrese de usar Flex.

Esto abre un nuevo conjunto de controles de diseño. Estas son las propiedades de Core FlexBox que generalmente escribiría en CSS, pero ahora como opciones en clic en Clickable. Puede probar los cambios en vivo y ver cómo reacciona su contenido.

Entonces, incluso si nunca has escrito una sola línea de código FlexBox, no te perderás nada. Divi 5 le brinda el mismo control de diseño visualmente con el mismo nivel de control, pero mucha más facilidad.

Aprenda todo sobre el sistema FlexBox de Divi 5

Nuevas estructuras de fila

¿Por qué divi cuando otros constructores web también lo tienen? Si bien muchos constructores web ofrecen FlexBox como una opción de diseño, Divi 5 lo aborda de manera diferente. Esta no es una característica en capas en la parte superior de un sistema existente; Ahora es el núcleo de cómo funciona el constructor.

Todo el motor de diseño ha sido reconstruido desde cero con Flexbox en su base. Como resultado, el comportamiento de diseño se siente más consistente y predecible porque sigue una lógica de diseño diseñada intencionalmente.

Por ejemplo, cuando agrega una nueva sección o fila en Divi 5, notará inmediatamente algo diferente. Nuevas estructuras. Cada uno ahora se ejecuta en FlexBox de forma predeterminada, lo que significa alineación, espacio y capacidad de respuesta se manejan de manera más inteligente desde el principio.

No necesitará activar Flex para los nuevos elementos de diseño que agregue. Y cuando lo hace, mientras edita un diseño anterior, las herramientas de alineación y espaciado se vuelven instantáneamente más fáciles de administrar.

También puede cambiar la forma en que se organizan las columnas dentro de una fila utilizando la estructura de columna de cambio.

Esto abre un panel donde puede seleccionar una nueva estructura de columna. El diseño se actualiza inmediatamente, con Flexbox ajustando automáticamente el espacio y la alineación.

Intente agregar algunos tipos de filas diferentes y cambiar el tamaño de la pantalla. Verás cómo todo cambia y se adapta sin descomponer. Esa es la fuerza de Flexbox horneada en el constructor, lo que hace que Divi 5 sea una opción más confiable y moderna.

Cómo funciona Flexbox en Divi 5

Si está comenzando, aquí hay un tutorial rápido para ayudarlo a sentirse seguro al usar FlexBox en Divi 5.

Controles de diseño

Cuando cambia una sección, fila o columna para flexionar el diseño, aparece un nuevo conjunto de controles de diseño en la configuración de diseño de diseño> . Estos le brindan un control visual de Flexbox justo con sus opciones habituales.

• (1) Estilo de diseño: aquí es donde activas Flex. Una vez establecido, otras opciones específicas de flex como la dirección, la alineación y el espacio se vuelven visibles.
• (2) Gap Horizontal: agrega espacio entre los elementos de izquierda a derecha.
• (3) Gap vertical: establece el espacio entre los elementos apilados cuando se usa diseños de columna.
• (4) Dirección de diseño: cambia las direcciones de flujo, fila, columna o invertido, para que los elementos puedan alinearse de lado a lado o de arriba a abajo.
• (5) Justificar contenido: alinea los elementos a lo largo del eje principal. Puede centrarlos, empujarlos a un lado o extenderlos.
• (6) Alinear los elementos: alinea elementos a lo largo del eje cruzado, lo cual es útil al organizar elementos verticalmente dentro de una fila horizontal.
• (7) Envoltura de diseño: esto permite que los elementos se muevan a la siguiente línea cuando se agota el espacio. Útil mientras construye diseños que responden al tamaño de la pantalla en lugar de romperse.

Supongamos que tiene una barra de marca con logotipos y quiere que sean más grandes. Con la dirección flexible establecida en la fila y el envoltorio de diseño encendido, fluirán automáticamente en dos filas cuando no haya espacio.

Alinear elementos en dos filas ahora es fácil sin consultas de medios o una solución manual.

Controles de columna y dimensionamiento

Una vez dentro de una fila habilitada para FLEX, cada columna tiene una nueva configuración en Diseño> dimensionamiento llamado clase de columna . Esto determina cuánto espacio ocupa una columna en función de su contenido y sus alrededores.

Puede elegir entre el encogimiento para que se ajuste (lo que hace que la columna sea tan ancha como su contenido) o crecer para llenar (lo que estira la columna para ocupar espacio adicional).

Por ejemplo, si desea que una columna de texto se sienta más prominente y tenga elementos de carta que abrazan su contenido, configuraría las tarjetas para encajar y el texto para crecer para llenar.

Controles de pedido

Otra herramienta poderosa, pero a menudo pasada por alto, es la configuración del pedido en la pestaña de contenido . Esto le permite reordenar visualmente columnas y módulos sin cambiar la estructura de diseño en la vista de estructura o capas.

Digamos que quiere que aparezca un módulo en particular en el móvil pero en segundo lugar en el escritorio. Puede asignar diferentes valores de pedido en cada punto de ruptura.

Casos de uso práctico de Flexbox

Veamos algunos casos de uso más de FlexBox que ahora se simplifican con Divi 5.

1. Alinee verticalmente cualquier cosa con Flex

Durante mucho tiempo, la alineación vertical fue uno de los problemas de diseño más molestos del diseño web. Intentaría acolchar trucos, posicionamiento absoluto, márgenes manuales y otras cosas solo para terminar con algo que se veía bien en los escritorios pero estaba roto en pantallas más pequeñas.

Con Divi 5, ese dolor de cabeza se ha ido. Ahora, si desea centrar el contenido verticalmente dentro de una sección, simplemente establece los elementos alineados en el centro.

Eso es todo. El diseño se ajusta automáticamente a través de los puntos de interrupción, y su contenido siempre permanece en el punto óptimo. Lo que solía tomar CSS Gymnastics ahora es solo un par de clics dentro del constructor.

2. Igualar las alturas de la tarjeta automáticamente

Probablemente te hayas encontrado con este problema antes. Creas una fila de tarjetas, como una sección de propaganda, y todo se ve bien hasta que un elemento tiene más texto que los demás. De repente, tu diseño se siente desigual. Algunas columnas se estiran más altas, otras se mantienen cortas y el diseño pierde el equilibrio.

Esa limpieza manual ya no es necesaria. Cuando cambia una fila o sección para flexionar, Divi aplica la configuración predeterminada que tratan cada columna como un elemento flexible. Esto hace que se estiren automáticamente para que coincidan con la altura de los demás dentro de la misma fila, independientemente del contenido en el interior.

También se mantiene receptivo. En pantallas más pequeñas, las columnas se envuelven en nuevas filas sin necesidad de ajustes adicionales, y el comportamiento de igual altura continúa aplicándose.

3. Envuelva los botones automáticamente a través de los puntos de interrupción

Mantener una fila de botones ordenados y legibles en diferentes tamaños de pantalla puede ser un dolor. Por lo general, termina agregando nuevas filas o ajustando manualmente el diseño para cada punto de interrupción. Pero con Divi 5, eso ya no es necesario.

Encienda el diseño flexible y habilite el envoltorio de diseño en la vista de la computadora portátil . Eso es todo. Los botones se envolverán automáticamente en múltiples líneas en pantallas más pequeñas sin romper el diseño.

Los botones mantienen su espacio y alineación en pantallas más grandes y se apilan naturalmente en tabletas y teléfonos. Incluso puede ajustar su alineación utilizando Justify-Content y controlar el espacio entre ellos usando GAP, para que todo se ve limpio e intencional en todos los tamaños.

Divi + Flexbox solo tiene sentido

Has visto cómo funciona Flexbox, cómo Divi 5 lo hace visual y cómo los dolores de cabeza de diseño comunes ahora tardan segundos en lugar de horas. Divi 5 no solo admite Flexbox, está construido a su alrededor. Cada sección, fila y columna está lista para comportarse como era de esperar sin CSS personalizado.

Flexbox no es solo una opción si está diseñando con Divi 5. Es el valor predeterminado más inteligente. Diseños más limpios, menos soluciones y control receptivo horneados directamente al constructor. Ese es el cambio, y eso es algo que te prepara para el futuro del diseño web.