Flexbox: Deja de Pelear con Layout CSS
Flexbox es un sistema de layout unidimensional. Maneja filas o columnas (no ambos — eso es Grid). Cuando entiendas los dos ejes y un puñado de propiedades, nunca más usarás hacks con float.
Los Dos Ejes
flex-direction: row (por defecto)
Eje Principal →→→→→→→→→→→→→→
↓ Eje Transversal
flex-direction: column
Eje Principal ↓↓↓↓↓↓↓↓↓↓↓↓↓
→ Eje Transversal →→→→→→→→→justify-content funciona en el eje principal. align-items funciona en el eje transversal.
Propiedades del Contenedor
.container {
display: flex;
/* Dirección */
flex-direction: row; /* → izquierda a derecha */
flex-direction: column; /* ↓ arriba a abajo */
/* Envoltura */
flex-wrap: nowrap; /* línea única (por defecto) */
flex-wrap: wrap; /* envuelve a la siguiente línea */
/* Alineación eje principal */
justify-content: flex-start; /* |■ ■ ■ | */
justify-content: center; /* | ■ ■ ■ | */
justify-content: space-between; /* |■ ■ ■| */
justify-content: space-evenly; /* | ■ ■ ■ | */
/* Alineación eje transversal */
align-items: stretch; /* items llenan la altura (por defecto) */
align-items: center; /* items centrados verticalmente */
/* Espacio entre items */
gap: 16px;
}Propiedades de los Items
.item {
/* Crecer: cuánto del espacio restante tomar */
flex-grow: 1; /* tomar parte igual */
/* Encoger: cuánto encoger cuando el espacio es ajustado */
flex-shrink: 0; /* nunca encoger */
/* Base: tamaño inicial antes de grow/shrink */
flex-basis: 200px;
/* Atajo (más común) */
flex: 1; /* crecer igualmente */
flex: 0 0 200px; /* fijo 200px */
/* Sobrescribir alineación para este item */
align-self: center;
}Patrones Comunes
/* Centrar todo */
.center-all {
display: flex;
justify-content: center;
align-items: center;
}
/* Barra de navegación */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
}
/* Sidebar + contenido principal */
.layout { display: flex; }
.sidebar { flex: 0 0 250px; }
.main { flex: 1; }
/* Grid de cards que envuelve */
.card-grid {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.card-grid > * {
flex: 1 1 300px; /* mín 300px, crece para llenar */
}
/* Footer pegado al fondo */
.page {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.page > main { flex: 1; }Referencia CSS: Cheatsheet CSS — Flexbox, Grid y todas las propiedades CSS en una página buscable.