Controlar los ítems: grow, shrink, align-self, order

Hasta ahora controlaste el contenedor. Las propiedades de esta lección van en los ítems individuales — cada uno puede tener su propio comportamiento de crecimiento, contracción, alineación y posición.

`flex-grow` — factor de crecimiento

flex-grow define en qué proporción un ítem crece para ocupar el espacio libre del contenedor.

flex-grow: 0 (por defecto): el ítem no crece. Ocupa solo su tamaño natural.
flex-grow: 1: el ítem reclama todo el espacio libre disponible.
Si varios ítems tienen flex-grow: 1, el espacio libre se reparte en partes iguales.

/* Campo de búsqueda que ocupa todo el espacio disponible */
.barra { display: flex; gap: 8px; }
.busqueda { flex-grow: 1; } /* crece; el botón conserva su tamaño natural */

Importante: flex-grow reparte el espacio sobrante — no fija un ancho absoluto. Si el contenedor no tiene espacio libre, flex-grow no hace nada visible.

`flex-shrink` — factor de contracción

flex-shrink define en qué proporción un ítem se encoge cuando los ítems juntos superan el tamaño del contenedor.

flex-shrink: 1 (por defecto): el ítem puede encogerse proporcionalmente.
flex-shrink: 0: el ítem NO se encoge — conserva su tamaño siempre.

/* Logo que nunca pierde su tamaño */
.logo {
  flex-shrink: 0;
  width: 120px; /* este ancho se respeta aunque el contenedor sea chico */
}

`flex-basis` y el shorthand `flex`

flex-basis establece el tamaño base del ítem en el eje principal, antes de que se apliquen grow/shrink.

.item { flex-basis: 200px; } /* empieza con 200px antes de grow/shrink */

El shorthand flex combina los tres: flex: flex-grow flex-shrink flex-basis.

.item { flex: 1; }      /* equivale a: flex-grow:1; flex-shrink:1; flex-basis:0% */
.item { flex: 0 0 200px; } /* ítem rígido de 200px */
.item { flex: none; }   /* flex-grow:0; flex-shrink:0; flex-basis:auto — ítem completamente rígido */

flex: 1 es el patrón más común para dividir el contenedor en partes iguales.

Límite del validador: el shorthand flex no se valida como propiedad — el computed puede venir vacío. Se validan las sub-propiedades flex-grow y flex-shrink por separado. Tampoco se valida flex-basis cuando viene de flex: 1 (el computed es 0%, inestable); solo si se explicita en px.

`align-self` — override individual del eje cruzado

align-self permite que un ítem individual ignore el align-items del contenedor y se alinee diferente.

.contenedor {
  display: flex;
  align-items: flex-start; /* todos los ítems al inicio del eje cruzado */
}

.especial {
  align-self: flex-end; /* solo este ítem al final del eje cruzado */
}

Acepta los mismos valores que align-items: stretch, flex-start, flex-end, center, baseline, auto (hereda el valor del contenedor).

`order` — reordenar visualmente

order controla la posición visual de un ítem dentro del contenedor, sin mover su posición en el HTML.

.logo   { order: 1; } /* primero visualmente */
.busqueda { order: 2; }
.acciones { order: 3; } /* aunque en el HTML aparezca primero */

El valor por defecto es 0.
Los ítems se muestran de menor a mayor order.
Los valores negativos funcionan (order: -1 irá antes que todos los que tienen order: 0).

Nota de accesibilidad: order cambia el orden visual pero no el orden de tabulación ni el orden de lectura del DOM. Los lectores de pantalla (VoiceOver, NVDA, JAWS) y los usuarios de teclado siguen el orden del HTML, no el visual. Si el reordenamiento afecta el flujo lógico de lectura, reorganizá el HTML en vez de usar order.

La regla final: Flexbox para 1D, Grid para 2D

Flexbox resuelve layouts en una dimensión: una fila O una columna. Para layouts con filas Y columnas al mismo tiempo, existe CSS Grid (CAT-26 — el próximo y último módulo del Bloque III).

En proyectos reales se usan juntos: Grid para el layout de página, Flexbox para los componentes internos.

Tu turno: aplicá las propiedades de ítems a .logo, .busqueda y .acciones. Observá en el preview cómo el HTML tiene .acciones primero pero order: 3 la lleva al final visual. Comprobá con el botón “Comprobar”.