Flexbox es unidimensional: el contenedor elige un eje principal y el transversal es perpendicular. Con row, el principal sigue la dirección en línea; con column, la dirección de bloque. Esa elección cambia lo que controlan justify-content y align-items, así que identifica el eje en vez de memorizar atajos horizontales y verticales.
Distribuye sobre el eje principal
justify-content coloca el grupo cuando queda espacio libre positivo. flex-start y flex-end lo empaquetan hacia un borde, center divide el sobrante y space-* lo reparte entre o alrededor de los elementos. No define anchos: primero se resuelven grow, basis, contenido intrínseco y tamaño del contenedor. Cambia row por column para ver que la misma regla sigue al eje.
Distingue elementos y líneas con salto
align-items coloca elementos dentro de cada línea sobre el eje transversal; align-self lo sustituye para un hijo. align-content distribuye líneas completas y no actúa en un nowrap de una sola línea. Para verlo, elige wrap, usa bases suficientes para crear varias líneas y deja espacio transversal. Gap separa filas y columnas vecinas, pero no añade relleno en el borde.
Verifica el componente real
FlexWeave representa el modelo visual validado con el navegador actual, pero desconoce tu contenido, modo de escritura, controles enfocables y anchos compatibles. Integra las reglas en el componente, conserva un orden HTML significativo y prueba anchos estrechos, zoom, traducciones largas, teclado y tecnologías de asistencia. La dirección inversa y order nunca demuestran una secuencia de lectura correcta. Guarda CSS y HTML en control de versiones porque la cápsula no conserva proyectos.