Flex

Flex ordnet Components CSS-Flexbox-basiert in einem Flex-Container an.

import {
  LayoutCard,
  Flex,
} from "@mittwald/flow-react-components";

<Flex gap="m" justify="center">
  <LayoutCard />
  <LayoutCard />
  <LayoutCard />
</Flex>

Best Practices

Nutze Flex nicht für Layouts, die sich mit Combine‍ und einem festen UI-Pattern umsetzen lassen.
Setze Flex gezielt für Sonderfälle ein. Für die meisten Fälle bietet das Designsystem bereits eine passende Lösung.
Nutze für ein Layout über mehrere Spalten das ColumnLayout‍. Es bricht je Breakpoint automatisch um.

Flex vs. Combine

Flex ist das freie Werkzeug, Combine‍ das fertige Pattern. Prüfe deshalb zuerst, ob die gewünschte Anordnung schon als Kombination existiert – dann bleibt sie auch bei geändertem Inhalt und über alle Breakpoints korrekt.

Verwende Flex, um ...

individuelle Layouts zu gestalten, die keinem festen UI-Pattern folgen.
bewusst vom Standard des Designsystems abzuweichen.

Verwende Combine, um ...

vorab definierte Components miteinander zu kombinieren und automatisch anzuordnen.
wiederkehrende UI-Patterns konsistent umzusetzen.

Kombiniere mit ...

List

Innerhalb einer List‍ platzierst du mit <Flex /> den Content eines ListItems gezielt – in diesem Beispiel den zweiten Text in der rechten unteren Ecke.

LayoutCard

Innerhalb einer LayoutCard‍ ordnest du mit <Flex /> einzelne Elemente gezielt an – hier den Button am unteren Rand.

Labore, similique. Earum, quas in. At dolorem corrupti blanditiis nulla deserunt laborum! Corrupti delectus aspernatur nihil nulla obcaecati ipsam porro sequi rem? Quam.

Properties

Property	Type	Description
`align`	start (default) \| end \| center \| baseline \| stretch	The alignItems value of the element.
`children`	ReactNode
`className`	string	The elements class name.
`columnGap`	s \| xs \| m \| l \| xl	The columnGap size of the element.
`direction`	-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| row (default) \| column \| column-reverse \| row-reverse	The flexDirection value of the element.
`elementType`	div \| span \| p \| main \| ExoticComponent<{}> \| aside \| footer \| header \| li \| ol \| section \| ul	The HTML element or React component rendered as the elements root.
`gap`	s \| xs \| m \| l \| xl	The gap size of the element.
`grow`	boolean	Whether the element should grow.
`justify`	JustifyContentdefault: "start"	The justifyContent value of the element.
`padding`	s \| xs \| m \| l \| xl	The padding of the element.
`paddingBottom`	s \| xs \| m \| l \| xl	The padding bottom of the element.
`paddingLeft`	s \| xs \| m \| l \| xl	The padding left of the element.
`paddingRight`	s \| xs \| m \| l \| xl	The padding right of the element.
`paddingTop`	s \| xs \| m \| l \| xl	The padding top of the element.
`rowGap`	s \| xs \| m \| l \| xl	The rowGap size of the element.
`wrap`	wrap \| -moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| nowrap (default) \| wrap-reverse	The flexWrap value of the element.

Accessibility

Property	Type	Description
`aria-describedby`	string	Identifies the element (or elements) that describes the object. @see aria-labelledby
`aria-hidden`	Booleanish	Indicates whether the element is exposed to an accessibility API. @see aria-disabled.
`aria-label`	string	Defines a string value that labels the current element. @see aria-labelledby.
`aria-labelledby`	string	Identifies the element (or elements) that labels the current element. @see aria-describedby.

Components

Integrations