Una guía para principiantes para las propiedades CSS Flexbox

El buen diseño comienza con un modelo claro para la alineación y el espacio. Flexbox proporciona ese modelo organizando contenido a lo largo de un solo eje con control predecible sobre la dirección, la alineación, el envoltorio y el espacio.

Esta publicación cubre los conceptos básicos de estas propiedades CSS y cómo funcionan juntos. Después de los fundamentos, mostramos cómo el mismo enfoque se implementa visualmente en Divi 5 utilizando el sistema de diseño FlexBox. ¡Vamos a hacerlo!

¿Qué es CSS Flexbox?

El tráfico móvil supervando el escritorio cambió el diseño web. Los desarrolladores necesitaban diseños que funcionen en teléfonos, tabletas y escritorios. Los viejos métodos a menudo fallaban.

Flexbox solucionó esto. CSS Flexbox hace que los elementos se adapten. Agregue la pantalla: Flexione a un contenedor, y sus hijos directos se vuelven flexibles. Pueden crecer, encogerse o mantenerse fijos según el espacio.

Flexbox coloca elementos en línea recta, ya sea de izquierda a derecha o columnas de arriba a abajo. Usted elige la dirección.

El contenedor controla el diseño. Establece cómo los elementos se alinean y espacian, como la propagación de manera uniforme, centrada o apilada. La propiedad GAP agrega espacio consistente entre los elementos sin márgenes adicionales o relleno. Las técnicas más antiguas requirieron matemáticas de margen difícil y se rompieron a menudo.

El método tradicional hace opciones de espaciado aleatorio: 10px aquí, 20px allí, 40px en otro lugar. Estos valores dispersos causan inconsistencias y hacen que sea difícil saber qué espaciado se aplica. Las propiedades GAP eliminan las conjeturas mediante el uso de una regla consistente para todos los elementos.

Una guía rápida de Flexbox y sus propiedades

Flexbox se divide en dos campos: propiedades para contenedores y propiedades para elementos. Las propiedades del contenedor afectan a todo el grupo, mientras que las propiedades del elemento le permiten ajustar elementos individuales. La mayoría de los diseños necesitan solo un puñado de estas propiedades, como:

Pantalla: Flex

Convierta cualquier elemento en un contenedor flexible agregando pantalla: Flex. Sus hijos directos se convierten en artículos flexibles. Los elementos se alinean en una fila de forma predeterminada en lugar de apilar como elementos de bloque estándar. Sus dolores de cabeza de espacio desaparecen porque los elementos flexibles siguen reglas diferentes que los elementos regulares. El contenedor ahora controla cómo se comportan sus hijos (o elementos), y obtienes resultados predecibles en lugar de las sorpresas CSS habituales.

dirección flexible

Elija en qué dirección fluyen los elementos. Use una fila para la disposición de izquierda a derecha.

y una columna para apilar elementos verticalmente.

Agregue reverso a uno y los elementos voltean su pedido por completo.

Esta elección establece su eje central, lo que afecta cómo funcionan otras propiedades.

Cambiar de la fila a la columna cambia cómo se comportan Justify-Content y Aline-Items, por lo que la dirección es lo primero en su planificación.

Justify-Content

Esta propiedad distribuye el espacio sobrante a lo largo de su eje central. Los artículos toman lo que necesitan, y luego esta propiedad maneja el resto. Use Flex-Start para agrupar todo al principio, centro para agrupar los elementos en el medio y Flex-End para poner todo hacia el final. Al mismo tiempo, el espacio entre el espacio se usa para separar los elementos con la misma brecha. El valor espacial le da a cada elemento el mismo espacio en ambos lados, mientras que el espacio crea espacios idénticos en todas partes.

ítems alineados

