Formación

Flexbox: qué es y cómo dominarlo en Webflow de manera práctica y hasta divertida

Flexbox es sin duda una de las soluciones para el diseño web más espectacular y efectiva. Nos brinda un método para organizar y distribuir en el espacio de nuestra página web todos los elementos

4/7/2021

Webflow es una herramienta online basada en la tendencia NoCode, una filosofía que posibilita crear herramientas y servicios sin conocimientos de programación y con usos prácticos altamente interconectadas.

Flexbox es un poderoso mecanismo de diseño que permite resolver problemas comunes de diseño web responsive con facilidad. Y con Webflow, se puede hacer todo con dos simple métodos:

Ajustes Flex del elemento "padre": simplemente configura un elemento principal para que se muestre: elige Flex, luego define la alineación, envuelve (Wrap) los elementos secundarios en filas o invierte el diseño.

Ajustes Flex del elemento "hijo": luego, atribuye a los elementos secundarios su propio comportamiento de cambio de tamaño, opciones de alineación e incluso orden de visualización específico del dispositivo.

Flexbox puede ayudarte a resolver algunos problemas de diseño muy difíciles y/o creativos.

A continuación te facilitamos dos enlaces en los cuales Webflow nos muestra de manera visual todas las posibilidades de Flexbox con ejemplos prácticos y explicaciones de cada caso.

PUEDES ENCONTRAR CASO CUALQUIER TIPO DE COMPOSICIÓN Y SOLUCIÓN DE DISEÑO:

  • Cada ejemplo viene acompañado de capturas de pantallas explicativas.
  • También existen videos tutoriales para que puedas ver la creación paso a paso.
  • Además puedes editar la propia página en Webflow y averiguar cómo está estructurada.
  • Asimismo puedes acceder a un video de introducción a Flexbox.

Más información: https://flexbox.webflow.com

PRACTICAR, PRACTICAR Y PRACTICAR:

  • Para complementar lo indicado en la página anterior Webflow ofrece una "divertida" sección que deberás de usar con Webflow donde se te propone resolver 28 ejercicios prácticos de uso de Flexbox a modo de rompecabezas.

La dificultad va en aumento a medida de que vas pasando los niveles y te obliga a pensar con lógica.

Más información: https://www.flexboxgame.com

CONSEJO: Debo de indicar que Webflow es una herramienta muy versátil y potente pero que también es necesario aplicar una cierta metodología previa de diseño para que el resultado sea óptimo y sin desperdiciar un tiempo preciado intentando diseñar directamente en Webflow. Un paso previo imprescindible, a mi entender, es elaborar la maqueta y estilo de nuestro proyecto con herramientas de prototipado como Adobe XD o Figma, por citar solo dos de ellas. Sea para nosotros o un cliente ese paso nos ahorrará tiempo y recursos que nos permitirán una vez llegado a Webflow confeccionar el sitio web con más soltura y eficacia.

PRECIO: Gratuito, solo el tiempo que le quieras dedicar.

Una excelente manera de practicar y perfeccionar tu dominio de Flexbox con Webflow.

Explora la página y su contenido, seguro que sea cual sea tu nivel hay cosas que puedes aprender o perfeccionar.

Más información: https://webflow.com

Imagen
Formación

Opciones formativas en castellano sobre Webflow para el verano

El tiempo de verano puede ser un buen momento para aprender o perfeccionar nuestros conocimientos sobre Webflow

Leer...
Imagen
Formación

Primera edición del curso de Webflow con Kschool

Nueva propuesta formativa para aprender Webflow

Leer...
Imagen
Formación

Los 15 errores a no cometer con Webflow

Weblow, como toda herramienta y principalmente para principiantes, puede en un principio generar una serie de errores comunes de uso si no tenemos ciertos principios o hábitos claros.

Leer...