En este tutorial aprenderás cómo construir una estructura de ejemplo para tus proyectos web utilizando el diseño Flexbox en CSS y HTML. Nos enfocaremos en las herramientas de depuración integradas de Visual Studio Code en conjunto con Microsoft Edge y daremos los primeros pasos para activar el diseño Flexbox. Flexbox es un sistema de diseño potente que te ayuda a crear diseños complejos con un esfuerzo mínimo y una disposición flexible de elementos.
Principales conclusiones
- Con Flexbox puedes alinear elementos horizontal y verticalmente.
- Las herramientas de desarrollo de Microsoft Edge se pueden integrar directamente en Visual Studio Code.
- La flex-direction afecta la alineación de los elementos Flex.
Guía paso a paso
Primero, en Visual Studio Code, instalarás las Herramientas de Microsoft Edge. Busca "Microsoft Edge Tools for VS Code" en las extensiones e instálalas.
Una vez que la extensión esté instalada, ve a las opciones de depuración. Haz clic en "Run and Debug" y luego en "create a launch.json file". Esto te ayudará a configurar tus ajustes.
En el archivo de configuración que acabas de crear, agrega una nueva configuración para "Herramientas de Microsoft Edge". Asegúrate de ingresar localhost:3000 como dirección local, ya que ejecutaremos el servidor en ese puerto en nuestra terminal.
Ahora es el momento de iniciar tu proyecto. Ve al subdirectorio adecuado y ejecuta el comando npm run dev. Luego abre localhost:3000 en tu navegador.
Una vez que la página se haya cargado, puedes activar las herramientas de desarrollo de Microsoft Edge haciendo clic en el botón correspondiente en Visual Studio Code. Esto abrirá la herramienta de desarrollo directamente junto a tu editor.
Ahora puedes ver la estructura de tu aplicación. Tenemos un contenedor (div) que lleva la clase "Contenedor Flex". Dentro de este contenedor, hay cuatro elementos DIV que tienen la clase "Elemento Flex Child" y representan el contenido de texto 1, 2, 3 y 4 respectivamente.
Actualmente, el Contenedor Flex está definido con un ancho de 400 píxeles y una altura de 200 píxeles, mientras que los hijos Flex tienen un ancho de 100 píxeles y una altura de 50 píxeles. Aunque actualmente ninguno de los hijos está alineado con Flexbox, se muestran en una lista vertical.
Para usar Flexbox activamente, debes agregar y guardar la propiedad CSS display: flex; para el Contenedor Flex. Cuando lo hagas, verás que la disposición de los hijos cambia automáticamente y ahora se muestran uno al lado del otro.
Si deseas volver a alinear verticalmente los hijos Flex, puedes usar la propiedad flex-direction. Establece flex-direction: column; para el Contenedor Flex a fin de cambiar la alineación de los hijos Flex nuevamente en la dirección vertical.
Notarás que los hijos Flex están nuevamente alineados verticalmente. Al ajustar la altura y el ancho, parecerá que están integrados en un bloque, incluso si la propiedad display no está configurada en bloque, sino en Flex.
Esto fue un resumen de los fundamentos del diseño Flexbox. En el video, discutimos las características principales y sus efectos. En futuros tutoriales exploraremos más funciones de Flexbox y veremos todo lo que puedes lograr con este poderoso sistema de diseño.
Resumen
En este tutorial has aprendido a construir una estructura simple con Flexbox en CSS. Has integrado las herramientas de desarrollo de Microsoft Edge en Visual Studio Code y has dado los primeros pasos para activar el diseño Flex. Aún hay muchas posibilidades por delante que exploraremos más detalladamente en los próximos videos.
Preguntas frecuentes
¿Cómo activo Flexbox en CSS?Activa Flexbox configurando display: flex; para el contenedor.
¿Qué es flex-direction?flex-direction determina la orientación de los hijos Flex, ya sea horizontal (row) o vertical (column).
¿Cómo integro las herramientas de Microsoft Edge en Visual Studio Code?Solo busca "Microsoft Edge Tools for VS Code" en la barra de extensiones e instálalas.
