Flexbox sobre problemas reales

El método, en tres preguntas

Cuando te enfrentes a un componente, no busques la propiedad: contesta esto.

1. ¿Qué elementos tengo que colocar en una misma línea?
2. ¿En qué dirección van: fila o columna? Ese es el eje principal
3. ¿Qué hago con el espacio que sobra en ese eje, y cómo alineo en el otro?

Con eso, justify-content y align-items dejan de ser prueba y error.

Caso 1 · Una botonera

<div class="acciones">
    <button type="submit">Guardar</button>
    <button type="button">Cancelar</button>
</div>

¿Qué coloco?

Dos botones, uno al lado del otro.

¿Eje principal?

Fila. Es el valor por defecto, así que no hace falta escribir flex-direction.

¿Y el espacio sobrante?

Depende de lo que quiera: pegados a la izquierda es flex-start; a la derecha, como en un formulario, es flex-end.

.acciones {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm);
}

Caso 2 · Una tarjeta horizontal

┌───────────────────────────────────┐
│ imagen │ título                   │
│        │ descripción              │
│        │ precio            botón  │
└───────────────────────────────────┘

Aquí hay dos Flexbox anidados, y verlo es media solución:

1. Uno exterior en fila: imagen a un lado, información al otro.
2. Uno interior en columna dentro de la información: título, descripción y la línea del precio.
3. Un tercero en fila para esa última línea, con el precio a la izquierda y el botón a la derecha.

.producto        { display: flex; gap: var(--space-md); }
.producto__datos { display: flex; flex-direction: column; gap: var(--space-xs); }
.producto__pie   { display: flex; justify-content: space-between; align-items: center; }

Anidar contenedores es normal y no es un síntoma de nada malo. Cada uno resuelve una dimensión.

Caso 3 · Centrar

El problema con más recetas copiadas de internet de toda la historia de CSS. Con Flexbox son dos líneas, pero conviene entenderlas:

.caja {
    display: flex;
    justify-content: center;   /* centra en el eje principal */
    align-items: center;       /* centra en el transversal */
}

Centrar es simplemente centrar en los dos ejes a la vez. Si solo necesitas uno, solo escribes uno.

Reto 2 · Los tres centrados (10 min)

Tienes tres cajas, cada una con un cuadrado dentro. Consigue, sin position y sin márgenes fijos:

1. El cuadrado centrado en horizontal, arriba del todo.
2. El cuadrado centrado en vertical, pegado a la derecha.
3. El cuadrado centrado en los dos ejes.

Ver respuesta del Reto 2

Con display: flex y dirección por defecto (fila):

1 · justify-content: center; y nada más: el eje principal es el horizontal, y sin align-items el hijo se queda arriba si tiene altura propia.

2 · justify-content: flex-end; align-items: center;

3 · justify-content: center; align-items: center;

Y la comprobación de que lo has entendido: con flex-direction: column, los tres se resuelven intercambiando las dos propiedades.

Microrevisión · diez minutos, sin nota

Intercambia con un compañero únicamente una sección que ya hayas maquetado. Encuentra una decisión de layout que no puedas justificar y descríbela así:

1. Qué intenta resolver: tamaño, espacio, distribución o estado.
2. Qué regla actúa: compruébala en DevTools.
3. Qué duda queda: por qué Flexbox, Grid o el flujo normal podrían encajar mejor.

El autor decide si cambia el código o conserva la decisión y la justifica. No se valora la coincidencia de criterio estético entre ambas partes.

Tarea 9 · Flexbox Challenge

Construye estos tres componentes usando solo Flexbox, y aplícalos a tu proyecto donde encajen:

A · La barra de cabecera, con el nombre del sitio a la izquierda, la navegación a la derecha y todo alineado verticalmente.

B · La tarjeta horizontal del caso 2, que debe seguir funcionando cuando la descripción sea el doble de larga.

C · Una línea de metadatos —fecha, autor, categoría— separada por gap, que salte de línea con elegancia cuando no quepa.

Para cada uno responde por escrito:

Esa tabla es la tarea. El CSS lo puede escribir cualquiera copiando; la tabla solo la puede rellenar quien ha entendido los ejes.

Ver respuestas

1 · Qué elementos van en la misma línea, en qué dirección —ese es el eje principal— y qué hago con el espacio sobrante y con la alineación en el otro eje.

2 · No. Es lo normal: cada contenedor resuelve una dimensión, y una tarjeta suele necesitar dos o tres.

3 · Absorbe todo el espacio sobrante por ese lado, empujando ese elemento y los siguientes al final del eje.

---