Comprender cada configuración de FlexBox en Divi 5

Flexbox y Divi 5 son un dúo poderoso que permite a los usuarios de Divi crear diseños impresionantes y receptivos. En esta publicación, proporcionaremos la mejor guía para la comprensión y el uso de cada configuración de FlexBox para crear fácilmente diseños flexibles y receptivos.

Flexbox está en el corazón del renovado Visual Builder de Divi 5, lo que permite a los usuarios crear diseños impresionantes con un control inigualable. El sistema de diseño Flexbox de Divi 5 hace que los diseños complejos sean muy fáciles, desde alinearse el contenido hasta la construcción de cuadrículas dinámicas.

Vamos a sumergirnos.

¿Qué es Flexbox?

Flexbox es un modelo de diseño CSS diseñado para facilitar la organización, alinear y distribuir elementos dentro de un contenedor, incluso cuando sus tamaños son dinámicos. A diferencia de los diseños de CSS tradicionales que dependen de carrozas o posicionamiento, Flexbox ofrece una forma intuitiva de construir diseños flexibles y receptivos, lo que lo convierte en una piedra angular del desarrollo web moderno.

Suscríbete a nuestro canal de YouTube

Conceptos clave de Flexbox

Flexbox funciona en torno a varios conceptos fundamentales:

• Contenedor flexible: el elemento principal que tiene pantalla: Flex o en línea Flex Aplicada, estableciendo el contenido flexible. Este contenedor dicta cómo se comportan sus hijos dentro del diseño.
• Elementos flexibles: los niños directos del contenedor flexible, que están dispuestos y alineados de acuerdo con las propiedades flexibles del contenedor.
• Eje principal y eje cruzado: Flexbox funciona a lo largo de un eje principal (horizontal como una fila o vertical como una columna) y un eje cruzado perpendicular. La dirección del eje principal puede adaptarse a diferentes modos, como de izquierda a derecha a izquierda, proporcionando flexibilidad para los diseños globales.

Flexbox en Divi 5: una nueva era

El sistema de diseño FlexBox de Divi 5 está integrado en el Visual Builder, lo que permite a los usuarios de Divi crear diseños receptivos con controles intuitivos. Estas configuraciones se aplican principalmente a secciones, filas, columnas y grupos de módulos, lo que le permite manipular el comportamiento de diseño visualmente sin escribir CSS. Flexbox facilita la alineación, reordenaba y transforma fácilmente elementos.

Acceder a Flexbox en Divi 5

Acceder a Flexbox en Divi 5 es sencillo e intuitivo. Abra el Visual Builder, agregue una nueva fila y diríjase a la pestaña de diseño. Encontrará la configuración de Flexbox en el menú desplegable del diseño.

Estas configuraciones se aplican en el nivel de contenedor Flex (secciones, filas, etc.), controlando el comportamiento de sus elementos flexibles. La interfaz de Divi muestra la configuración a través de opciones fáciles de usar, lo que facilita la FlexBox para los usuarios de todos los niveles de habilidad.

Veamos por cada configuración para que pueda comprender mejor cómo funcionan y cómo usarlos para construir diseños.

Desglose detallado de la configuración de FlexBox en Divi 5

A continuación se muestra una guía de cada configuración relacionada con Flexbox en Divi 5. Cada configuración incluye su propósito, opciones disponibles y casos de uso prácticos para ayudarlo a aplicarlos de manera efectiva.

Estilo de diseño

Flex es la opción predeterminada en el menú desplegable Estilo de diseño. Cuando configura un contenedor para flexionar, se convierte en un contenedor flexible. Sus elementos infantiles directos (elementos flexibles) se pueden alinear de manera flexible utilizando propiedades CSS FlexBox.

Por otro lado, Block es la forma tradicional de Divi manejando diseños en el pasado. Los elementos dentro de un contenedor de bloque se tratan como elementos de nivel de bloque. Esto significa que generalmente se apilan verticalmente, ocupando el ancho completo disponible del contenedor principal.

Brecha horizontal y vertical

En la configuración FlexBox de Divi 5, los controles de brecha horizontal y vertical funcionan como la propiedad CSS GAP. Proporcionan una forma eficiente de agregar un espacio constante entre los elementos infantiles dentro de un contenedor.