Maneja la alineación en el eje cruzado. Para diseños horizontales, esto significa alineación vertical. Para diseños verticales, controla el posicionamiento horizontal. Admite valores como flujo flexible, centro, extremo flexible, estiramiento y línea de base (no los valores de espacio-*). Coloque al centro, y los elementos se alinean en el medio independientemente de sus alturas. El valor predeterminado es el estiramiento: los elementos se estiran para llenar el tamaño transversal del contenedor. Si el tamaño transversal del contenedor es automático, a menudo equivale al elemento más alto, por lo que los elementos parecen iguales en altura.

holgazán

Decide qué sucede cuando los artículos se quedan sin espacio. El Nowrap predeterminado mantiene todo en una línea al reducir los elementos. Cambie a envoltura y elementos que no se ajusten a nuevas líneas mientras mantienen sus tamaños preferidos. También puede revertir la dirección de envoltura. El envoltorio convierte su única línea en múltiples líneas, creando diseños que se asemejan a las cuadrículas.

brecha

Agrega espacio entre elementos sin meterse con los márgenes. Establezca el espacio: 20px, y cada elemento obtiene un espacio consistente. Puede establecer diferentes espacios horizontales y verticales si es necesario. El espacio solo aparece entre elementos, no alrededor de los bordes. Esto supera a los márgenes calculadores que se rompen cuando cambias los diseños más tarde.

Estas propiedades funcionan bien una vez que te acostumbras. La parte difícil es recordar lo que hace cada uno y escribir todo ese CSS. Escribe algún código, actualiza su navegador, vea que no está del todo bien, luego regresa y ajusta. Los constructores visuales como Divi voltean esto permitiéndole hacer clic en los botones en lugar de escribir los nombres de las propiedades.

Divi 5 hace que Flexbox visual

Como establecíamos, aprender Flexbox es una cosa; Recordar lo que Justify-Content: Space-Between hace es otro. Pasas más tiempo escribiendo propiedades que en el diseño. En lugar de escribir CSS, usa botones y controles deslizantes que muestran exactamente lo que hace cada opción en el Builder Divi. Divi 5 lleva esto a Flexbox, convirtiendo conceptos abstractos en controles sencillos y clicables.

Antes de sumergirnos más profundamente, veamos brevemente qué es Divi.

¿Qué es Divi?

Divi es un constructor de sitios web que hace que WordPress funcione para personas que desean sitios de buen aspecto sin la molestia.

Puede arrastrar cualquier más de 200 módulos alrededor de su página y cambiar el texto donde se sienta. Elija los colores y verlos aparecer al instante mientras trabaja en el sitio real, no una vista previa que pueda mentirle más tarde.

El tema incluye más de 2000 diseños para restaurantes, fotógrafos, consultores y otros negocios, por lo que puede encontrar uno que le guste y modificarlo hasta que funcione perfectamente para sus necesidades.

El constructor de temas le brinda control sobre cada parte de su sitio. Puede diseñar encabezados que se destaquen en lugar de parecerse a los demás, construir páginas de blogs que la gente quiere leer e incluso hacer que sus 404 páginas lo suficientemente interesantes como para que los visitantes se queden en lugar de irse.

Divi ai te ayuda a construir rápido

Una vez, hacer temas y plantillas significaba hacer malabares con diferentes aplicaciones para copias, imágenes e ideas de diseño. Divi Ai reúne todo lo que necesita en una interfaz unificada: justo donde crea sus sitios web.

Dígale que necesita mensaje de texto y lo escribe.

Solicite imágenes personalizadas y las crea. Incluso puede describir las ediciones de fotos y verlo hacer los cambios.

Además, maneja el código y construye nuevas secciones cuando lo solicita.

Los sitios rápidos de Divi te guarda de mirar una página en blanco sin saber por dónde empezar. Puede elegir entre los sitios de inicio que diseñó nuestro equipo, con imágenes originales y obras de arte que se ven bien.

También puede describir su negocio a los sitios rápidos de Divi y dejar que construya algo desde cero usando AI. Estos sitios construidos por IA vienen con titulares reales, copias e imágenes que coinciden con su descripción.

