CodeForge

Maquetación Web Dinámica / Layouts I: Flexbox completo

Flexbox: el eje principal y el eje cruzado

Teoría15 min20 XP

Hasta ahora tus elementos se apilan (block) o fluyen en línea (inline) — y punto. Flexbox es el sistema que te deja DECIDIR cómo se reparten, alinean y ordenan. Es la herramienta de layout más usada del CSS moderno, y todo — absolutamente todo — en ella depende de entender dos ejes.

Una línea que lo cambia todo

activar.css

Vocabulario preciso desde ya: el elemento con display: flex es el contenedor flex; sus hijos directos son los ítems. Las propiedades de Flexbox se reparten entre ambos — unas se escriben en el padre, otras en los hijos. Confundir dónde va cada una es el error clásico; lo evitaremos nombrando siempre a quién pertenece.

Los dos ejes: el modelo mental

Todo contenedor flex tiene dos ejes:

  • Eje principal (main axis): la dirección en que fluyen los ítems. Con flex-direction: row (default) es horizontal.
  • Eje cruzado (cross axis): el perpendicular. Con row, es vertical.
text
              eje cruzado
                  ▲
                  │
   ┌──────────────┼───────────────────┐
   │  ┌─────┐  ┌─────┐  ┌─────┐       │
   │  │  1  │  │  2  │  │  3  │       │ ──► eje principal
   │  └─────┘  └─────┘  └─────┘       │
   └──────────────────────────────────┘
        contenedor (display: flex)
Los dos ejes con flex-direction: row

flex-direction: girar la estantería

Los cuatro valores: row (default), row-reverse, column, column-reverse. Los reverse invierten el ORDEN VISUAL sin tocar el HTML — útil, pero con moderación: el lector de pantalla sigue el orden del HTML, y si lo visual contradice demasiado a lo semántico, desorientas.

Con flex-direction: column, ¿cuál es el eje principal?

Mini-reto

Toma el nav de tu periódico y vuelve flex su <ul> (los li son los ítems). De regalo inmediato: los bullets desaparecen del layout vertical y tu menú por fin es horizontal, como los de verdad. Prueba column y row-reverse para sentir el giro de los ejes.

Qué sigue

Contenedor activado y ejes claros. La próxima lección trae las dos propiedades que usarás literalmente todos los días: justify-content y align-items — con TODAS sus combinaciones visualizadas.