SHANUKI CSS · Flexbox — Parte 1: Conceptos básicos · Ciencias de la Computación

El contenedor flexible

Flexbox es un sistema para acomodar varias cajas dentro de un contenedor, en fila o en columna, repartiendo el espacio entre ellas de forma inteligente. Todo empieza activando el modo flexible en el contenedor padre.

💪 Este es el Recurso 1 de 2 sobre Flexbox: acá ves el contenedor flexible, cómo alinear su contenido y cómo envolverlo y espaciarlo. El Recurso 2 continúa con el control fino de cada ítem: crecer, encogerse, tamaño de partida, alineación individual y orden.

🔌 display: flex — el interruptor

Hasta ahora viste que display: block, inline e inline-block deciden cómo se comporta UNA caja. display: flex es distinto: convierte a la caja en un contenedor flexible, y a partir de ese momento sus hijos directos (los "ítems flex") se acomodan automáticamente en una fila, uno al lado del otro.

No hace falta tocar los hijos para nada: alcanza con esta única declaración en el padre para que todo el grupo empiece a comportarse distinto.

.contenedor {
  display: flex; /* los hijos pasan a ser ítems flex */
}

🔌 display: flex convierte al contenedor en flexible; sus hijos directos se acomodan en fila por defecto, sin que tengas que tocarlos.

↔️ flex-direction — fila o columna

flex-direction decide en qué sentido se acomodan los ítems dentro del contenedor. Por defecto es row (fila, de izquierda a derecha), pero puedes invertir el sentido o pasar a columna.

.contenedor {
  display: flex;
  flex-direction: column; /* apila en vez de poner en fila */
}

Valor	Qué hace
`row`	Fila, de izquierda a derecha (valor por defecto)
`row-reverse`	Fila, de derecha a izquierda
`column`	Columna, de arriba hacia abajo
`column-reverse`	Columna, de abajo hacia arriba

🧩 ¿Lo entendiste? · Ordená los valores de flex-direction

1 · Ordenar: de la fila normal a la columna invertida

Ordená los valores empezando por el que es fila normal (el que usa por defecto) y terminando por el que es columna invertida.

🧩 ¿Lo entendiste? · Cada valor con su descripción

2 · Arrastrar y soltar: cada valor con su descripción

Fila, de izquierda a derecha →

Columna, de arriba hacia abajo →

Fila, de derecha a izquierda →

✅ Repaso rápido · Opción múltiple

3 · Opción múltiple: el contenedor flexible

⚙️ Probá la dirección en vivo

Cambia el valor de flex-direction y mira cómo A, B y C cambian de sentido dentro del contenedor.

flex-direction

A

B

C

Con row los ítems van en fila, de izquierda a derecha. Cambia el valor y observa cómo cambia el orden y el sentido.

🎯 PRÁCTICA · Activa una fila flexible

En .barra, agrega display: flex; para que los tres botones pasen a estar en fila.
En la misma clase, agrega flex-direction: row-reverse; para invertir el orden visual sin tocar el HTML.
Ejecuta y confirma que los botones quedaron en fila, con Guardar a la izquierda.

/ HTML

<div class="barra">
  <button>Cancelar</button>
  <button>Vista previa</button>
  <button>Guardar</button>
</div>

Alinear en los ejes

Todo contenedor flexible tiene dos ejes: el eje principal (la dirección en la que van los ítems) y el eje transversal (el perpendicular). Cada eje tiene su propia propiedad de alineación.

🧭 Eje principal y eje transversal

Con flex-direction: row, el eje principal es horizontal (de izquierda a derecha) y el eje transversal es vertical. Si cambias a flex-direction: column, los ejes se invierten: el principal pasa a ser vertical.

💡 Regla clave: justify-content siempre alinea en el eje principal; align-items siempre alinea en el eje transversal. No dependen de si es horizontal o vertical, sino de cuál es "el principal" en ese momento.

🧭 Con row: principal = horizontal, transversal = vertical. Con column: principal = vertical, transversal = horizontal.

📐 justify-content — el eje principal

justify-content reparte el espacio sobrante entre los ítems a lo largo del eje principal. Es la propiedad que usas para separar, centrar o empujar contenido dentro de una barra.

.barra {
  display: flex;
  justify-content: space-between;
}

Valor	Qué hace
`flex-start`	Todos juntos al inicio (valor por defecto)
`center`	Todos juntos, centrados
`flex-end`	Todos juntos al final
`space-between`	Extremos pegados a los bordes, espacio parejo entre el resto
`space-around`	Espacio igual alrededor de cada ítem
`space-evenly`	Espacio exactamente igual entre todos, incluidos los bordes

🧩 ¿Lo entendiste? · Cada valor con su efecto

1 · Arrastrar y soltar: justify-content

Extremos en los bordes, espacio parejo entre el resto →

Todos juntos y centrados →

Todos juntos al final →

📏 align-items — el eje transversal

align-items alinea los ítems en el eje transversal — perpendicular a la dirección principal. Es la propiedad clásica para centrar algo verticalmente cuando el contenedor es una fila.

.barra {
  display: flex;
  align-items: center; /* centra verticalmente en una fila */
}

🧩 ¿Lo entendiste? · Completa align-items

2 · Completar: valores de align-items

/* Estira los ítems para que ocupen todo el alto (valor por defecto) */
.a { align-items: ; }

/* Centra los ítems verticalmente */
.b { align-items: ; }

/* Alinea los ítems contra la línea base del texto */
.c { align-items: ; }

✅ Repaso rápido · Opción múltiple

3 · Opción múltiple: alinear en los ejes