Genere todo con IA, tome fotos de Unsplash o deje caer a los marcadores de posición para sus imágenes. Establezca primero sus fuentes y colores, luego deje que la IA trabaje en las opciones de su marca mientras mantiene todo editable después.

Divi 5: El constructor de sitios web a prueba de futuro

Divi 5 reconstruye todo el marco desde cero.

El Visual Builder ejecuta más suaves, las páginas se vuelven más rápidas y la base de código puede admitir más efectivamente los estándares web modernos. Obtiene un marcado más limpio, un mejor rendimiento y una base lista para el presente y el futuro.

La interfaz también se simplifica. Las configuraciones aparecen más organizadas lógicamente, y las tareas cotidianas requieren menos clics. La experiencia general se siente más receptiva, no importa si está construyendo páginas simples o diseños complejos.

Obtiene el mismo enfoque de edificio visual que conoce, solo con una base mucho más fuerte debajo.

¿Qué hay de nuevo en Divi 5?

La nueva arquitectura abre puertas para características que no eran posibles antes. Estas 18+ adiciones cambian la forma en que crea y administra sitios web.

Aquí hay un ejemplo de lo que obtienes:

• Sistema de diseño FlexBox: controles visuales para la alineación, espaciado y posicionamiento. Los elementos pueden crecer, encogerse o envolverse a nuevas líneas automáticamente. Trabaja con filas anidadas y grupos de módulos para diseños complejos sin código.
• Filas anidadas: coloque filas dentro de otras filas con anidación infinita. Construya estructuras de diseño complejas sin solución de código.
• 17 Módulos de WooCommerce: Constructores de página de productos completos, incluida la galería de productos, agregar al carrito, revisiones, calificaciones, avisos de stock, pan rallado, meta de productos, ventas adicionales y más. Los módulos de carrito y pago pronto.
• Sistema de interacciones: Crear ventanas emergentes, alternar, animaciones de desplazamiento, efectos de movimiento del mouse y disparadores de ventanas gráficos. Mezcle múltiples desencadenantes para comportamientos complejos como pancartas promocionales que se desvanecen después del desplazamiento.
• Editor receptivo: le permite ver, editar y restablecer estados de ciervo y adhesivos receptivos para cualquier configuración simultáneamente sin cambiar los modos de vista para una edición más rápida, más precisa y menos desordenada.>
• BOOC Builder: cree contenido dinámico que extrae de su base de datos. Cree diseños posts personalizados, cuadrículas de productos y secciones de repetición. Funciona con WooCommerce Products.
• Presets del grupo de opciones: cree estilos reutilizables para tipografía, bordes, sombras y fondos. Aplique estos en cualquier elemento compatible, no solo módulos individuales.
• Variables de diseño: Establezca valores globales para colores, fuentes, espacios, números, imágenes y texto. Cambie su color principal una vez, y se actualizará en todas partes automáticamente.
• Unidades CSS avanzadas: use las funciones Clamp (), Calc (), Min () y Max () a través de controles visuales. No se requiere código para la tipografía receptiva y los cálculos de espaciado.
• Colores relativos y HSL: crea sistemas de color matemáticamente hermosos. Construya variaciones de color que mantengan automáticamente la armonía cuando se cambia el color base.

¡Y viene más! Nuestro equipo de desarrollo continúa agregando características ~ cada dos semanas mientras se preparan para el lanzamiento beta público.

Una visión general rápida de la configuración de FlexBox de Divi 5

El enfoque visual de Divi 5 elimina las conjeturas de la implementación de FlexBox. En lugar de memorizar los nombres de las propiedades y escribir CSS, obtienes botones y controles deslizantes que muestran exactamente lo que hace cada control. Eche un vistazo a lo fácil que es.

1. Configuración de su primera fila flexible

