Flexbox CSS
Los componentes de página esbozaron cascarones, barras, menús y galerías. Flexbox es la forma moderna de alinear ítems en una dirección — fila o columna — con menos lío de float. Activa display: flex, conoce los flex items y profundiza en las siguientes lecciones de Flexbox.
Un kit de inicio de Flexbox
📊 Flexbox de un vistazo
| Idea | Trabajo cotidiano |
|---|---|
| Contenedor flex | Padre con display: flex (o inline-flex) |
| Ítems flex | Hijos directos que participan en el layout flex |
| Eje principal | Dirección primaria en la que viajan los ítems (fila por defecto) |
| Eje transversal | La dirección perpendicular para alinear |
gap |
Espacio integrado entre ítems |
| Próximas lecciones | Props de contenedor, props de ítem, patrones flex responsivos |
Flexbox brilla en una dimensión. Para rejillas de página bidimensionales completas, el módulo Grid llega después de esta pista de Flexbox.
Activa un contenedor flex
Pon display: flex en el padre. Los hijos se convierten en flex items y se sientan en fila por defecto.
.toolbar {
display: flex;
align-items: center;
}
.toolbar .btn {
padding: 0.5rem 0.75rem;
}
Gap en lugar de pelear con margin
gap separa ítems sin trucos de colapso. Prefiérelo para gutters uniformes entre hijos flex.
.toolbar {
display: flex;
gap: 0.75rem;
align-items: center;
}
Separa ítems en el eje principal
justify-content reparte el espacio libre a lo largo del eje principal. space-between es un patrón clásico de cabecera: marca a la izquierda, acciones a la derecha.
.site-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
Centra en el eje transversal — y en ambos
align-items: center alinea ítems en el eje transversal. Combínalo con justify para un grupo calmado centrado dentro de una caja.
.hero-actions {
display: flex;
justify-content: center;
align-items: center;
gap: 0.75rem;
min-height: 4rem;
}
Envuelve cuando la fila se queda sin sitio
flex-wrap: wrap deja que los ítems caigan a la siguiente línea — ya lo viste de pasada en la galería. La lección Flex Responsive irá más lejos.
.chip-row {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
Un hábito calmado de Flexbox
Usa Flexbox para filas y columnas unidimensionales: navs, barras de herramientas, filas de tarjetas, centrado. Luego detalles de contenedor, crecimiento/encogimiento de ítems y flex responsivo. No esperes que Flexbox solo reemplace cada layout Grid.
.cluster {
display: flex;
gap: 0.75rem;
align-items: center;
}
.cluster__main { /* grows later with flex item props */ }
.cluster__meta { /* stays compact */ }
Pruébalo tú
- Crea un
.toolbarcondisplay: flexy tres botones. - Añade
gapyalign-items: center. - Monta una cabecera con
justify-content: space-between. - Centra un par de botones en una caja con justify + align.
- Anota qué lección próxima cubrirá ideas de
flex-grow/flex-basis.
Errores comunes
- Rociar
display: flexen cada envoltorio sin un objetivo de layout - Esperar que Flexbox se comporte como un Grid 2D completo
- Pelear el espaciado con márgenes al azar en vez de
gap - Saltarte las siguientes lecciones y memorizar solo esta intro
- Quedarte en filas float para siempre cuando una fila flex es más clara
Resumen
- Flexbox dispone ítems a lo largo de un eje principal
display: flexcrea un contenedor; los hijos son flex itemsgap,justify-contentyalign-itemsdesbloquean filas cotidianas- Wrap asoma filas responsivas; más llega después
- Las lecciones de contenedor, ítem y Flexbox responsivo profundizan el modelo a continuación
🧠 Pon a Prueba tu Conocimiento
Pon a Prueba tu Conocimiento
Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema
📝 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