¿Cómo utilizar el Flexbox CSS en Divi?

Suena loco, pero... Divi aún no ha incorporado las propiedades CSS de Flexbox en su constructor, o al menos no en forma de opciones que pueden ser activadas para el usuario. Este puede ser el caso Divi 5, pero mientras tanto, déjame mostrarte otra forma de crear tu Divi diseños usando el Flexbox¡Aquí vamos!

1 - ¿Cuál es el Flexbox?

Flexbox es un poderoso Módulo CSS que le permite crear fácilmente diseños flexibles y sensibles. Ofrece una forma más eficiente e intuitiva distribuir el espacio y alinear los elementos en un contenedor. Esto puede ser una sección, línea o columna de Divi.

Por ahora, puede que no esté hablando contigo, pero el resto de este artículo te ayudará a entender. Y ser tranquilizado, no hay necesidad de ser un integrador web o conocer el CSS en la punta de los dedos para use Flexbox en Divi. Simplemente entender cómo funciona y utilizar las propiedades correctas que le daré (copiar/paste).

2 - El concepto de hijo padre

Para Módulo Flexbox Debe entenderse el concepto de padre e hijo.

De hecho, para activar la flexibilidad de una "box" (container), debe añadir la propiedad display:flex; sobre el elemento padre (contenedor). Esto nos permitirá obtener mucha flexibilidad en el comportamiento de los elementos de sus hijos (Temas).

Mira.

Para traducir esto en "modo Divi", sería así:

En esta captura de pantalla, vemos que línea o fila (row) en verde es el elemento padreAsí que el contenedor. Y eso las imágenes parecen ser los niños (temas). Pero no me malinterpretes. los niños de la fila (derecha) son las columnas (columnas) y no los módulos que se colocan en cada columna.

Mira.

Pero este módulo Flexbox se puede implementar en cualquier contenedor. Por ejemplo, podría activarse sólo en el nivel de columna en lugar de la fila/row.

Mira.

Por lo tanto, los elementos de la misma columna podrían ser flexibles.

Espero no haberte perdido con estas pequeñas explicaciones teóricas, pero esenciales... vamos ahora con explicaciones más concretas.

¿Necesitas dominar Divi? Descubre mi entrenamiento que te acompaña paso a paso en la comprensión y uso de Divi! Más información sobre Divi training.

3 - ¿Cómo activar el flexbox en Divi?

Como usted puede haber entendido, para activar este comportamiento flexible, debe añadir la propiedad display: flex; en el contenedor derecho. Y para eso, Divi nos ofrece varias posibilidades en sus opciones para añadir código ¡Por todas partes!

3.1. - Manualmente en contenedores apropiados

Tomemos el ejemplo de los 3 módulos de iconos que añadí en la misma columna:

1. Por defecto, cada icono se coloca entre sí dentro de la misma columna.
2. Vaya a la pestaña Avanzado не Personalizar CSS н Elemento principal para añadir la propiedad display: flex;
3. Inmediatamente usted notará que los elementos de los niños de la columna - elementos - se comportan fluidamente y colocar uno junto al otro.

Este es un comportamiento muy interesante y pronto entenderás por qué.

3.2. - El caso particular de las líneas/rangos

Hay un caso particular para el cual Divi añade automáticamente la propiedad display:flex;, que nos impide añadirlo manualmente. Es cuando revisas la opción "armonización de las alturas de las columnas" dentro de la configuración de una línea (range).

Esta opción se puede utilizar a veces porque es muy útil en algunos casos. Así que sin saberlo, usas el Divi Flexbox.

Por ejemplo, cuando se aplica un color de fondo a las diversas columnas seguidas y el contenido no tiene el mismo tamaño, la renderización visual no es óptima, como se puede ver a continuación:

El flexbox también regula este tipo de "problema"!

1. Puedes activar el flexbox nativo de la ficha Estilo parámetros de la línea (rango). Sólo activa la opción "armonización de las alturas de las columnas".
2. Si esta opción no está habilitada, puede añadir la propiedad display:flex; directamente a la pestaña Avanzado не Personalizar CSS н Elemento principal.
3. Es uno o el otro. En ambos casos, la altura de las columnas será igual, independientemente del tamaño del contenido de cada columna.

¿Lo sabías? Puedes probar Divi gratis visitando en esta página y haciendo clic en "Pruébalo GRATIS"