Comience por elegir su estructura de fila de la selección de plantilla expandida. Divi 5 ofrece muchas más opciones de diseño, que incluyen columnas iguales, cuadrículas de múltiples filas y configuraciones de múltiples columnas.

Nuevas secciones en Divi 5 comienzan con Flexbox automáticamente. Cuando agrega una fila fresca, está listo con propiedades flexibles activadas. Pero si está trabajando con secciones existentes de versiones Divi más antiguas, deberá cambiarlas manualmente desde el diseño de bloque predeterminado para flexionar haciendo clic en el icono de configuración en su fila, navegando a la pestaña de diseño> Diseño y cambiando "Bloque" a "Flex".

2. Comprender la dirección, el flujo, la alineación

El campo de dirección de su diseño determina dónde terminan los elementos. La fila es la configuración predeterminada, que hace que los elementos se alineen horizontalmente.

Cambie a la columna y los elementos se apilen los elementos verticalmente como los diseños web regulares.

Ambas opciones vienen con versiones inversas que voltean el orden por completo.

Mientras tanto, Justify Content decide qué sucede con el espacio sobrante a lo largo de su eje principal. Para las filas, el inicio significa izquierda, centros medios horizontalmente y final se alinea a la derecha.

Para las columnas, Start significa Top, Middle Centers todo, y el extremo empuja los elementos hacia la parte inferior.

Más allá de la alineación estándar de inicio, centro y finalización, también tiene espacio entre elementos de propagación con lagunas igual, perfecta para menús de navegación o diseños de tarjetas.

El espacio alrededor le da a cada elemento el mismo espacio para respirar en ambos lados, lo cual es útil cuando desea márgenes consistentes. Y, el espacio crea espacios idénticos en todas partes, ideales para un espaciado visual equilibrado.

Alinee los artículos trabajos perpendiculares a su dirección de flujo. Si elige el diseño de la fila, esto controla el posicionamiento vertical de los elementos.

Si eligió el diseño de la columna, maneja la alineación horizontal.

El centro mantiene todo alineado en el medio, el inicio posiciona los elementos en el borde inicial, el extremo los empuja al borde lejano y el estiramiento hace que los artículos llenen el espacio disponible.

Estos controles resuelven dolores de cabeza de diseño comunes sin cálculos de CSS personalizados.

3. Espacio de cosas con controles de brecha

Los controles de brecha agregan espacio entre elementos flexibles en su contenedor: columnas, módulos y cualquier trabajo de tipo de contenido. Los huecos crean espacio para respirar sin acolchado desordenado o matemáticas de margen. La brecha aparece solo entre elementos, no alrededor de los bordes exteriores.

Establezca su brecha horizontal en 20 px, y cada columna tendrá ese espacio exacto.

Cambie la brecha vertical a 20px, y todos los espacios se actualizarán al instante.

Divi 5 admite unidades CSS avanzadas como longitudes y porcentajes de ventanas gráficas. Puede usar Clamp () para brechas receptivas que se escalan entre los tamaños de pantalla. También es compatible con la función Calc (), que combina unidades como Calc (2REM + 10px).

Los controles de brecha aquí también admiten variables de diseño. Agregue una variable numérica llamada "brecha de columna horizontal" con la abrazadera (16px, 2VW, 32px) como el valor. Aplique esa variable a los controles de brecha en su sitio.

Cuando desee un espacio más estricto más tarde, edite la variable; Cada brecha se actualizará al instante.

4. Controlando cómo se envuelven los elementos

La envoltura de diseño controla lo que sucede cuando los elementos salen del espacio horizontal. La configuración predeterminada de No Wrap mantiene todo en una línea al reducir los elementos para que se ajusten al contenedor. Cambie a envoltura y elementos que no se ajustan a nuevas líneas mientras mantienen sus tamaños naturales.

Wrap Reverse hace lo mismo que la envoltura normal, pero voltea la dirección. Aparecen nuevas líneas por encima de las anteriores en lugar de a continuación.