La brecha horizontal define el espacio entre los elementos flexibles cuando están dispuestos horizontalmente. En el siguiente ejemplo, el espacio horizontal crea el espacio vacío entre cada columna, pero no en los bordes exteriores del contenedor flexible. Por defecto, se selecciona %, pero puede usar cualquiera de las propiedades CSS de Divi 5 aquí.

La brecha vertical define el espacio entre las hileras de elementos. Esto se vuelve increíblemente importante cuando habilita la envoltura de diseño (más sobre eso más adelante). También se aplica cuando la dirección de diseño se establece en la columna o la columna reversa .

Dirección de diseño

La opción de dirección de diseño en Divi 5 (propiedad Flex-Direction en CSS) es uno de los controles más fundamentales. Determina el eje primario a lo largo del cual se organizarán los elementos infantiles dentro del contenedor.

Piense en ello como configurar el flujo de su contenido. Hay cuatro opciones principales: fila, reversa de fila, columna y columna reversa. La fila es la configuración más común. Los elementos flexibles se organizarán horizontalmente, de izquierda a derecha. Es ideal para crear diseños de columnas horizontales tradicionales, menús de navegación, elementos de lado a lado o en cualquier momento que desee que los elementos fluyan a través de la página.

Con la fila inversa , los elementos aún se organizan horizontalmente, pero en la dirección opuesta.

Cuando seleccione la columna , los elementos se organizarán verticalmente, de arriba a abajo. Esta es una buena opción para apilar módulos dentro de una sola columna, crear listas verticales de contenido o construir diseños donde los elementos deben fluir hacia abajo.

La columna inversa funciona igual que la columna, apilando elementos dentro de un contenedor verticalmente, pero en reversa.

Justificar contenido

La opción de contenido de Justify de Divi 5 (la propiedad Justify-Content en CSS) controla la alineación de elementos FLEX a lo largo del eje principal del contenedor Flex.

Las opciones incluyen Start (Flex-Start en CSS), que alinea los elementos al comienzo del eje principal. El centro alinea los elementos al medio del acceso principal. Cuando usala dirección de diseño> fila, los elementos se centrarán horizontalmente. Si usala columna Dirección de diseño>, los elementos se centrarán verticalmente.El finalalinea los elementos al extremo (ya sea derecho o abajo, dependiendo de su selección de fila o columna).

Useel espacio entrepara distribuir uniformemente elementos a lo largo del eje principal. El primer elemento se alinea con el inicio, mientras que el último se alinea con el final del contenedor. El espacio alrededor distribuye elementos de manera uniforme a lo largo del eje principal, con el mismo espacio alrededor de cada elemento. Finalmente, el espacio distribuye uniformemente elementos donde el espacio entre dos elementos adyacentes y el espacio antes del primero y después del último elemento es el mismo.

Alinear artículos

Las opciones dealineación de elementos(la propiedad CSS Align-Items) en la configuración de FlexBox de Divi 5 controlan cómo los elementos flexibles se alinean a lo largo del eje cruzado del contenedor Flex. Esta opción difiere de Justify Content, que alinea los elementos a lo largo del eje principal.

Cuando establecela dirección de diseñoparafilmarofila revertir, el eje cruzado se vuelve vertical. Esto permitealinear elementospara controlar la alineación vertical de los elementos dentro de una fila. Si establecela dirección de diseñoenla columnaola columna reversa, el eje cruzado es horizontal. Por lo tanto, los elementos alineados controlarán la alineación horizontal de los elementos dentro de la columna.

Hay cuatro opciones principales, incluido el inicio, que alinea los artículos al principio, el centro, el final y el estiramiento, que estira los artículos para llenar el espacio completo disponible a lo largo del eje cruzado del contenedor. Un elemento con una altura o ancho específico asignado anulará el estiramiento.

Envoltura de diseño

En la configuración de FlexBox de Divi 5, el envoltorio de diseño (propiedad CSS Flex-Wrap) determina lo que sucede cuando los elementos flexibles dentro de un contenedor flexible salen de espacio para envolverse en la siguiente línea cuando el espacio se aprieta. Hay tres opciones en Divi 5, que incluyen sin envoltura, envoltura y envoltura reversa.

No Wrap es la configuración predeterminada, que le dice al contenedor flexible que intente ajustar todos los elementos flexibles en una sola línea o columna, independientemente del espacio disponible. Si los artículos son demasiado anchos para que se ajusten, se desbordará el contenedor (se extenderá más allá de los límites) o se encogerá para que se ajuste. La envoltura permite que los elementos se envuelvan en una nueva línea o columna si exceden el espacio asignado en la fila. Wrap Reverse funciona de manera similar a la envoltura, pero lo hacen en la dirección opuesta cuando se envuelve en la siguiente línea.

