Resumen

  • El primer borrador público Flexible Box Layout del W3C, del 23 de julio de 2009, proponía hijos capaces de ocupar espacio sobrante o reducirse cuando faltaba sitio; usaba propiedades tempranas como box-flex.
  • La Recomendación Candidata del 18 de septiembre de 2012 presentó display: flex y factores de crecimiento, reducción y base. El texto candidato del 19 de noviembre de 2018 recalcó que cambiar el orden visual no cambia el orden del documento ni el recorrido del teclado.

La barra de herramientas tenía tres hijos y un piso cuyas paredes se movían con la ventana. El campo de búsqueda quería estirar las piernas. Un botón de etiqueta larga exigía espacio para todas sus letras. El tercero se daba por satisfecho con su anchura hasta que el piso empezó a encogerse. Con medidas fijas y apaños frágiles, cada tamaño de ventana abría otra negociación. Flexbox escribió las normas de convivencia en CSS. El comedor familiar seguía siendo pequeño, pero al menos alguien llevaba las cuentas.

El primer borrador público Flexible Box Layout del W3C, publicado el 23 de julio de 2009, pensaba en interfaces. Los hijos de una caja podían alinearse en horizontal o en vertical. Un elemento flexible recibiría parte del espacio libre y podría contraerse si faltaba. El texto indicaba que el modelo se apoyaba en las cajas usadas por interfaces XUL. Su vocabulario era el de aquel momento: display: box, box-orient, box-flex y box-lines. Las palabras muestran el nacimiento de la idea; no son una receta para copiar sin cambios en una hoja de estilos actual.

box-flex expresaba flexibilidad relativa. Un hijo con factor dos podía reclamar una parte mayor que otro con factor uno. Las condiciones, sin embargo, ponían límites a la pelea. Un máximo de anchura podía detener al primero y entregar el espacio restante al segundo. También intervenían el tamaño propio del contenido y los mínimos. La caja fijaba el presupuesto y cada hijo participaba con una capacidad distinta. Para una interfaz que debía sobrevivir a ventanas cambiantes, era mejor que clavar tres muebles al suelo.

La Recomendación Candidata del W3C del 18 de septiembre de 2012 reorganizó el trato. display: flex e inline-flex definían el contenedor. Los elementos seguían un eje principal, con otro eje que cruzaba el primero. La abreviatura flex reunía base, crecimiento y reducción: cuánto espacio usa el elemento al empezar, qué parte del sobrante puede tomar y cuánto cede cuando la habitación se estrecha. Un campo de búsqueda podía absorber el hueco mientras un botón conservaba su tamaño útil. Al cerrar la ventana, el navegador recalculaba el reparto.

El reparto no consistía en que cada factor dictara directamente una anchura final. El espacio positivo se asignaba según factores de crecimiento; la falta de espacio activaba factores de reducción, bases y límites. Un factor dos no convierte mágicamente el botón en una pieza siempre dos veces más ancha. Lo que importa es cómo responde cada uno al cambio. El autor declaraba las reglas y el navegador resolvía la aritmética cada vez que la ventana cambiaba de tamaño.

La dirección también formaba parte del contrato. Los hijos podían recorrer una fila en uno u otro sentido o apilarse en una columna. Con permiso del contenedor, podían saltar a otra línea; las reglas de alineación organizaban lo que quedaba alrededor. Varias cajas anidadas construían interfaces más complejas. Cada una, no obstante, resolvía primero su propio eje principal. Esa negociación local es el centro de Flexbox, distinta de una cuadrícula CSS que distribuye lugares sobre un plan de filas y columnas.

Luego apareció el truco del asiento reservado. La propiedad order del texto de 2012 permitía colocar visualmente un hijo antes que otro. La especificación explicaba el precio: el orden de voz y el recorrido secuencial predeterminado seguían el orden de la fuente. Un botón que parece el primero puede recibir el foco después de otros. Una persona con ratón y otra que usa el teclado atraviesan entonces la misma interfaz en secuencias diferentes. Cambiar la foto de familia no reescribe la lista de invitados.

La Recomendación Candidata del W3C del 19 de noviembre de 2018 insistió en esa separación. order y las direcciones inversas sirven para ordenar la presentación, no para arreglar un documento cuyo orden original era equivocado. El texto también precisó otra sutileza del presupuesto: factores de crecimiento menores que uno pueden dejar parte del espacio positivo sin asignar. La palabra «flexible» no obliga a consumir hasta el último píxel. Si sobra sitio al final, quizá el navegador ha obedecido a la perfección.

Cuando una etiqueta cambia de idioma, sus letras pueden ocupar más espacio. Una anchura mínima puede impedir que un control ceda tanto como esperaba el diseñador. Otra línea puede abrir una negociación nueva. Flexbox responde a esas condiciones, pero no adivina qué botón importa más al lector. El equipo debe decidir cuáles son las prioridades y en qué orden tiene sentido encontrar los controles. Después puede elegir factores, límites y alineación que sostengan esa decisión.

Flexbox convirtió la caja en administradora de un presupuesto variable. Los hijos crecen o se estrechan con reglas explícitas y el navegador vuelve a hacer las cuentas cuando cambia el espacio. La barra puede discutir sus centímetros en silencio. El lector merece una sola ruta clara, tanto para los ojos como para el teclado.