Esto le da control sobre la jerarquía visual cuando los elementos se desbordan. El comportamiento de envoltura se mantiene constante en diferentes tamaños de pantalla, por lo que su diseño se adapta previsiblemente del escritorio al móvil sin romperse.

Divi 5 también te ofrece controles de alineación de envoltura. Esta característica aparece automáticamente cuando habilita el envoltorio FLEX y los formularios de múltiples líneas. Cuando la dirección se establece en fila, la alineación de envoltura está disponible para la alineación vertical.

Del mismo modo, para la dirección de la columna, las opciones son para la alineación horizontal.

El estiramiento hace que todas las líneas se expandan para llenar el espacio vertical disponible. Comience racimos de líneas al principio, los grupos centrales en el medio y termine empujándolos hacia el borde opuesto.

El espacio entre las líneas separadas con huecos igual, el espacio alrededor le da a cada línea el mismo espacio para respirar en ambos lados, y el espacio crea espacios idénticos entre todas las líneas.

Esto funciona muy bien para diseños de tarjetas, galerías de imágenes o cualquier contenido que deba fluir naturalmente a través de múltiples filas. Los artículos mantienen sus proporciones y espacios mientras se reorganizan según el ancho disponible. Obtiene descansos limpios sin que los artículos se tritulen en pantallas pequeñas.

5. Trabajando en diferentes tamaños de pantalla

Los siete puntos de interrupción de Divi 5 te brindan un control granular sobre cómo se adaptan tus diseños.

Cada punto de interrupción funciona de forma independiente, por lo que puede cambiar su dirección de diseño a columna en el móvil mientras el diseño de su fila de escritorio permanece intacta. Puede centrar todo en los teléfonos, pero mantenga ese espacio entre la alineación en pantallas más grandes.

Su configuración de escritorio de tres columnas puede convertirse en una pila de una sola columna en el móvil sin afectar los puntos de interrupción medios. Cada tamaño de pantalla obtiene exactamente lo que funciona mejor para esa experiencia de visualización.

El nuevo editor receptivo hace que este proceso sea mucho más suave. Haga clic en el icono del editor receptivo junto a cualquier configuración para ver y modificar valores para todos los tamaños de pantalla a la vez.

Sin embargo, si está utilizando valores de Clamp () para espaciar sus filas y columnas, eso escalaría automáticamente entre los puntos de interrupción sin requerir cambios manuales.

6. Creación de preajustes de grupos de opciones

Después de que su diseño de FlexBox funcione de la manera que lo desee, puede guardar esa configuración como un grupo de opciones preestablecido haciendo clic en la opción de preajustos del grupo de opciones y etiquetándola adecuadamente.

Sus valores de brecha, opciones de alineación y configuración de envoltura se agrupan. Cuando hace clic en Guardar, esa configuración exacta de diseño se vuelve reutilizable en su sitio. Cuando desee usar el preajuste guardado, haga clic en el icono preestablecido en la nueva fila y seleccione el preajuste que acaba de guardar.

El preajuste mantiene sus unidades avanzadas intactas. Su espaciado receptivo transfiere con todas las matemáticas que configuró, y los cambios incluso se realizaron en diferentes puntos de interrupción.

Comience hoy con Flexbox de Divi 5

Flexbox elimina el margen y las matemáticas de acolchado que se rompe cuando cambia los diseños. Deja de jugar con el diseño receptivo con consultas de medios y secciones personalizadas.

Divi 5 convierte estas propiedades abstractas CSS en controles visuales. Puede hacer clic en los botones para configurar la dirección, arrastrar los controles deslizantes para ajustar los huecos y activar y apagar el envoltorio. El editor receptivo maneja los siete puntos de interrupción de un panel, por lo que ve resultados al instante en lugar de adivinar en el código.

Guarde combinaciones exitosas como preajustes y reutilizándolos en cualquier lugar. Pasas tiempo diseñando en lugar de depurar la sintaxis CSS.