Version:
Flex Layout
Das Flex Layout reiht Inhalte horizontal aneinander und bricht bei zu wenig Platz in die nächste Zeile um.
Overview
Produktname und technischer Name unterscheiden sich
Der Produktname der Komponente ist Flex Layout. Der technische Name im Theme und in der API lautet weiterhin floating-layout, der frühere Produktname Floating Layout wird für die Komponente nicht mehr verwendet.
In Web Components wird das Layout deshalb über theme="floating-layout" gesetzt, das Vue-Paket heißt @mate-vue/floating-layout und die Flow-Klasse heißt FloatingLayout. Der Name Flex Layout leitet sich vom Maven-Artefakt de.mate_ds:mate-flex-layout-flow ab.
Intro
Das Flex Layout reiht die Inhalte horizontal hintereinander ein. Passen die Inhalte nicht mehr in eine Zeile, dann brechen diese in die nächste Zeile um. Es gibt kein festes Spaltenraster: Anzahl und Breite der Inhalte bestimmen, wie viele Elemente in einer Zeile Platz finden.
Das Layout eignet sich besonders dazu, Höhe im Layout zu sparen. Daher wird es zum Beispiel auch in der Kopfzeile der Objektseite genutzt.
broken_image
Kopfzeile einer Objektseite: drei Gruppen von Name-Wert-Facetten stehen als Flex Layout nebeneinander in einer Zeile
Verwendung
| 👍 Do | 👎 Don't |
|---|---|
| ...wenn gleichrangige Inhalte horizontal aneinandergereiht werden und bei zu wenig Platz selbstständig in die nächste Zeile umbrechen sollen. ...wenn Anzahl und Breite der Inhalte variabel sind und kein festes Spaltenraster gelten soll. ...wenn Höhe im Layout gespart werden soll, zum Beispiel in der Kopfzeile der Objektseite. | ...wenn die Inhalte in einer festen Zeile bleiben und gezielt ausgerichtet werden sollen. Verwende hierfür das Horizontal Layout , es bietet die vollständige Ausrichtungs-API für horizontale und vertikale Anordnung. ...wenn Inhaltsbereiche einem definierten Spaltenraster folgen sollen, zum Beispiel 4-4-4 oder 6-6. Verwende hierfür das Block Layout . ...wenn Formularfelder innerhalb einer Feldergruppe angeordnet werden. Verwende hierfür das Form Layout und die Form . ...wenn es um die Grundstruktur der ganzen Anwendung geht, also Titelleiste, Navigation Panel und Inhaltsbereich. Verwende hierfür das App Layout . |
Guidelines
Aufbau
Das Flex Layout besteht aus einem Container und seinen Kind-Elementen. Der Container ordnet seine Kind-Elemente in Leserichtung nebeneinander an und erlaubt den Umbruch in weitere Zeilen. Technisch ist er ein Flex-Container mit Umbruch, im Theme gesetzt über display: flex und flex-wrap: wrap.
broken_image
Aufbau: ein Container mit drei nebeneinander liegenden Kind-Elementen, hier die drei Facettengruppen in der Kopfzeile einer Objektseite
Die Breite bestimmen die Kind-Elemente grundsätzlich selbst, das Layout verteilt übrig gebliebenen Platz nicht auf sie. Passt ein Element nicht mehr in die laufende Zeile, rückt es als Ganzes in die nächste Zeile; es wird also nicht vorher zusammengestaucht. Geschrumpft wird erst, wenn ein Element auch allein in seiner Zeile noch breiter ist als der Container: Dann greift die Voreinstellung flex-shrink: 1 und das Element wird bis zu seiner inhaltsbedingten Mindestbreite verkleinert. Soll auch das nicht passieren, bekommt das Kind-Element flex-shrink: 0 oder ein passendes min-width. Eine feste Breite allein genügt dafür nicht, denn Flex-Elemente schrumpfen auch mit gesetzter width.
In der Höhe gilt die Flex-Voreinstellung align-items: stretch. Kind-Elemente ohne eigene Höhe werden dadurch auf die Höhe des höchsten Elements ihrer Zeile gestreckt. Kind-Elemente mit eigener Höhe behalten diese.
Die Anzahl der Kind-Elemente ist nicht begrenzt. Es gibt keine feste Spaltenzahl und keine Container-Größen S, M und L wie beim Block Layout.
Verhalten bei Umbruch
Reicht die verfügbare Breite nicht aus, rückt das nächste Element in eine neue Zeile. Der Umbruch entsteht allein aus der Breite des umgebenden Containers und der Breite der Inhalte, es ist keine zusätzliche Konfiguration nötig.
broken_image
Flex Layout mit Zeilenumbruch
Da die Zeilenaufteilung vom verfügbaren Platz abhängt, darf keine inhaltliche Bedeutung an eine bestimmte Zeile geknüpft werden. Inhalte, die zwingend nebeneinander stehen müssen, gehören in ein eigenes Layout oder in ein Unterlayout.
Spacing
Mit Spacing werden Abstände zwischen den einzelnen Elementen innerhalb des Layouts erzeugt. Der Abstand gilt sowohl zwischen den Elementen einer Zeile als auch zwischen den Zeilen und beträgt 16 Pixel auf dem Desktop und 20 Pixel auf mobilen Geräten (Token --mate-spacing-margin).
Spacing ist nicht automatisch aktiv, sondern wird über den zusätzlichen Theme-Namen spacing gesetzt.
Hinweis für Designer
Designer nutzen dazu in Figma am einfachsten in den Frames Auto Layout mit folgenden Einstellungen:
broken_image
Der vertikale Abstand ist weiterhin auf 16 Pixel eingestellt.
Die Figma-Einstellung im Bild nennt einen horizontalen Abstand von 48 Pixel. Das ist eine Angabe des Designrasters. Der implementierte Theme-Name spacing setzt dagegen in beide Richtungen gap: var(--mate-spacing-margin), also 16 Pixel auf dem Desktop und 20 Pixel auf mobilen Geräten. Maßgeblich für die Abstände innerhalb des Flex Layouts ist dieser Wert; die 48 Pixel im Bild gehören zum Designraster der umgebenden Seite und sind nicht der Abstand zwischen den Elementen dieses Layouts.
Padding
Padding ist der Abstand zwischen dem äußeren Rand und dem Inhalt des Layouts. Es hilft dabei, den Inhalt des Layouts von seiner Umgebung abzugrenzen, und wird über den zusätzlichen Theme-Namen padding gesetzt. Das Padding beträgt 16 Pixel auf dem Desktop und 20 Pixel auf mobilen Geräten (Token --mate-spacing-padding).
Verschachtelte Container mit Padding führen zu doppelten Abständen und damit zu einem uneinheitlichen Bild. Siehe hierzu Grid & Spacing .
Einen Theme-Namen für Margin gibt es beim Flex Layout dagegen nicht, anders als beim Horizontal Layout . Der Abstand zu benachbarten Layouts entsteht deshalb nicht am Flex Layout selbst, sondern über den umgebenden Container, der die Layouts anordnet.
Spacing und Padding sind nicht auf das Flex Layout beschränkt: Dieselben Einstellungen erzeugen mit denselben Werten auch im Form Layout , im Horizontal Layout und im Vertical Layout dieselben Abstände.
Barrierefreiheit
Das Flex Layout ist kein semantischer Seitenbereich. Für eine zugängliche Nutzung sind deshalb vor allem die logische Reihenfolge der enthaltenen Elemente und die semantische Struktur des umgebenden Bereichs entscheidend. Für Hauptbereiche der Anwendung sollen ergänzend HTML-Landmarks wie header, nav oder main verwendet werden, weil Layout-Komponenten allein diese Orientierung für Screenreader nicht bereitstellen.
Umbruch und Reflow
Der Zeilenumbruch ist der wichtigste Beitrag dieses Layouts zur Barrierefreiheit. WCAG 1.4.10 (Reflow) verlangt, dass Inhalte bei 400 Prozent Zoom beziehungsweise bei einer Breite von 320 CSS-Pixeln ohne horizontales Scrollen nutzbar bleiben. Das Flex Layout erfüllt das nur, wenn seine Kind-Elemente schrumpfen oder umbrechen können. Feste Breiten, große Werte für min-width, white-space: nowrap oder sehr lange, nicht trennbare Zeichenketten verhindern den Umbruch und erzeugen genau das horizontale Scrollen, das vermieden werden soll. Prüfe das Layout deshalb immer auch bei starkem Zoom und in schmalen Containern.
Reihenfolge
Die Vorlese- und Fokusreihenfolge entspricht der Reihenfolge der Elemente im Markup. Das Theme setzt nur display: flex und flex-wrap: wrap, es ordnet die Kind-Elemente also nicht um: Auch nach einem Umbruch entspricht die visuelle Abfolge weiterhin der Reihenfolge im Markup, es wandern lediglich Elemente in die nächste Zeile. Das Markup muss deshalb bereits in der fachlich sinnvollen Reihenfolge aufgebaut sein.
Wird das Layout in der Anwendung zusätzlich mit order oder flex-direction: row-reverse überschrieben, laufen visuelle Reihenfolge und Fokusreihenfolge auseinander. Das widerspricht WCAG 1.3.2 (Bedeutungstragende Reihenfolge) und ist zu vermeiden.
Interaktive Inhalte innerhalb eines Flex Layouts müssen ihre barrierefreien Namen und Zustände selbst mitbringen, zum Beispiel über sichtbare Beschriftungen oder aria-label bei reinen Icon-Aktionen. Das betrifft nicht das Layout selbst, sondern die darin platzierten Komponenten.