Layouts habituales de Flexbox: navegación, tarjetas y objetos multimedia
Cree barras de navegación, cuadrículas de tarjetas y objetos multimedia prácticos mediante flexbox.
Layouts habituales de Flexbox: navegación, tarjetas y objetos multimedia es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de CSS Academy incluye 4 lecciones en total.
Por qué importan los patrones de Flexbox
Ciertos patrones de diseño aparecen en prácticamente todos los proyectos web. Flexbox resuelve cada uno de ellos de forma eficiente y con un CSS mínimo. Conocer estos patrones permite desarrollar más rápido y escribir menos código.
Patrón de barra de navegación
Una barra de navegación horizontal con un logotipo a la izquierda y enlaces a la derecha:
<nav class="navbar">
<span class="logo">Brand</span>
<div class="nav-links">
<a href="#">Home</a>
<a href="#">About</a>
</div>
</nav>
Sección hero centrada
Contenido centrado con altura completa mediante Flexbox:
<div class="hero">
<h1>Welcome</h1>
</div>
Cuadrícula de tarjetas
Cuadrícula responsive de tarjetas con ajuste de línea y separaciones uniformes:
<div class="card-grid">
<div class="card">Card 1</div>
<div class="card">Card 2</div>
</div>
Objeto multimedia
El objeto multimedia —una imagen de ancho fijo junto a texto flexible— es un patrón de interfaz fundamental que se utiliza en comentarios, publicaciones de redes sociales y elementos de listas:
<div class="media">
<img class="media-img" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23ff6347'/><circle cx='150' cy='150' r='100' fill='%231e90ff'/></svg>" alt="avatar" />
<div class="media-body">
<strong>Jane Doe</strong>
<p>Comment text goes here.</p>
</div>
</div>
Pie de página fijo con Flex
Coloque el pie de página en la parte inferior sin establecer alturas fijas:
<main>Main content that grows to fill available space</main>
<footer>Footer</footer>
Botón con icono y texto
Icono y texto centrados verticalmente en un botón:
<button class="btn">
<svg width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="8" fill="currentColor"/></svg>
Download
</button>
Diseño Holy Grail con Flexbox
Diseño Holy Grail de tres columnas (encabezado, pie de página, barra lateral-contenido principal-barra lateral):
<div class="holy-grail">
<div class="left-sidebar">Left</div>
<div class="main-content">Main</div>
<div class="right-sidebar">Right</div>
</div>
Fila de formulario con etiquetas
Pares de etiqueta y campo de entrada alineados en una fila de formulario:
<div class="form-row">
<label>Email</label>
<input type="email" />
</div>
Galería de miniaturas
Una galería de imágenes con ajuste de línea:
<div class="gallery">
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23ff6347'/><circle cx='150' cy='150' r='100' fill='%231e90ff'/></svg>" alt="thumb" />
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23667eea'/><circle cx='150' cy='150' r='100' fill='%23764ba2'/></svg>" alt="thumb" />
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23ffd700'/><circle cx='150' cy='150' r='100' fill='%23ff6347'/></svg>" alt="thumb" />
</div>
Lista de chips o etiquetas
Chips o etiquetas en línea que se ajustan y fluyen como el texto:
<div class="tags">
<span class="tag">CSS</span>
<span class="tag">Flexbox</span>
<span class="tag">Layout</span>
</div>
Comprobación rápida
En el patrón de objeto multimedia, ¿qué evita que el cuerpo de texto se desborde si contiene una cadena larga que no se puede dividir?
Resumen
Patrones habituales de Flexbox: barra de navegación (logotipo + auto-margin + enlaces), hero (columna + center justify), objeto multimedia (imagen fija + cuerpo con flex:1 y min-width:0), pie de página fijo (cuerpo en columna + elemento main con flex:1) y cuadrícula de tarjetas (wrap + flex:1 1 Xpx). Estos cinco patrones cubren la mayoría de las necesidades de diseño reales.
Preguntas frecuentes
¿La lección «Layouts habituales de Flexbox: navegación, tarjetas y objetos multimedia» es gratis?
Sí — el texto completo de «Layouts habituales de Flexbox: navegación, tarjetas y objetos multimedia» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de CSS Academy, actualiza a CoddyKit PRO. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Layouts habituales de Flexbox: navegación, tarjetas y objetos multimedia»?
Cree barras de navegación, cuadrículas de tarjetas y objetos multimedia prácticos mediante flexbox. Practicas CSS Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar CSS Academy?
No se requiere experiencia previa. CSS Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Layouts habituales de Flexbox: navegación, tarjetas y objetos multimedia»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de CSS Academy?
Sí. Cada lección de CSS Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Anulación de la alineación de flex items con align-self
- Propiedad order y reordenación visual
- Patrones abreviados de flex
- Layouts habituales de Flexbox: navegación, tarjetas y objetos multimedia