Controles flexibles a nivel de módulo

Además de tener controles FlexBox en los niveles de sección, fila y columna, Divi 5 también le brinda un control preciso sobre los módulos DIVI individuales. Por ejemplo, cuando usa un módulo de grupo, puede ajustar el espacio (brecha), la dirección de diseño y todas las otras configuraciones de FlexBox de Divi 5.

Ventajas de Flexbox

Flexbox en Divi 5 no es solo una actualización técnica. Proporciona una mejor manera de crear sitios web modernos y receptivos de manera más fácil y eficiente. Al integrar FlexBox en el Visual Builder, Divi 5 permite a los usuarios de todos los niveles de habilidad aprovechar el poder de CSS sin escribir código. Aquí hay algunas razones por las cuales Flexbox es una actualización tan impactante de Divi 4:

Control intuitivo de diseño sin código

Divi 5 integra la configuración de FlexBox directamente en el Visual Builder, permitiéndole ajustar la alineación, el espacio y el pedido con opciones simples. Ya sea que esté creando alturas de columna iguales o centrando contenido verticalmente, Flexbox facilita los diseños complejos.

Mejor diseño receptivo

El sistema de diseño FlexBox de Divi 5 hace que el diseño de respuesta sea muy fácil, gracias a los controles de diseño personalizables para computadoras de escritorio, tabletas y teléfonos inteligentes. La opción de estructura de columna de cambio de Divi le permite cambiar la cantidad de columnas en tabletas y teléfonos inteligentes, mientras deja la estructura de columna del diseño intacta en los escritorios.

Flexbox + filas anidadas

La combinación de filas anidadas y Flexbox en Divi 5 le permite construir fácilmente diseños intrincados y multinivel. Por ejemplo, puede crear una fila con columnas que contengan su propia fila, lo que permite diseños sofisticados como cuadrículas o secciones de contenido en capas.

Grupos de módulos FlexBox +

Los grupos de módulos en Divi 5 actúan como contenedores flexibles, lo que le permite diseñar y colocar módulos de grupo como una unidad cohesiva. Esto simplifica la creación de secciones dinámicas, como cuadros de características o tarjetas de testimonios, que se ajustan automáticamente a los cambios de contenido mientras se mantiene un espacio y alineación consistentes.

Rendimiento y simplicidad mejorados

Al reemplazar las secciones especializadas y de ancho completa de Divi 4 con un sistema basado en FlexBox unificado, Divi 5 optimiza el proceso de diseño, reduciendo la complejidad y mejorando el rendimiento. Esto significa tiempos de carga más rápidos y una experiencia de edición más suave, especialmente para sitios web grandes o pesados ​​de contenido.

Plantillas de FlexBox prebuilt para arrancaciones rápidas

Divi 5 introduce nuevas plantillas de fila que aprovechan FlexBox para proporcionar diseños flexibles y predefinidos como columnas iguales, columnas offset, cuadrículas de múltiples filas y cuadrículas de múltiples columnas. Estas plantillas inspiran la creatividad, lo que le permite aumentar los diseños con estructuras totalmente personalizables a través de la configuración de FlexBox.

Flujo de trabajo de diseño a prueba de futuro

A medida que Divi 5 continúa evolucionando en su fase alfa pública, su sistema de diseño Flexbox posiciona a los usuarios de Divi a la vanguardia del diseño web moderno. Al dominar FlexBox ahora, se está equipando con las habilidades que se alinean con los estándares de la industria, asegurando que sus sitios web sigan adaptables a las actualizaciones futuras.

Desbloquee el potencial creativo con Flexbox en Divi 5

Flexbox en Divi 5 cambia la forma en que los usuarios crean diseños dinámicos receptivos. Divi 5 permite a los usuarios crear sitios web impresionantes y modernos sin escribir código integrando perfectamente potentes propiedades CSS FlexBox en el Visual Builder. Desde controles intuitivos de alineación y espaciado hasta características avanzadas como filas anidadas y grupos de módulos, el sistema de diseño Flexbox simplifica diseños complejos al tiempo que garantiza diseños perfectamente receptivos que se ven muy bien en todos los dispositivos.