Übung 12: Drei Schaltflächen nebeneinander mit gleichem Abstand – ohne Floats

Hinweise

Lösung

.leiste { display: flex; justify-content: space-between; }

Was space-between verteilt

Der Wert setzt das erste Item an den Anfang der Hauptachse, das letzte an ihr Ende und verteilt den übrigen Platz gleichmäßig auf die Zwischenräume. Außen bleibt kein Rand – das unterscheidet ihn von den beiden verwandten Werten, die auch vor dem ersten und hinter dem letzten Item Platz lassen, einmal halb so viel wie zwischen den Items und einmal genauso viel.

Verteilt wird nur, was übrig ist. Füllen die Items die Zeile bereits aus, sehen alle drei Werte gleich aus, und bei einem einzigen Item hat keiner von ihnen eine Wirkung. Das ist der Grund, warum eine Leiste, die im Entwurf richtig aussieht, mit längeren Beschriftungen plötzlich eng wird.

Zu unterscheiden ist die Verteilung von der Ausrichtung auf der Querachse. Die eine ordnet entlang der Achse, in der die Items liegen; die andere bestimmt, wie hoch sie in der Zeile stehen. Ihr Ausgangswert streckt alle Items auf dieselbe Höhe – deshalb sind die drei Schaltflächen gleich hoch, ohne dass es jemand angegeben hätte.

Warum ohne float

Mit umflossenen Elementen ließ sich dieselbe Reihe bauen, aber nur näherungsweise. Die erste Schaltfläche wurde nach links, die letzte nach rechts umflossen, die mittlere musste zentriert werden – und der Abstand ergab sich aus Prozentwerten, die bei jeder Änderung neu zu rechnen waren. Dazu kam die Räumung am Ende der Reihe, ohne die der Container zusammenfiel.

Der eigentliche Bruch liegt aber woanders: Bei Floats bestimmt die Reihenfolge im Quelltext, was links steht, und die Höhen sind unabhängig voneinander. Eine Reihe aus unterschiedlich hohen Kästen bleibt ungleich hoch, und der Container weiß von keinem etwas. Flexbox macht die Verteilung zur Eigenschaft des Containers, und damit werden beide Probleme gegenstandslos.

Geblieben ist der Float für seine ursprüngliche Aufgabe – ein Bild, um das Text herumläuft. Für Anordnungen nebeneinander ist er seit Flexbox nicht mehr die richtige Wahl, und in neuem Code ist er dort ein Hinweis auf abgeschriebenen Altcode.

Was bei zu wenig Platz passiert

Ein Flex-Container bricht von sich aus nicht um: Der Ausgangswert hält alle Items in einer Zeile, und sie schrumpfen, bis der Platz reicht. Schrumpfen können sie allerdings nur bis zu ihrer automatischen Mindestgröße – bei Text bis zum längsten unumbrechbaren Wort. Danach läuft die Reihe über den Rand hinaus.

Zwei Angaben lösen das. Ein Umbruch erlaubt es den Items, in eine zweite Zeile zu rutschen; eine Mindestbreite von null am Item hebt die automatische Untergrenze auf, sodass echtes Schrumpfen möglich wird – und erst dann greift auch ein abgeschnittener Text mit Auslassungspunkten wie erwartet.

Für den Zwischenraum ist übrigens gap die bessere Wahl als Außenabstände an den Items: Er wird einmal am Container notiert, erzeugt keinen Rand außen und fällt mit nichts zusammen. In dieser Aufgabe braucht es ihn nicht, weil die Verteilung den ganzen Platz übernimmt – sobald aber ein Mindestabstand garantiert sein soll, gehört er dazu.

Die Schaltflächen selbst

Eine Reihe aus Schaltflächen sieht am Bildschirm schnell richtig aus und ist mit dem Finger trotzdem schwer zu treffen. Die Richtlinien zur Zugänglichkeit nennen eine Mindestgröße für Bedienelemente; erreicht wird sie in der Regel über den Innenabstand und nicht über eine feste Höhe, damit die Fläche mit der Schrift wächst.

Wichtig ist dabei, dass der Innenabstand am anklickbaren Element sitzt und nicht am Container darum. Ein Verweis mit Polsterung ist auf der ganzen gepolsterten Fläche anklickbar; liegt die Polsterung am Elternelement, bleibt nur der Text selbst als Ziel. Das ist einer der praktischen Unterschiede zwischen Innen- und Außenabstand, den der Vergleich margin vs padding im Einzelnen behandelt.

Zwischen zwei benachbarten Schaltflächen sollte außerdem etwas Abstand bleiben, auch wenn die Verteilung ihn ohnehin erzeugt: Bei sehr langen Beschriftungen schrumpft er auf null, und zwei berührende Flächen führen zu Fehlgriffen. Ein Mindestabstand über gap kostet nichts und schließt den Fall aus.

Gemessen werden in dieser Aufgabe die Positionen der drei Schaltflächen: die erste am linken Rand, die letzte am rechten, die mittlere mit gleichen Abständen dazwischen. Damit besteht auch eine Lösung über gleichmäßig verteilte Anteile an den Items – die Verteilung am Container ist nur die kürzere und diejenige, die bei anderer Zahl von Schaltflächen unverändert weiterfunktioniert.

Fragen zur Übung