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	Default	Description
`align`	`"start" \| "end" \| "center" \| "baseline" \| "stretch"`	"start"	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`	`FlexDirection`	"row"	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`	`JustifyContent`	"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`	`FlexWrap`	"nowrap"	The flexWrap value of the element.

Accessibility

Property	Type	Default	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