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 war Floating Layout.
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.

SEIT VERSION: 4.0.0

Nur noch das Flex Layout anstatt dem Floating Layout verwenden. Das Floating Layout ist deprecated.

Die Ablösung betrifft den Produktnamen und die Dokumentation: Beschreibe und benenne die Komponente als Flex Layout. Die technischen Bezeichner der aktuellen Version tragen weiterhin den alten Namen (siehe Hinweis oben) und sind unverändert zu verwenden - sie sind nicht Gegenstand dieser Ablösung.

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

Figma

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

Figma

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

Figma

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

Figma


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. Designraster und implementierter Abstand sind an dieser Stelle nicht deckungsgleich, die Zusammenführung ist ein offener Punkt mit dem UX-Team.

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.

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.

Develop Web Components

Das Flex Layout wird über das Theme-Paket @mate/theme bereitgestellt. Ein eigenes Paket und ein zusätzlicher Import sind nicht nötig. Das Grundbeispiel steht im Beispielabschnitt dieser Seite, hier stehen nur die Punkte, die dort nicht enthalten sind.

Das Theme verteilt das Flex Layout auf zwei Dateien: packages/theme/base/flex-layout.css setzt die Anordnung mit display: flex und flex-wrap: wrap, packages/theme/size/base/flex-layout.css setzt die Abstände der zusätzlichen Theme-Namen spacing und padding.

Für das Flex Layout selektieren beide Dateien zwei Schreibweisen: den Theme-Namen auf einem div über div[theme~="floating-layout"] und zusätzlich den Elementnamen mate-floating-layout. Der Theme-Name wirkt also nicht auf einem beliebigen Element, sondern ausschließlich auf einem div. Ein Paket beziehungsweise ein registriertes Custom Element mate-floating-layout existiert im Repository jedoch nicht. Verwende deshalb durchgängig die Schreibweise <div theme="floating-layout">.

packages/theme/size/base/flex-layout.css gilt dabei nicht nur für das Flex Layout: Dieselben Regeln für spacing und padding stehen dort in einer gemeinsamen Selektorliste zusätzlich für das Form Layout (mate-form-layout und div[theme~="form-layout"]) sowie für vaadin-horizontal-layout und vaadin-vertical-layout. Die beiden Theme-Namen erzeugen deshalb in allen diesen Layouts dieselben Abstände.

Die Theme-Namen werden im selben Attribut kombiniert, zum Beispiel theme="floating-layout spacing padding":

Theme-Name	Wirkung
floating-layout	Aktiviert das Flex Layout mit horizontaler Anordnung und Zeilenumbruch (display: flex, flex-wrap: wrap).
spacing	Abstand zwischen den Elementen und zwischen den Zeilen: 16 Pixel Desktop, 20 Pixel mobil.
padding	Innenabstand des Layouts: 16 Pixel Desktop, 20 Pixel mobil.

Das Beispiel im Beispielabschnitt dieser Seite zeigt nur die Standardvariante ohne Abstände. Mit beiden Abständen sieht das Layout so aus; vorausgesetzt sind @mate/theme für das Layout selbst und @vaadin/button für die Schaltflächen, beide installiert und importiert:

<div theme="floating-layout spacing padding">
  <vaadin-button>Aktion 1</vaadin-button>
  <vaadin-button>Aktion 2</vaadin-button>
  <vaadin-button>Aktion 3</vaadin-button>
</div>

Develop Vue

npm i @mate-vue/floating-layout @mate-vue/button

<script setup>
import { MateFloatingLayout } from '@mate-vue/floating-layout';
import { MateButton } from '@mate-vue/button';
</script>

<template>
  <MateFloatingLayout>
    <MateButton>Aktion 1</MateButton>
    <MateButton>Aktion 2</MateButton>
    <MateButton>Aktion 3</MateButton>
  </MateFloatingLayout>
</template>

