CodeForge

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

flex-grow, flex-shrink y flex-basis: la abreviatura descifrada

Teoría20 min20 XP

Hasta ahora los ítems miden lo que mide su contenido. Pero los layouts reales necesitan otra cosa: "la búsqueda ocupa todo el espacio sobrante", "el sidebar mide 250px pase lo que pase". Eso lo deciden tres propiedades DE LOS ÍTEMS — y la abreviatura flex que las empaqueta y que hoy dejarás de copiar sin entender.

flex-grow: repartir lo que sobra

Si el contenedor mide 600px y los ítems suman 300px, sobran 300px. flex-grow (default 0: nadie crece) dice cuántas PARTES de ese sobrante toma cada ítem:

Ojo al matiz: grow reparte el SOBRANTE, no el total. Un ítem con grow 2 no mide "el doble" que uno con grow 1 — toma el doble de espacio EXTRA. (Para proporciones exactas del total existe un truco que viene más abajo.)

flex-shrink y flex-basis

  • flex-shrink (default 1): cuando NO cabe todo, cuánto cede cada ítem. flex-shrink: 0 = "yo no me encojo" — vital para logos e iconos que el espacio apretado deformaría.
  • flex-basis (default auto): el tamaño de PARTIDA del ítem en el eje principal, antes de crecer o encogerse. Con auto, parte de su contenido (o su width); con un valor, parte de ahí.

La abreviatura flex: los tres en uno

abreviatura.css

El patrón del mundo real que une todo — el header con búsqueda elástica:

Logo y perfil con flex: none (intocables), búsqueda con flex: 1 (toma todo lo demás). Achica la ventana: solo la búsqueda cede. Ese trío de decisiones es media web.

Tres tarjetas deben medir EXACTAMENTE lo mismo aunque tengan textos de largos distintos. ¿Qué les pones?

Mini-reto

Monta el header con búsqueda elástica en tu periódico: nombre fijo, barra de búsqueda con flex: 1, un enlace fijo. Estira y encoge la ventana hasta que puedas EXPLICAR quién cede y por qué.

Qué sigue

Controlas tamaño y reparto en una línea. ¿Y cuando los ítems son demasiados para una sola? flex-wrap, align-content y gap — el salto a las multilíneas.