5 trampas para evitar al cambiar al sistema de diseño Flexbox de Divi 5

Divi 5 acaba de enviar su todo el sistema de diseño basado en Flexbox. Reemplaza el viejo motor de diseño de bloque de Divi 4 y desbloquea nuevos controles potentes en el Visual Builder. Cada nueva fila ahora predetermina el diseño Flex. A menos que haya usado CSS FlexBox, este cambio exige una nueva mentalidad de diseño porque Flex funciona de manera diferente. Si no ajusta sus hábitos, se atascará.

Esta actualización le brinda controles visuales para envolver, dirección, espaciado, pedido y alineación, todo incorporado. Sin CSS personalizado. También viene con atajos de fila preconfigurados para construir estructuras de hileras complejas con ajustes mínimos de configuración de visualización. Algunas características basadas en bloques, como secciones especializadas y de ancho completo, están en desuso porque Flex ahora cubre todos estos casos de uso.

Esta publicación entra en los cinco mayores dificultades que alcanzará al cambiar su modelo mental de bloque a Flex en Divi 5.

Pithall #1: forzar a Flex en una mentalidad de bloque

→ Flex requiere un nuevo modelo mental, no solo nuevos controles.

A nadie le gusta el cambio a menos que sepan que están alcanzando limitaciones muy reales. Para muchos, el antiguo sistema de diseño es con lo que sabían y se sentían cómodos. Pero tenía sus limitaciones. Aquellos que sabían lo suficiente sobre CSS sabían que al antiguo sistema le faltaban cosas que Flexbox estaba diseñada para remediar. Evitar el primer escolta requiere comprender que Flexbox no es solo un diseño de bloque con opciones adicionales .

En Divi 4, los módulos apilados verticalmente de forma predeterminada: cada elemento se sentaba debajo del anterior. Puede apilar las cosas horizontalmente con columnas, pero en ese punto, trabajaría con múltiples filas + columnas dentro de una sección para construir un diseño. Eso fue predecible y cómodo para muchos, pero también condujo a la realidad frustrante de no poder tener dos botones de lado a lado y otros desafíos de diseño.

Divi 5 funciona de manera diferente ahora porque los nuevos contenedores (es decir, secciones, filas, columnas y grupos) están configurados para "flexionar" de forma predeterminada. Obtiene opciones más específicas a nivel de contenedor para organizar elementos infantiles. Flexbox es poderoso porque permite diseños flexibles donde los elementos se colocan en función del espacio disponible y el contenido dentro de ellos. Más sobre eso en el siguiente trampa . Esto permite que los diseños se adapten a diferentes tamaños de pantalla y contenido sin depender del posicionamiento fijo o absoluto. Aquí hay un solo ejemplo para comparar Flex con el bloque.

Bloqueo de módulos de pilas de diseño a lo largo del eje de bloque. Flexbox le permite elegir entre fila y columna como el eje principal.

Cada configuración y opción en la interfaz de usuario corresponde directamente con las propiedades CSS reales agregadas a cada contenedor.

Pithall #2: No saber cómo se encaja y crece el tamaño de los elementos infantiles en el tamaño del elemento infantil

→ Sin encogerse y crecer, sus diseños no se comportarán como se esperaba.

Con Flex en Divi 5, los módulos infantiles pueden tener un ancho o altura establecido. Además, pueden encogerse o llenar (su ancho o altura) dependiendo de la habitación dentro del recipiente. En este ejemplo, los módulos de texto se establecen en un ancho del 45%, lo que significa que dos módulos encajarían horizontalmente como en la misma fila. Pero si agregamos un número impar de módulos de texto, no queremos que haya espacio vacío. Podemos establecer estos módulos para que Flex Grow, y luego, cuando haya espacio disponible en una fila, estos módulos crecerán para llenar.

Divi expone controles como "crecer para llenar", "encoger a ajuste" y configuraciones personalizadas en elementos infantiles dentro de cualquier contenedor flexible (elemento infantil> diseño> dimensionamiento> crecer para llenar, encoger a ajuste o personalizar ).

