Diseño Web responsivo 2 columnas


Domina CSS Flexbox y crea layouts web responsivos de dos columnas de forma sencilla.

Los scripts de estos ejemplos se encuentran en el Capítulo 9 del Libro 1 del Instructivo Programando Paso a Paso y Más

Los libros están a la venta en Amazon

Mi Sitio Web de dos columnas

Explora cómo usar selectores y propiedades para diseñar sitios web de varias columnas y mucho más. ¡Mejora tus habilidades en desarrollo web. ¡Inicia tu viaje hacia el dominio del desarrollo web hoy mismo!

Los scripts de estos ejemplos se encuentran en el Capítulo 9 del Libro 1 del Instructivo Programando Paso a Paso y Más

Los libros están a la venta en Amazon

En este ejemplo utilizamos flex en el contenedor .container para crear una disposición de dos columnas.
flex: 1 en main y aside asegura que ambos elementos se expandan proporcionalmente.
min-width en main y aside asegura que mantengan un ancho mínimo adecuado.
El @media query cambia el diseño a una sola columna en dispositivos con un ancho máximo de 768px.
Esta division final abarca las dos columnas y se coloca en posición vertical en pantallas pequeñas