Unidad 4: CSS Avanzado – Diseño Responsivo y Estilos Complejos
Introducción al Desarrollo Web con HTML y CSS
¡Bienvenido a la sesión 9! Hoy aprenderemos sobre Flexbox, una herramienta poderosa que nos permite organizar y alinear el contenido de nuestras páginas web en columnas y filas de manera flexible. Con Flexbox, podemos hacer que nuestros diseños se adapten a diferentes tamaños de pantalla y tengan una apariencia profesional. Al final de la sesión, tendrás la oportunidad de crear una página con una galería de fotos organizada en cuadrícula. ¡Empecemos!
1. Introducción a Flexbox: Qué es y para Qué Sirve
¿Qué es Flexbox? Flexbox (Flexible Box Layout) es un sistema de diseño en CSS que facilita la organización y alineación de elementos dentro de un contenedor. Con Flexbox, podemos:
- Crear filas o columnas de elementos.
- Ajustar los elementos para que se distribuyan y alineen de manera flexible.
- Organizar el contenido para que sea responsivo, lo cual significa que se adapta a distintos tamaños de pantalla.
Configuración inicial
Para usar Flexbox, necesitamos un contenedor principal. Este contenedor tendrá una propiedad llamada display: flex;, que activará las propiedades de Flexbox para los elementos dentro de él.
.container {
display: flex;
}
2. Organizar el Contenido en Columnas y Filas con Flexbox
Eje principal y eje cruzado
Flexbox organiza el contenido en dos ejes:
- Eje principal (main axis): la dirección en la que se alinean los elementos (puede ser horizontal o vertical).
- Eje cruzado (cross axis): el eje perpendicular al eje principal.
Crear filas y columnas
Por defecto, los elementos en Flexbox se organizan en una fila. Puedes cambiar esto a columnas utilizando la propiedad flex-direction.
- Fila: Los elementos se alinean horizontalmente.
.container { display: flex; flex-direction: row; } - Columna: Los elementos se alinean verticalmente.
.container { display: flex; flex-direction: column; }
Distribuir y alinear elementos
Flexbox nos permite distribuir el espacio entre los elementos y alinearlos de diferentes formas. Aquí tienes algunos de los valores más comunes:
justify-content: Alinea los elementos a lo largo del eje principal.
.container {
justify-content: space-between; /* Opciones: center, space-around, etc. */
}align-items: Alinea los elementos a lo largo del eje cruzado.
.container {
align-items: center; /* Opciones: flex-start, flex-end, stretch, etc. */
}
3. Proyecto: Crear una Página “Galería de Fotos” Organizada en Cuadrícula
¡Es hora de poner en práctica lo que hemos aprendido! Vamos a construir una página de galería de fotos utilizando Flexbox para organizar las imágenes en una cuadrícula.
Paso a Paso
Paso 1: Estructura básica de HTML- Crea un archivo HTML y añade una estructura básica. Usa un contenedor
<div> que contenga las imágenes de la galería.
<div class="gallery-container">
<div class="photo">Foto 1</div>
<div class="photo">Foto 2</div>
<div class="photo">Foto 3</div>
<div class="photo">Foto 4</div>
<!-- Agrega más fotos según lo desees -->
</div>
Paso 2: Aplicar Flexbox en el CSS
- Ahora en tu archivo CSS, aplica
display: flex;al contenedor de la galería y añade estilos para organizar las fotos en una cuadrícula.
.gallery-container {
display: flex;
flex-wrap: wrap; /* Permite que las fotos se ajusten en filas */
gap: 10px; /* Espacio entre cada foto */
justify-content: center;
}
Paso 3: Estilos de las fotos
- Dale estilo a cada foto, asignándole un tamaño fijo o adaptable para que se vean bien en cuadrícula.
.photo {
width: 200px;
height: 150px;
background-color: #ddd; /* Cambia esto por una imagen de fondo si tienes una */
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: #333;
border-radius: 8px;
}Paso 4: Visualiza en el navegador
- Guarda tu archivo HTML y abre la página en el navegador para ver la galería en acción. Las fotos deberían alinearse en filas y ajustarse automáticamente a diferentes tamaños de pantalla.
¡A Practicar y Explorar!
Ahora tienes una galería de fotos que utiliza Flexbox para organizarse de manera flexible. Prueba añadir más fotos, ajustar los tamaños y cambiar el espaciado entre ellas. Puedes experimentar con diferentes propiedades de Flexbox para ver cómo afectan al diseño.
En la próxima sesión, aprenderemos más sobre cómo usar CSS Grid para hacer layouts aún más complejos. ¡Estás haciendo un trabajo increíble!