Profundización en Flexbox: alineación, ajuste y orden
Domine justify-content, align-items, align-self, flex-wrap, flex-grow, flex-shrink, flex-basis y la propiedad order.
Profundización en Flexbox: alineación, ajuste y orden es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 1 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 Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.
Repaso: contenedor y elementos Flex
Repaso: display: flex en el contenedor convierte a sus hijos directos en elementos flex. El eje principal sigue la dirección de flex-direction. El eje transversal es perpendicular.
Valores de justify-content en detalle
Todos los valores de justify-content en un contenedor con dirección de fila: flex-start (predeterminado), flex-end, center, space-between (solo espacios entre elementos), space-around (margen igual alrededor de cada elemento), space-evenly (espacios iguales en todas partes).
.row { display: flex; }
.space-between { justify-content: space-between; }
.space-around { justify-content: space-around; }
.space-evenly { justify-content: space-evenly; }
.center { justify-content: center; }align-items frente a align-content
align-items alinea los elementos dentro de una sola línea. align-content alinea varias líneas (solo funciona cuando flex-wrap es wrap y hay varias líneas).
.single-line { display: flex; align-items: center; }
.multi-line {
display: flex;
flex-wrap: wrap;
align-content: space-between; /* space between rows */
}align-self en elementos individuales
align-self reemplaza align-items para un elemento flex específico. Resulta útil para hacer que un elemento se estire mientras los demás permanecen centrados.
.container { display: flex; align-items: center; height: 200px; }
.card { background: #e2e8f0; padding: 16px; }
.card.stretch { align-self: stretch; } /* overrides center */flex-wrap: wrap y wrap-reverse
flex-wrap: wrap permite que los elementos pasen a nuevas líneas. wrap-reverse hace que se ajusten, pero en la dirección opuesta. Combínelo con gap para crear cuadrículas adaptables sencillas.
.card-grid {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.card-grid > * {
flex: 1 1 280px; /* grow, shrink, min-width */
max-width: 400px;
}flex-grow, flex-shrink y flex-basis
Las tres partes de la abreviatura flex aplicada a los elementos. flex-grow: proporción del espacio disponible. flex-shrink: ritmo al que se reducen cuando el espacio es limitado. flex-basis: tamaño inicial antes de crecer o reducirse.
.sidebar { flex: 0 0 250px; } /* don't grow, don't shrink, 250px */
.main { flex: 1 1 0%; } /* grow to fill, shrink, no base */
.fixed { flex: 0 0 100px; } /* fixed 100px */Abreviaturas flex comunes
flex: 1 = 1 1 0%. flex: auto = 1 1 auto. flex: none = 0 0 auto. flex: 2 = 2 1 0% (ocupa el doble de espacio que flex: 1).
Propiedad order
order cambia el orden visual de los elementos flex sin modificar el HTML. El valor predeterminado es 0. Los valores negativos aparecen antes que 0. Úselo con cuidado: las discrepancias entre el orden visual y el del DOM pueden confundir a los usuarios de teclado y de lectores de pantalla.
.sidebar { order: -1; } /* appears first visually regardless of DOM order */
.main { order: 0; } /* default */min-width: 0 para corregir el desbordamiento
Los elementos flex tienen un min-width: auto implícito, lo que significa que no se reducen por debajo del tamaño de su contenido. Establezca min-width: 0 para permitir que se reduzcan aún más; es fundamental para truncar texto dentro de elementos flex.
.flex-item {
min-width: 0; /* allows shrinking below content size */
}
.flex-item span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}Espaciado de Flex sin gap
En entornos antiguos sin compatibilidad con gap, use márgenes en los elementos y un margen negativo en el contenedor para crear espacios entre ellos. Sin embargo, hoy gap es compatible con todos los navegadores modernos: dé preferencia a su uso.
Contenedores Flex anidados
Cualquier elemento flex puede ser también un contenedor flex. Anide Flexbox para crear diseños complejos: una fila de tarjetas cuyos elementos internos también se organizan con Flexbox. Este es el patrón habitual en los diseños modernos.
.card {
display: flex;
flex-direction: column;
}
.card-body {
flex: 1; /* push footer to the bottom */
}
.card-footer {
margin-top: auto; /* or use flex: 0 on footer */
}Comprobación rápida
¿Qué propiedad distribuye el espacio entre los elementos flex a lo largo del eje transversal cuando flex-wrap es wrap?
Repaso: profundización en Flexbox
justify-content distribuye los elementos en el eje principal. align-items controla el eje transversal en una sola línea. align-content controla el eje transversal en varias líneas. align-self permite hacerlo por elemento. flex-wrap: wrap habilita varias líneas. La abreviatura flex controla el crecimiento, la reducción y el tamaño base. order cambia el orden visual. min-width: 0 evita problemas de reducción.
Preguntas frecuentes
¿La lección «Profundización en Flexbox: alineación, ajuste y orden» es gratis?
Sí — el texto completo de «Profundización en Flexbox: alineación, ajuste y orden» 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 Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Profundización en Flexbox: alineación, ajuste y orden»?
Domine justify-content, align-items, align-self, flex-wrap, flex-grow, flex-shrink, flex-basis y la propiedad order. Practicas Frontend 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 Frontend Academy?
No se requiere experiencia previa. Frontend 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 1 de 4.
¿Cuánto tiempo toma la lección «Profundización en Flexbox: alineación, ajuste y orden»?
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 Frontend Academy?
Sí. Cada lección de Frontend 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
- Profundización en Flexbox: alineación, ajuste y orden
- CSS Grid: template-areas auto-fit minmax
- Combinar Flexbox y Grid
- Variables CSS para crear temas