Cargando...

Ítems Flex CSS

Flex Container dirige al padre. Los ítems flex responden a otra pregunta: ¿cómo crece, se encoge y arranca el tamaño de cada hijo dentro de esa fila o columna? Domina basis, grow y shrink antes de perseguir patrones flex responsivos.

Una caja de herramientas de ítems flex

📊 Ítems flex de un vistazo

Propiedad Trabajo cotidiano
flex-basis Tamaño principal inicial antes de repartir el espacio libre
flex-grow Cuánto espacio sobrante reclama este ítem (factor sin unidad)
flex-shrink Con qué ganas se encoge este ítem cuando el espacio aprieta
flex Atajo para grow, shrink y basis
align-self Anula el align-items del contenedor en un solo ítem
order Cambia el orden visual (úsalo con cuidado — mantén DOM y accesibilidad sanos)

Piensa en basis como la longitud de partida preferida del ítem en el eje principal. Luego grow y shrink negocian el espacio libre o faltante que quede.

flex-grow — tomar el espacio sobrante

Un factor de 1 deja que un ítem se expanda al espacio libre. Los factores hermanos compiten: dos ítems con flex-grow: 1 parten el sobrante a partes iguales.

Growing main column

css 
.layout {
display: flex;
gap: 1rem;
}

.layout__main {
flex-grow: 1;
}

.layout__aside {
flex-grow: 0;
width: 14rem;
}

flex-basis — partir de un tamaño

flex-basis fija el tamaño principal inicial antes de la matemática grow/shrink. Prefiere basis para el algoritmo flex; width/height siguen importando, pero basis es el punto de partida nativo de flex.

Sidebar with basis

css 
.layout__aside {
flex-basis: 14rem;
flex-grow: 0;
flex-shrink: 0;
}

flex-shrink — devolver espacio

Cuando la fila queda demasiado apretada, los factores shrink deciden quién se comprime. flex-shrink: 0 protege iconos o rieles fijos de ser aplastados.

Protect from squash

css 
.icon-rail {
flex-shrink: 0;
flex-basis: 3rem;
}

El atajo flex

flex: grow shrink basis empaqueta el trío. Defaults tranquilos habituales: flex: 1 (crecer, permitir encoger, basis auto) para un hijo que rellena; flex: 0 0 auto para un chip rígido.

Flex shorthand

css 
.card__body {
flex: 1 1 auto;
}

.card__badge {
flex: 0 0 auto;
}

align-self — un ítem, otra alineación cruzada

Anula el align-items del contenedor para un solo hijo. Útil cuando una insignia debe pegarse al inicio mientras los hermanos siguen centrados.

Align-self override

css 
.row {
display: flex;
align-items: center;
gap: 0.75rem;
}

.row .note {
align-self: flex-start;
}

Un hábito calmado de ítem flex

Primero basis para el tamaño previsto, luego factores grow/shrink, luego el atajo para ordenar. Usa align-self con moderación. Evita trucos de order que revuelven el flujo de teclado y lector de pantalla — y deja los patrones flex con media queries para Flex Responsive.

Named item roles

css 
.cluster__main {
flex: 1 1 auto;
}

.cluster__meta {
flex: 0 0 auto;
align-self: center;
}

Pruébalo tú

  1. Haz una fila main + aside; dale a main flex-grow: 1.
  2. Define el aside con flex-basis: 14rem y flex-shrink: 0.
  3. Protege un icono con flex-shrink: 0.
  4. Reescribe grow/shrink/basis con el atajo flex.
  5. Anula la alineación cruzada de un hijo con align-self.

Errores comunes

  • Poner flex-grow en el contenedor en lugar de en un ítem
  • Confundir width con flex-basis y preguntarse por qué la matemática flex no coincide
  • Reordenar con order y romper el orden de tabulación/fuente
  • Dejar que los logos se aplasten porque shrink quedó en el valor por defecto
  • Tratar esta lección como el módulo Flex Responsive

Resumen

  • Los ítems flex controlan crecimiento, encogimiento y basis inicial
  • flex-grow reparte espacio libre; flex-shrink reparte la presión
  • flex-basis es el tamaño de partida flex en el eje principal
  • El atajo flex y align-self afinan hijos individuales
  • Los patrones flex responsivos vienen después; usa order con cuidado

🧠 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

❓
7
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 47 de 51
Css Tutorial