Organiza elementos en layouts modernos. Domina Flexbox para alineación y distribución flexible.

Flexbox y Grid

🎯 Objetivos

• Comprender cómo organizar elementos en layouts modernos.
• Dominar Flexbox para alineación y distribución flexible.
• Aprender CSS Grid para estructuras más complejas.
• Combinar ambos sistemas para diseños responsivos y profesionales.

🔹 1. Flexbox: alineación y distribución

Flexbox es ideal para organizar elementos en una sola dimensión (fila o columna).

css

.contenedor {
  display: flex;
  justify-content: space-between; /* distribuye horizontalmente */
  align-items: center;            /* alinea verticalmente */
}

.item {
  flex: 1; /* cada item ocupa el mismo espacio */
}

👉 Ejemplo: menú horizontal con elementos centrados y espaciados.

🔹 2. Propiedades clave de Flexbox

• justify-content: controla la distribución horizontal (flex-start, center, space-between).
• align-items: controla la alineación vertical (flex-start, center, stretch).
• flex-grow, flex-shrink, flex-basis: controlan cómo los elementos se expanden o reducen.

🔹 3. CSS Grid: diseño bidimensional

Grid permite organizar elementos en filas y columnas.

css

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columnas iguales */
  grid-gap: 20px; /* espacio entre elementos */
}

.celda {
  background: #003366;
  color: #fff;
  padding: 20px;
}

👉 Ejemplo: galería de imágenes con 3 columnas.

🔹 4. Propiedades clave de Grid

• grid-template-columns y grid-template-rows: definen la estructura.
• grid-gap: espacio entre celdas.
• grid-column y grid-row: permiten que un elemento ocupe varias columnas o filas.

🔹 5. Combinación Flexbox + Grid

• Usa Grid para la estructura general de la página (header, main, sidebar, footer).
• Usa Flexbox dentro de cada sección para alinear elementos internos (ej. botones en un header).

📝 Actividad práctica

1. Crea un layout de página con Grid:
   • Header arriba (1 fila).
   • Main y Sidebar en dos columnas.
   • Footer abajo (1 fila).
2. Dentro del Header, usa Flexbox para centrar un logo y un menú.
3. Haz que el layout sea responsivo: en pantallas pequeñas, el Sidebar debe pasar debajo del Main.

MÓDULO 4 CSS Responsive Design y Media Queries