Establecer la altura y el ancho en los elementos infantiles se siente familiar si está acostumbrado para bloquear los diseños. Pero con la configuración de FlexBox, Grow and Chubrink le permite combinar el tamaño fijo con un comportamiento receptivo, adaptándose al espacio disponible en cada contenedor. Agrega complejidad, pero también desbloquea mucha más flexibilidad.

El encogimiento para encajar y crecer para llenar (además de Básis Flex) también es muy útil para ayudarlo a crear diseños receptivos. Para que los diseños de bloques respondan a menudo, necesitaría configurar múltiples puntos de interrupción y anchos/alturas en cada uno de esos puntos de interrupción. Flexbox puede beneficiarse de la configuración única en varios puntos de interrupción, pero como su nombre lo indica, es muy flexible . Este es especialmente el caso cuando se usa Clamp () para la tipografía. El uso de ambos juntos, junto con otras unidades CSS relativas, romperá su constante necesidad de puntos de interrupción.

Veamos otro ejemplo construido con Flexbox.

El contenedor de columna (padre) está configurado para flexionar con estas configuraciones:

• Brecha horizontal y vertical : 30px (esto podría usar calc o abrazadera para ser un poco mejor, incluso)
• Dirección de diseño : Reverso de fila (explicación de esta decisión en la trampa #4)
• Justify Content : Center
• Alinear los elementos : centro
• Flex Wrap : Wrap Reverse (explicación de esta decisión en Pitall #4)

Luego coloqué tres elementos infantiles dentro de la columna. Un módulo de encabezado, módulo divisor y un módulo de texto. Aquí están la configuración relevante para cada:

• Módulo de encabezado
  • Tamaño del texto : Clamp (2Rem, 1.5Rem + 2VW, 3REM)
  • Ancho : Auto
  • Tamaño de flexión : encogimiento para encajar
• Módulo divisor
  • Ancho : Auto
  • Tamaño flexible : encogerse para encajar y crecer para llenar
• Módulo de texto
  • Tamaño del texto : abrazadera (0.9375Rem, 0.75REM + 0.4VW, 1REM)
  • Ancho : Auto
  • Tamaño de flexión : encogimiento para encajar

Con una dirección Flex de fila, los elementos infantiles se alinean horizontalmente cada vez que hay espacio. El módulo de texto es el más ancho, por lo que llena su propia fila. El módulo divisor luego crece o se encoge, ya que tiene un ancho de auto y habilitado Flex-Crow y Flex-Shrink. El módulo de encabezado usa solo su ancho intrínseco y permanece compacto. Esta configuración produce un diseño totalmente receptivo sin ningún punto de interrupción.

Pelitfall #3: No romper el hábito del margen

→ Use GAP en su lugar: es más inteligente, más limpio y hecho para Flex.

En Divi 4, los espacios visuales entre módulos y otros elementos requerían márgenes (espacios verticales a través del margen inferior, espacios horizontales a través del margen izquierdo/derecho). Cuando el espacio se aplicaba al espacio de columna, Divi 4 tenía una configuración de canaletas, pero no tomó los valores de CSS estándar, y en realidad usó el margen a los lados de las columnas para crear el espacio. Esta es la misma manera que los diseños de bloque todavía funcionan. Pero ahora hay un enfoque más limpio y efectivo.

El sistema FlexBox de Divi 5 introduce controles de la brecha de fila y vertical en Diseño> Diseño > Gap Horizontal y vertical . Estos mapas a CSS Gap y Row-Gap. Los espacios verticales se aplican automáticamente a cada "fila flexible" cuando los elementos se envuelven en una nueva línea. Lo mismo es cierto para los espacios horizontales: siempre que haya elementos infantiles uno al lado del otro, la brecha estará presente. Estas configuraciones de brecha también aceptan cualquier unidad CSS positiva, por lo que puede usar Clamp () o Calc () para crear espacios de brecha receptivos.

Esto reduce la necesidad de aplicar valores de margen a todos y cada uno de los elementos infantiles. La configuración de la brecha se adapta automáticamente en función de la dirección flexible y el número de niños en el contenedor para aplicar cualquier brecha automáticamente. Los márgenes aún tienen su lugar, pero su necesidad de espaciar elementos dentro de un contenedor se reduce.

Pithall #4: Controles de flujo inverso y pedido de subutilización

→ El orden visual y el orden semántico no tienen que coincidir.

Por defecto, los elementos infantiles en un contenedor flexible se mostrarán en su orden de origen. Flexbox y Divi 5 le brindan la capacidad de especificar direcciones de flexión inversa y controles de orden para cambiar el flujo visual de elementos sin cambiar el pedido de elementos HTML.

La dirección inversa alternar en la dirección de diseño le permite revertir el orden de los elementos en la dirección de la fila o la columna. Para ver el ejemplo de diseño de Pitall #2 nuevamente, podemos ver por qué queremos esto. Puede ver en la vista de capas que el orden de los elementos infantiles es el encabezado, luego el divisor y finalmente el módulo de texto. Semánticamente, tener el encabezado (un H2 en este caso) en la parte superior de la pila tiene sentido para los lectores de pantalla. Sin embargo, el encabezado es lo suficientemente obvio visualmente, ya sea el primero o el último, ya que estamos utilizando una jerarquía visual con su tamaño de texto.

El uso de la fila reversa como la dirección flexible y la envoltura inversa retiene el pedido HTML (importante para la accesibilidad) al tiempo que me permite diseñar cosas cómo las imaginamos.

Puede lograr lo mismo utilizando el pedido de elementos infantiles, que se encuentra en Divi al hacer clic en la configuración de un elemento infantil> Pestaña de contenido> orden . Podemos cambiar el orden en que solo aparecerá este elemento. En este ejemplo, logramos el mismo resultado final, pero con una configuración diferente, una que podría tener más sentido para algunos.

Pithall #5: Olvidando establecer envoltura

→ Flex no se romperá en nuevas filas a menos que se lo diga.

Mencionamos envolver antes, pero merece su propia sección. Nuevos contenedores flexibles predeterminados a no envolver. Esto puede tener consecuencias inesperadas. Por ejemplo, si agrega cuatro módulos infantiles, cada uno al 50% de ancho, esperaría que se muestren en dos filas flexibles. Su problema es simplemente que debe permitir que su contenedor se envuelva.

Divi incluye una palanca llamada envoltura de diseño, que tiene tres estados: sin envoltura, envoltura y reverso de envoltura. Debe habilitar la envoltura si desea que los módulos se rompan en nuevas líneas en un umbral. Así es como Divi admite estructuras de múltiples filas dentro de un solo contenedor (las filas anidadas o múltiples no son la única forma de hacerlo ahora).

Tómese su tiempo para dominar Flexbox

Flex en Divi 5 es más poderoso que el sistema de diseño de bloque anterior de Bloque anterior de Divi. Sin embargo, requiere algo de aprendizaje para entender. Flexbox no es una configuración específica de Divi, por lo que es importante que conozca los conceptos básicos de cómo funciona esta herramienta CSS. Divi facilita la implementación, ya que todas las configuraciones que puede aplicar en CSS están disponibles directamente en el editor. Pero el concepto es muy diferente del bloque.

Debido a esas diferencias, le recomendamos que pase una hora utilizando una herramienta de enseñanza interactiva para comprender FlexBox. Uno que es fácil de usar y realmente hace el truco es FlexboxFroggy.com. Te lleva a través de 24 desafíos progresivamente complejos, enseñándote todos los conceptos básicos. Es mucho mejor que las doomsconas durante una hora.

Use Flex con Divi 5 hoy

Flexbox en Divi 5 es honesto. No adivina lo que quieres. Te pide que decidas. Pero una vez que decidas, la flexibilidad sigue. Puede construir cada estructura de diseño de manera responsable, de respuesta y de manera confiable, incluso infinitamente anidada, sin CSS o hacks personalizados.