Cargando...

Flex responsive CSS

Flex Items dimensionó cada hijo. Flex responsive plantea la siguiente pregunta: cuando el viewport se estrecha, ¿esa fila flex debe envolverse, apilarse o invertir la dirección? Aprende unos cuantos patrones tranquilos de media query — los módulos profundos de Responsive Design y Media Queries llegan después.

Una caja de herramientas flex responsive

📊 Flex responsive de un vistazo

Herramienta Trabajo diario
flex-wrap Deja que los ítems pasen a una línea nueva cuando la fila es demasiado estrecha
flex-direction Cambia row ↔ column en un breakpoint para apilar secciones
Media query Aplica una regla flex nueva solo cuando el viewport coincide
flex-basis / min-width Indica cuándo las tarjetas se envuelven o siguen lado a lado
gap Mantiene el espaciado honesto al envolver líneas
Evitar order para el layout Conserva el orden del DOM para teclado y lectores de pantalla

Parte de una base flex legible (escritorio o mobile-first). En un breakpoint claro, cambia solo lo que deba cambiar — wrap, dirección o basis — no todas las propiedades a la vez.

flex-wrap — deja respirar la fila

Cuando las tarjetas deben ir en fila en pantallas anchas y envolverse en lugar de aplastarse sin fin, activa el wrap y dale a cada tarjeta un basis sensato.

Wrapping card row

css 
.cards {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}

.cards__item {
flex: 1 1 14rem;
min-width: 12rem;
}

Cambio de dirección en un breakpoint

Patrón clásico: lado a lado en viewports anchos, columna apilada en los estrechos. Cambia flex-direction dentro de una media query — mantén el mismo HTML.

Stack on small screens

css 
.shell {
display: flex;
flex-direction: row;
gap: 1.25rem;
}

@media (max-width: 40rem) {
.shell {
flex-direction: column;
}
}

Basis y min-width para el reflujo

Combina el wrap con flex-basis o min-width para que los ítems decidan cuándo caer. Un breakpoint también puede restablecer el basis si un tamaño nunca envuelve limpio.

Basis at a breakpoint

css 
.toolbar {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}

.toolbar__action {
flex: 1 1 10rem;
}

@media (max-width: 36rem) {
.toolbar__action {
flex-basis: 100%;
}
}

Los viewports estrechos no son otro lenguaje de layout — las mismas herramientas flex, valores distintos. Cambia dirección o wrap; no inventes un segundo árbol HTML.

Un hábito flex responsive tranquilo

Primero un breakpoint principal. Prefiere wrap y cambios de dirección frente a reordenaciones con order. Mantén el orden del código fuente sensato. Deja las imágenes fluidas, sistemas complejos de breakpoints y la teoría Responsive completa para lecciones posteriores.

Named stack roles

css 
.page {
display: flex;
flex-direction: row;
gap: 1.5rem;
}

.page__main {
flex: 1 1 auto;
min-width: 0;
}

.page__rail {
flex: 0 0 16rem;
}

@media (max-width: 48rem) {
.page {
flex-direction: column;
}

.page__rail {
flex-basis: auto;
width: auto;
}
}

Min-width wrap guard

css 
.chips {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}

.chips__item {
flex: 0 1 auto;
min-width: 7rem;
}

Pruébalo tú

  1. Construye una fila de tarjetas con flex-wrap: wrap y flex: 1 1 14rem.
  2. Cambia un shell a flex-direction: column bajo max-width: 40rem.
  3. Obliga las acciones de la barra a flex-basis: 100% en un breakpoint pequeño.
  4. Añade min-width para que los chips se envuelvan en lugar de aplastarse.
  5. Resiste usar order para «arreglar» el layout responsive.

Errores frecuentes

  • Encoger ítems para siempre en lugar de envolver o apilar
  • Usar order como herramienta de layout responsive y romper el orden de tabulación
  • Olvidar flex-wrap y preguntarse por qué las tarjetas nunca caen
  • Meter todas las propiedades flex en una media query gigante
  • Tratar esta lección como todo el curso de Responsive Design

Resumen

  • El flex responsive adapta wrap, dirección y basis entre anchos
  • flex-wrap más un basis/min-width sensato deja refluir las filas
  • Las media queries cambian flex-direction para apilar en pantallas estrechas
  • Prefiere breakpoints tranquilos; evita order para trucos de layout
  • Los módulos más profundos de Responsive y Media Queries llegan después

🧠 Pon a Prueba tu Conocimiento

Listo para Empezar

Pon a Prueba tu Conocimiento

Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema

❓
8
Preguntas
🎯
70%
Para Aprobar
♾️
∞
Tiempo
🔄
∞
Intentos

📝 Instrucciones

  • Lee cada pregunta cuidadosamente
  • Selecciona la mejor respuesta para cada pregunta
  • Puedes repetir el quiz tantas veces como quieras
  • Tu progreso se mostrará en la parte superior
Tema 48 de 51
Css Tutorial