Das Vue-Paket kapselt dasselbe Theme-Layout. Wie bei allen Vue-Komponenten von Mate ist zusätzlich das Theme-Paket @mate/theme im Einstiegspunkt der Anwendung zu importieren, sonst bleibt die Komponente ungestylt.

Spacing und Padding werden auch in Vue über das Attribut theme gesetzt, es nimmt dieselben Theme-Namen entgegen wie in Web Components. Angegeben wird dabei nur die zusätzliche Konfiguration, den Basisnamen des Layouts bringt der Wrapper selbst mit. Belegt ist das allerdings ausschließlich für MateBlockLayout: Dessen offizielle Vue-Beispiele in Version 25 schreiben theme="spacing" beziehungsweise theme="spacing layout-6-6" ohne den Basisnamen block-layout. Für MateFloatingLayout und MateFormLayout zeigen die offiziellen Vue-Beispiele dagegen überhaupt keine Verwendung von theme, sondern nur die Standardvariante.

Das folgende Beispiel überträgt die Schreibweise von MateBlockLayout deshalb lediglich analog auf MateFloatingLayout. Es ist im Projekt zu verifizieren, ob der Wrapper das Attribut theme durchreicht und den Basisnamen floating-layout selbst ergänzt.

<template>
  <MateFloatingLayout theme="spacing padding">
    <MateButton>Aktion 1</MateButton>
    <MateButton>Aktion 2</MateButton>
    <MateButton>Aktion 3</MateButton>
  </MateFloatingLayout>
</template>

Geprüfte Entwicklerangabe

Für Vue wurde das Paket @mate/vue-flex-layout genannt. Dieses Paket existiert nicht. Korrekt ist @mate-vue/floating-layout. Vue-Pakete tragen im gesamten Design System das Präfix @mate-vue/ und nicht @mate/vue-.

Develop Flow

<dependency>
    <groupId>de.mate_ds</groupId>
    <artifactId>mate-flex-layout-flow</artifactId>
</dependency>

import com.vaadin.flow.component.button.Button;
import de.mate_ds.flow.component.flexlayout.FloatingLayout;

FloatingLayout layout = new FloatingLayout();
layout.add(
    new Button("Aktion 1"),
    new Button("Aktion 2"),
    new Button("Aktion 3")
);

Für Spacing und Padding ist beim FloatingLayout keine Flow-API dokumentiert: Die Mate-Beispiele für Flow in Version 25 zeigen zum FloatingLayout nur die Standardvariante. Bei den beiden Geschwisterklassen aus demselben Artefakt ist die Methode dagegen ausgewiesen: Das BlockLayout zeigt setSpacing(true) und setDoubleBottomPadding(true), das FormLayout zeigt setSpacing(true). Zwei von drei Layout-Klassen des Packages haben also eine dokumentierte Methode für Spacing, das FloatingLayout nicht. Ob es eine entsprechende Methode oder die Theme-Namen-API anbietet, ist damit nicht belegt. Das ist ein offener Punkt und im Projekt an der Flow-API des eingesetzten Artefakts zu prüfen.

Das Artefakt de.mate_ds:mate-flex-layout-flow liefert das Package de.mate_ds.flow.component.flexlayout mit den Klassen FloatingLayout, FormLayout, BlockLayout und BlockLayoutVariant. Es deckt damit das Flex Layout, das Form Layout und das Block Layout gemeinsam ab. Der Artefaktname erklärt zugleich den Produktnamen Flex Layout.

Abgrenzung zu vaadin-ordered-layout-flow

Das Artefakt com.vaadin:vaadin-ordered-layout-flow ist das Vaadin-Artefakt für das Package com.vaadin.flow.component.orderedlayout mit HorizontalLayout und VerticalLayout. Es kommt in einem Vaadin-Projekt über die Vaadin-Plattform beziehungsweise die BOM und wird für das Mate Flex Layout selbst nicht benötigt. Es ist die Grundlage für Horizontal Layout und Vertical Layout, die von der Mate-Theme-Datei size/base/flex-layout.css bei den Theme-Namen spacing und padding mitgestylt werden.