4 - Las propiedades para el contenedor de flexbox y su comportamiento

¡Pero no ha terminado! La magia de la Flexbox ¡No pares ahí!

De hecho, por ahora, usted puede encontrar difícil entender el beneficio para utilizar Flexbox en Divi. Pero el resto te deleitará.

4.1 - Dirección flexible

Esto permite cambiar el comportamiento de la dirección de los elementos del niño en dos ejes y su opuesto.

1. Por ejemplo, he añadido 3 módulos de texto dentro de la misma columna. Por defecto, los módulos se acumulan.
2. Si añadimos la propiedad display:flex; directamente a la pestaña Avanzado не Personalizar CSS н Elemento principal parámetros de la columna (y no de la línea), los elementos son fluidos, lo entendió.
3. Pero si ahora agregamos la propiedad flex-direction:row-reverse; Se observa que se invierten los artículos (elementos del niño).

Propiedad flex-direction puede utilizar 4 valores:

• row : por defecto, izquierda a derecha
• row-reverse : de derecha a izquierda
• column : de arriba a abajo
• column-reverse : desde abajo hasta arriba

row siendo el valor predeterminado, usted no necesita utilizar esta propiedad si desea que sus elementos sean dejados a la derecha.

4.2 - Envoltura flexible

Otra propiedad Flexbox que puede ser muy útil para usted es flex-wrap. Si agrega esto al contenedor (a los padres), los elementos del niño podrán cambiar su comportamiento de cruzar la línea.

Propiedad flex-wrap puede utilizar 3 valores:

1. nowrap : este es el valor predeterminado, todos los elementos permanecen en una fila
2. wrap : los elementos van a la línea, de arriba a abajo.
3. wrap-reverse : los elementos van a la línea inferior a la parte superior.

Para usarlo, simplemente agregue las propiedades que necesita en el contenedor de su elección. Por mi ejemplo, edité la columna (no la línea) y añadí las siguientes líneas a la pestaña Avanzado не Personalizar CSS н Elemento principal :

display: flex;
flex-wrap: wrap;

nowrap siendo el valor predeterminado, no necesita utilizar esta propiedad si desea que sus artículos permanezcan en una sola línea.

4.3 - Justify-content

Esto es sin duda una de las propiedades de la Flexbox que más amo y que puede salvar muchas situaciones. Propiedad justify-content permite alinear los elementos del niño dentro del padre sobre un eje horizontal.

En su código, después de añadir la propiedad display:flex; en la pestaña Avanzado не Personalizar CSS н Elemento principal parámetros de su contenedor, puede especificar alineación horizontal utilizando los siguientes valores:

1. flex-start : este es el valor predeterminado, usted no tiene que especificarlo para alinear los elementos a la izquierda.
2. flex-end : los elementos del niño se alinean a la derecha.
3. center : los elementos están alineados al centro.
4. space-between : los elementos se distribuyen uniformemente en el contenedor padre. El primer elemento se pegará a la izquierda y el último se pegará a la derecha, los otros elementos se centrarán por igual.
5. space-around : los elementos se distribuyen uniformemente en el contenedor padre con un espacio igual alrededor de ellos.
6. space-evenly : los elementos se distribuyen para que el espaciamiento entre los dos elementos (y el espacio en los bordes) sea igual.

Así que, por ejemplo, centro horizontal elementos dentro de un contenedor, utilice este código:

display: flex; 
justify-content: center;

4.4 - Temas alineados

Propiedad align-items permiteverticalmente alineados los elementos del niño dentro del contenedor.

En su código, después de añadir la propiedad display:flex; en la pestaña Avanzado не Personalizar CSS н Elemento principal parámetros de su contenedor, puede especificar alineación vertical utilizando los siguientes valores:

1. stretch : es el valor predeterminado que permite estirar los elementos para llenar el contenedor.
2. center : los elementos se centran en el eje vertical
3. flex-start : los elementos "pasar" y alinearse en la parte superior del contenedor.
4. flex-end : los elementos "pasar" y alinearse en la parte inferior del contenedor.

Así que, por ejemplo, enfoque verticalmente elementos dentro de un contenedor, utilice este código:

display: flex;
align-items: center;

4.5 - Gap

Finalmente, al espacio sus elementos dentro de un contenedor, puede utilizar la propiedad gap con un valor en píxeles. Por ejemplo: gap:30px;

