Résumé

  • Le premier projet public Flexible Box Layout du W3C, daté du 23 juillet 2009, prévoyait des enfants capables de grandir dans l’espace libre ou de se contracter quand leur boîte manquait de place; son vocabulaire comprenait box-flex.
  • Le texte candidat du 18 septembre 2012 a posé display: flex et les facteurs de croissance, de réduction et de base. Celui du 19 novembre 2018 rappelait que déplacer visuellement un élément ne changeait ni sa place dans le document ni le parcours du clavier.

La barre d’outils avait trois enfants et un logement dont les murs bougeaient avec la fenêtre. Le champ de recherche voulait respirer. Un bouton à l’étiquette longue refusait de perdre une syllabe. Le troisième trouvait sa largeur fort convenable, jusqu’au moment où la place manquait. À coups de largeurs fixes et d’arrangements fragiles, l’éditeur devait négocier chaque rétrécissement. Flexbox a inscrit la négociation dans le modèle de mise en page. La famille n’a pas cessé de se disputer; au moins, elle possède désormais un règlement.

Le premier projet public Flexible Box Layout du W3C, publié le 23 juillet 2009, visait les interfaces. Ses boîtes plaçaient leurs enfants horizontalement ou verticalement. Un enfant souple pouvait recevoir de la place libre ou céder lorsque le toit se resserrait. Le document indiquait que ce modèle s’inspirait des interfaces XUL. Son langage CSS appartenait à ce moment de l’histoire : display: box, box-orient, box-flex et box-lines figuraient au programme. Un vieux projet illustre une idée; il ne fournit pas une recette à coller telle quelle dans une feuille de style actuelle.

Dans ce texte, box-flex exprimait une souplesse relative. Avec un facteur deux, un enfant pouvait réclamer une part plus grande qu’avec un facteur un. Mais un plafond de taille pouvait arrêter sa croissance et rendre le reste à son voisin. Les dimensions propres du contenu, les minima et les maxima entraient aussi dans la discussion. La boîte fixait le cadre; les enfants partageaient ce qui restait, sous contraintes. Pour une barre dont la largeur varie, c’était plus utile qu’un rang de meubles taillés une fois pour toutes.

La recommandation candidate du W3C du 18 septembre 2012 présentait une version réorganisée. display: flex et inline-flex définissaient le conteneur. Les éléments occupaient un axe principal, avec un axe transversal pour l’autre dimension. La propriété raccourcie flex assemblait la base d’un élément, son facteur de croissance et son facteur de réduction. En pratique, le champ de recherche pouvait absorber le surplus tandis qu’un bouton gardait un minimum utile. Une fenêtre plus étroite lançait le calcul inverse au lieu de faire déborder mécaniquement la rangée.

Le mot « partager » a ici une définition. L’espace positif suit les facteurs de croissance; le manque de place fait intervenir la réduction et la taille des éléments. Un facteur deux ne promet pas que la largeur finale sera exactement le double de celle du voisin : les tailles de départ et les limites comptent. L’important est de savoir qui absorbe une variation du conteneur. Flexbox permettait à l’auteur de l’écrire dans CSS, et au navigateur de refaire le calcul lorsque la fenêtre changeait.

La direction donne sa forme à la négociation. Une rangée peut avancer dans un sens ou l’autre, ou devenir une colonne. Les éléments peuvent passer à une autre ligne si l’auteur autorise le retour, puis être alignés sur les deux axes. On peut imbriquer une boîte horizontale dans une boîte verticale pour composer une interface plus riche. Chaque boîte, cependant, règle d’abord son propre axe principal. Cette histoire porte sur un partage local de l’espace, distinct du plan en lignes et colonnes d’une grille CSS.

Les enfants ont ensuite découvert qu’ils pouvaient changer de place à table. Le texte de 2012 décrivait order, qui modifie leur disposition visuelle. Le document précisait le prix du tour : l’ordre de la parole et celui de la navigation séquentielle restent liés à la source. Le bouton vu en premier peut être atteint plus tard au clavier. Pour un lecteur à la souris, le plan paraît clair; pour un autre, le parcours raconte une autre histoire. Changer la présentation sans changer le document crée deux cartes du même couloir.

La recommandation candidate du W3C du 19 novembre 2018 développait encore ce modèle et insistait sur ce point. order et les directions inversées règlent l’affichage; ils ne réparent pas un ordre source mal choisi. Le texte détaillait aussi une nuance de la place libre : de petits facteurs de croissance inférieurs à un peuvent laisser de l’espace inutilisé. « Souple » n’oblige pas chaque enfant à avaler jusqu’au dernier pixel. Si une bande vide demeure au bout de la rangée, le navigateur suit peut-être exactement les règles reçues.

Ces règles deviennent sensibles dès que le contenu change. Une étiquette plus longue dans une autre langue modifie la place de départ. Un bouton doté d’une largeur minimale ne cède pas autant que son voisin. Un retour à la ligne crée une nouvelle négociation. La souplesse de la boîte ne devine pas les priorités éditoriales; elle applique des facteurs, des limites et des directions. Le site doit encore décider quel contrôle mérite de rester visible et dans quel ordre les lecteurs doivent le rencontrer.

Flexbox a transformé le parent en arbitre d’un budget variable. Les enfants grandissent ou se serrent selon leurs droits déclarés, et le navigateur refait les comptes à chaque nouvelle largeur. À l’auteur de placer d’abord les contrôles dans un ordre sensé, puis de régler l’espace. Les boutons peuvent négocier entre eux; le lecteur, lui, ne devrait pas devoir négocier avec deux itinéraires contradictoires.