⚙️ Probá los dos ejes en vivo

Cambia justify-content y align-items por separado y mira cómo se reacomodan A, B y C dentro del contenedor.

justify-content align-items

A

B

C

🎯 PRÁCTICA · Centra una barra de herramientas

En .toolbar, agrega display: flex; para poner los íconos en fila.
En la misma clase, agrega justify-content: center; para juntarlos en el centro.
Agrega align-items: center; para que queden centrados también verticalmente.
Ejecuta y confirma que los tres íconos quedaron centrados en el medio de la barra.

/ HTML

<div class="toolbar">
  <span>🔍</span>
  <span>⭐</span>
  <span>⚙️</span>
</div>

Envolver y espaciar

Por defecto, un contenedor flexible fuerza a todos sus ítems a entrar en una sola línea, aunque se achiquen de más. Con flex-wrap puedes dejar que salten a una nueva línea, y con gap puedes espaciarlos sin usar margin.

🧶 flex-wrap — permitir varias líneas

Por defecto, flex-wrap vale nowrap: todos los ítems se aprietan en una sola línea, aunque el contenedor se quede chico. Con wrap, los que no entran saltan a una nueva línea, como el texto normal.

⚠️ Si tus tarjetas se ven cada vez más angostas en vez de saltar de línea en pantallas chicas, seguramente te falta flex-wrap: wrap; en el contenedor.

.contenedor {
  display: flex;
  flex-wrap: wrap; /* los que no entran, bajan de línea */
}

Valor	Qué hace
`nowrap`	Todo en una sola línea, aunque se achique (valor por defecto)
`wrap`	Los que no entran, bajan a una nueva línea
`wrap-reverse`	Igual que wrap, pero las líneas se apilan al revés

🧩 ¿Lo entendiste? · Completá flex-wrap

1 · Completar: flex-wrap

/* Todo en una sola línea, sin importar el ancho (por defecto) */
.a { flex-wrap: ; }

/* Los ítems que no entran, pasan a una nueva línea */
.b { flex-wrap: ; }

📏 gap — espacio parejo sin margin

gap agrega espacio parejo entre los ítems flex, sin tocar los bordes exteriores del contenedor. Es más prolijo que usar margin en cada hijo, porque no hay que descontar el margen del primero o del último.

.contenedor {
  display: flex;
  gap: 16px; /* espacio parejo entre ítems, sin afectar los bordes */
}

🧩 ¿Lo entendiste? · Los pasos para una galería que envuelve prolija

2 · Ordenar: armar una galería que envuelve prolija

Ordená los pasos para armar una fila de tarjetas que se acomode en varias líneas con espacio parejo.

✅ Repaso rápido · Opción múltiple

3 · Opción múltiple: envolver y espaciar

⚙️ Probá wrap y gap en vivo

Achica el contenedor (con el control) y activa o desactiva flex-wrap para ver cómo se comportan seis tarjetas. Ajusta el gap y mira el espacio entre ellas.

flex-wrap gap 10px

1

2

3

4

5

6

🎯 PRÁCTICA · Una galería de tarjetas que envuelve

En .galeria, agrega display: flex; para poner las tarjetas en fila.
En la misma clase, agrega flex-wrap: wrap; para que las que no entran bajen de línea.
Agrega gap: 14px; para separarlas de forma pareja.
Ejecuta, achica la ventana de vista previa si puedes, y confirma que las tarjetas envuelven en varias líneas.

/ HTML

<div class="galeria">
  <div class="tarjeta">1</div>
  <div class="tarjeta">2</div>
  <div class="tarjeta">3</div>
  <div class="tarjeta">4</div>
  <div class="tarjeta">5</div>
  <div class="tarjeta">6</div>
</div>

¡Arma una barra de navegación completa! 🚀

Llegó el momento de juntar todo lo que practicaste: el contenedor flexible, su dirección, la alineación en los dos ejes, y el espaciado con gap.

🎯 MISIÓN: La barra de navegación

Vas a maquetar una barra de navegación real, con el logo a un lado y los enlaces al otro. Tu barra debe tener:

Un contenedor flexible: display: flex; en .navbar
justify-content: space-between; para separar el logo de los enlaces
align-items: center; para que todo quede centrado verticalmente
Un gap entre los enlaces del menú

🛤️ Flujo de trabajo (método paso a paso)

1

🔌 Activa flexbox en .navbar.

2

📐 Separa logo y menú con justify-content.

3

📏 Centra todo verticalmente con align-items.

4

🧶 Pon el menú en fila y espácialo con gap.

5

📥 Ejecuta, ajusta y descarga tu trabajo.

💻 Tu simulador

El HTML ya está armado con todo lo que necesitas para la misión: tú pones el CSS. Tab inserta 2 espacios.

En .navbar, agrega display: flex; para que el logo y el menú pasen a estar en fila.
En la misma clase, agrega justify-content: space-between; para que el logo quede a la izquierda y el menú a la derecha.
Agrega align-items: center; para que todo quede alineado verticalmente.
En .menu, agrega display: flex; y gap: 20px; para que los tres enlaces queden en fila y espaciados.
Ejecuta, ajusta los detalles y descarga tu barra terminada.

/ HTML

<nav class="navbar">
  <span class="logo">ShanUKI</span>
  <div class="menu">
    <a href="#">Inicio</a>
    <a href="#">Cursos</a>
    <a href="#">Contacto</a>
  </div>
</nav>

📖 Glosario interactivo

Toca cualquier tarjeta para girarla: del otro lado está la definición, un ejemplo y el link a la sección donde se explica.