Nota: incluso si Divi indica que la propiedad "gap" es desconocida, existe y funciona!

Por lo tanto, al espacio 30px elementos que siguen la línea dentro del mismo contenedor, utilice este código:

display: flex;
flex-wrap: wrap;
gap: 30px;

5 - Las propiedades de los elementos del niño y su comportamiento

Hemos visto que la mayoría de las propiedades se pueden utilizar en el contenedor padre. Pero el flexbox también le permite utilizar propiedades en los elementos de los niños. Esto puede ser útil en algunos casos, dependiendo de sus necesidades.

5.1. Ordenanza

Propiedad order permite definir un orden entre los niños. Por defecto, los elementos se organizan en el orden en que fueron colocados.

Por ejemplo, edité el módulo de texto "9" para darle order: -1; Como puede ver, el 9 llegó a la primera posición, antes de todos los demás módulos de texto.

5.2. - Crecimiento flexible

Propiedad flex-grow permite "dar más espacio" a un elemento infantil.

Por ejemplo, en la imagen anterior, le di un valor flex-grow:1; elementos 4, 6, 12 y 15. Como puede ver, estos elementos con un valor de crecimiento flexible están tratando de tomar todo el espacio disponible en la línea.

Si usted da un valor idéntico (por ejemplo, "1") a cada elemento en el contenedor, son compartir espacio bastantePor línea.

5.3.

Para alinear verticalmente los elementos presentes en un contenedor, la propiedad align-items hace el trabajo perfectamente. Pero para hacer excepciones, necesitará utilizar la propiedad align-self el elemento del niño en sí.

Por ejemplo, en la imagen anterior, apliqué la propiedad align-self:center; sólo en los parámetros de la columna media.

En esta otra imagen, apliqué la propiedad align-self:center; sobre los parámetros del módulo de texto asegurando que display:flex; a nivel de columna.

Una vez más, notamos que el comportamiento cambia si no elegimos los contenedores o elementos adecuados para aplicar nuestras propiedades.

Valores posibles para la propiedad align-self son:

1. auto
2. flex-start
3. flex-end
4. center
5. baseline
6. stretch

6 - Flexbox for Divi: the overview

Siento que este artículo es difícil de entender. 🤣especialmente si eres nuevo. Pero no depende de ti copiar/pasar propiedades dentro del Divi Builder para activar el flexbox.

Aquí hay un resumen:

Válido para	Propiedad	Valores disponibles
Container	display*	flex
Container	flex-direction	row : por defecto, izquierda a derecha row-reverse : de derecha a izquierda column : de arriba a abajo column-reverse : desde abajo hasta arriba
Container	flex-wrap	nowrap : valor predeterminado wrap : los elementos van a la línea, de arriba a abajo. wrap-reverse : los elementos van a la línea inferior a la parte superior.
Container	justify-content	flex-start : valor predeterminado flex-end : los elementos del niño se alinean a la derecha. center : los elementos están alineados al centro. space-between : los elementos se distribuyen uniformemente en el contenedor padre. space-around : los elementos se distribuyen uniformemente en el contenedor padre con un espacio igual alrededor de ellos. space-evenly : los elementos se distribuyen para que el espaciamiento entre los dos elementos (y el espacio en los bordes) sea igual.
Container	align-items	stretch : valor predeterminado center : los elementos se centran en el eje vertical flex-start : los elementos "pasar" y alinearse en la parte superior del contenedor. flex-end : los elementos "pasar" y alinearse en la parte inferior del contenedor.
Container	gap	30px (por ejemplo, valor píxel)
Elemento	order	-1, 1, 2, 3, etc.
Elemento	flex-grow	0, 1, 2, 3, etc.
Elemento	align-self	auto flex-start flex-end center baseline stretch

7 - Enlaces útiles para ir más lejos con el flexbox

Te mostré aquí el principal Propiedades flexbox utilizables dentro de Divi. Hay algunos más. Si quieres explorarlos, Nos vemos aquí.

Además, sugiero algunos enlaces/tutoriales que pueden interesarle:

• Columnas Divi inversas en versión móvil
• Alinear verticalmente los elementos en Divi
• Para ir más allá Divi es sensible, está aquí.
• Más información sobre el "Display" propiedad
• Utilice más de 6 columnas en una línea Divi