Zusammenfassung

  • Der erste öffentliche W3C-Arbeitsentwurf zu Flexible Box Layout vom 23. Juli 2009 ließ Kinder einer Box bei Platzüberschuss wachsen und bei Mangel schrumpfen. Seine frühe Sprache enthielt box-flex.
  • Die Kandidatenempfehlung vom 18. September 2012 verwendete display: flex sowie Faktoren für Wachstum, Schrumpfung und Ausgangsgröße. Der Kandidatentext vom 19. November 2018 warnte davor, sichtbare Umordnung mit Dokument-, Sprach- oder Tastaturreihenfolge zu verwechseln.

Die Werkzeugleiste hatte drei Kinder und eine Wohnung mit beweglichen Wänden. Das Suchfeld wollte die Beine ausstrecken. Ein langer Knopf bestand auf Platz für jedes Zeichen. Der dritte war mit seiner Breite zufrieden, bis die Wände näher kamen. Feste Maße und kleine Tricks hielten nur bis zur nächsten Fenstergröße. Flexbox schrieb die Hausordnung in CSS. Die Familienversammlung wurde dadurch nicht stiller, aber endlich konnte jemand die Quadratmeter berechnen.

Der erste öffentliche W3C-Arbeitsentwurf zu Flexible Box Layout vom 23. Juli 2009 beschrieb ein Modell für Benutzungsoberflächen. Kinder einer Box konnten waagerecht oder senkrecht stehen, übrigen Platz erhalten und bei Mangel kleiner werden. Der Text nannte das Boxmodell der XUL-Oberflächen als Ausgangspunkt. Die damalige CSS-Sprache lautete display: box, box-orient, box-flex und box-lines. Das sind historische Namen; ein altes Beispiel ist kein fertig übersetzter Bauplan für ein heutiges Stylesheet.

box-flex beschrieb relative Beweglichkeit. Ein Kind mit dem Faktor zwei konnte mehr freien Raum beanspruchen als eines mit dem Faktor eins. Doch eine maximale Breite setzte seinem Wachstum ein Ende und gab den Rest an die anderen weiter. Eigene Inhaltsgrößen und Mindestmaße mischten ebenfalls mit. Der Elternkasten stellte das Zimmer, die Kinder erhielten Anteile unter Bedingungen. Eine Oberfläche mit wechselnder Breite brauchte genau diese Art Abmachung, statt drei Möbelstücke festzunageln.

Die W3C-Kandidatenempfehlung vom 18. September 2012 ordnete den Vertrag neu. display: flex und inline-flex erzeugten einen Container. Seine Elemente folgten einer Hauptachse; quer dazu lag die zweite Achse. Die Kurzform flex verband Ausgangsbasis, Wachstumsfaktor und Schrumpffaktor. Wie viel Platz nimmt das Element zuerst ein? Welchen Anteil der Reserve bekommt es? Wie stark gibt es unter Druck nach? Das Suchfeld konnte übrige Breite erhalten, während ein Menüknopf genügend Raum zum Bedienen behielt.

Ein Wachstumsfaktor zwei macht die fertige Breite keineswegs immer doppelt so groß wie die des Nachbarn. Beide Elemente beginnen mit eigenen Basen und treffen womöglich auf Grenzen. Positiver Freiraum wird nach Wachstumsfaktoren verteilt; bei negativem Freiraum spielen Schrumpffaktoren und Größen mit. Die Frage lautet, wer eine Veränderung des Containers auffängt. Der Autor erklärt das Verhältnis in CSS, und der Browser rechnet bei jeder neuen Fensterbreite wieder nach.

Der Raum hat auch eine Richtung. Eine Reihe kann in die Gegenrichtung laufen oder zur Spalte werden. Bei erlaubtem Umbruch ziehen überzählige Elemente in eine neue Zeile. Ausrichtung ordnet sie auf beiden Achsen an. Waagerechte und senkrechte Container können ineinander stecken und so größere Oberflächen bilden. Jeder Flexcontainer verhandelt aber zunächst entlang seiner eigenen Hauptachse. Das ist eine andere Aufgabe als der Zeilen- und Spaltenplan von CSS Grid, den ein früherer Artikel behandelt.

Dann entdeckten die Kinder die freie Sitzordnung. Die Eigenschaft order aus dem Text von 2012 ändert, wie Flexelemente auf dem Bildschirm erscheinen. Der Text hielt die andere Route fest: Sprachwiedergabe und normale schrittweise Navigation folgen weiter der Reihenfolge im Quelldokument. Ein Knopf kann vorne zu sehen sein und erst später den Tastaturfokus bekommen. Maus und Tastatur führen damit durch dieselbe Leiste auf verschiedenen Wegen. Das Familienfoto wurde umgestellt, das Namensverzeichnis blieb liegen.

Die W3C-Kandidatenempfehlung vom 19. November 2018 betonte diese Grenze nochmals. order und umgekehrte Laufrichtungen gestalten die Ansicht; sie beheben keine falsch aufgebaute Quellreihenfolge. Der Text präzisierte auch die Aufteilung der Reserve. Wachstumswerte unter eins können einen Teil des positiven Raums frei lassen. „Flexibel“ heißt nicht zwangsläufig, dass jedes letzte Pixel verzehrt wird. Ein leerer Streifen am Ende kann die exakte Erfüllung der Regel sein.

Eine übersetzte Beschriftung wird länger, und das Element beginnt mit einem anderen Platzbedarf. Eine Mindestbreite hindert einen Knopf daran, weiter nachzugeben. Der Umbruch eröffnet eine neue Runde der Verteilung. Flexbox reagiert auf solche Veränderungen, entscheidet aber nicht, welcher Knopf für den Leser wichtig ist. Das Team muss die Prioritäten und den sinnvollen Bedienweg wählen. Danach erst kommen Basiswerte, Faktoren und Ausrichtung.

Flexbox machte den Elternkasten zum Verwalter eines schwankenden Raumetats. Kinder wachsen oder rücken zusammen nach erklärten Regeln, und der Browser rechnet bei jeder Änderung neu. Der Autor muss die Bedienelemente zuerst in eine sinnvolle Dokumentfolge setzen. Die Knöpfe dürfen ihren Platz aushandeln. Den Lesern sollten sie keinen Streit zwischen sichtbarem und tastbarem Lageplan hinterlassen.