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
`direction`	FlexDirectiondefault: "row"	The flexDirection value of the element.
`align`	start (default) \| end \| center \| baseline \| stretch	The alignItems value of the element.
`justify`	JustifyContentdefault: "start"	The justifyContent value of the element.
`gap`	s \| xs \| m \| l \| xl	The gap size of the element.
`columnGap`	s \| xs \| m \| l \| xl	The columnGap size of the element.
`rowGap`	s \| xs \| m \| l \| xl	The rowGap size of the element.
`grow`	boolean	Whether the element should grow.
`wrap`	FlexWrapdefault: "nowrap"	The flexWrap value of the element.
`padding`	s \| xs \| m \| l \| xl	The padding of the element.
`paddingTop`	s \| xs \| m \| l \| xl	The padding top 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.
`children`	ReactNode
`className`	string	The elements class name.
`defaultChecked`	boolean
`defaultValue`	string \| number \| readonly string[]
`suppressContentEditableWarning`	boolean
`suppressHydrationWarning`	boolean
`accessKey`	string
`autoCapitalize`	none \| (string & {}) \| off \| on \| sentences \| words \| characters
`autoFocus`	boolean
`contentEditable`	Booleanish \| inherit \| plaintext-only
`contextMenu`	string
`dir`	string
`draggable`	Booleanish
`enterKeyHint`	enter \| done \| go \| next \| previous \| search \| send
`hidden`	boolean
`id`	string
`lang`	string
`nonce`	string
`slot`	string
`spellCheck`	Booleanish
`style`	CSSProperties
`tabIndex`	number
`title`	string
`translate`	yes \| no
`radioGroup`	string
`role`	AriaRole
`about`	string
`content`	string
`datatype`	string
`inlist`	any
`prefix`	string
`property`	string
`rel`	string
`resource`	string
`rev`	string
`typeof`	string
`vocab`	string
`autoCorrect`	string
`autoSave`	string
`color`	string
`itemProp`	string
`itemScope`	boolean
`itemType`	string
`itemID`	string
`itemRef`	string
`results`	number
`security`	string
`unselectable`	off \| on
`popover`	\| auto \| manual \| hint
`popoverTargetAction`	toggle \| show \| hide
`popoverTarget`	string
`inert`	boolean	@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert
`inputMode`	text \| none \| search \| url \| tel \| email \| numeric \| decimal	Hints at the type of data that might be entered by the user while editing the element or its contents @see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute
`is`	string	Specify that a standard HTML element should behave like a defined custom built-in element @see https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is
`exportparts`	string	@see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts
`part`	string	@see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part
`dangerouslySetInnerHTML`	{ __html: string \| TrustedHTML; }
`elementType`	div \| span \| p \| main \| ExoticComponent<{}> \| aside \| footer \| header \| li \| ol \| section \| ul	The HTML element or React component rendered as the elements root.

Events

Property	Type	Description
`onCopy`	ClipboardEventHandler<HTMLElement>
`onCopyCapture`	ClipboardEventHandler<HTMLElement>
`onCut`	ClipboardEventHandler<HTMLElement>
`onCutCapture`	ClipboardEventHandler<HTMLElement>
`onPaste`	ClipboardEventHandler<HTMLElement>
`onPasteCapture`	ClipboardEventHandler<HTMLElement>
`onCompositionEnd`	CompositionEventHandler<HTMLElement>
`onCompositionEndCapture`	CompositionEventHandler<HTMLElement>
`onCompositionStart`	CompositionEventHandler<HTMLElement>
`onCompositionStartCapture`	CompositionEventHandler<HTMLElement>
`onCompositionUpdate`	CompositionEventHandler<HTMLElement>
`onCompositionUpdateCapture`	CompositionEventHandler<HTMLElement>
`onFocus`	FocusEventHandler<HTMLElement>
`onFocusCapture`	FocusEventHandler<HTMLElement>
`onBlur`	FocusEventHandler<HTMLElement>
`onBlurCapture`	FocusEventHandler<HTMLElement>
`onChange`	ChangeEventHandler<HTMLElement, Element>
`onChangeCapture`	ChangeEventHandler<HTMLElement, Element>
`onBeforeInput`	InputEventHandler<HTMLElement>
`onBeforeInputCapture`	InputEventHandler<HTMLElement>
`onInput`	InputEventHandler<HTMLElement>
`onInputCapture`	InputEventHandler<HTMLElement>
`onReset`	ReactEventHandler<HTMLElement>
`onResetCapture`	ReactEventHandler<HTMLElement>
`onSubmit`	SubmitEventHandler<HTMLElement>
`onSubmitCapture`	SubmitEventHandler<HTMLElement>
`onInvalid`	ReactEventHandler<HTMLElement>
`onInvalidCapture`	ReactEventHandler<HTMLElement>
`onLoad`	ReactEventHandler<HTMLElement>
`onLoadCapture`	ReactEventHandler<HTMLElement>
`onError`	ReactEventHandler<HTMLElement>
`onErrorCapture`	ReactEventHandler<HTMLElement>
`onKeyDown`	KeyboardEventHandler<HTMLElement>
`onKeyDownCapture`	KeyboardEventHandler<HTMLElement>
`onKeyPress`	KeyboardEventHandler<HTMLElement>	@deprecated Use `onKeyUp` or `onKeyDown` instead
`onKeyPressCapture`	KeyboardEventHandler<HTMLElement>	@deprecated Use `onKeyUpCapture` or `onKeyDownCapture` instead
`onKeyUp`	KeyboardEventHandler<HTMLElement>
`onKeyUpCapture`	KeyboardEventHandler<HTMLElement>
`onAbort`	ReactEventHandler<HTMLElement>
`onAbortCapture`	ReactEventHandler<HTMLElement>
`onCanPlay`	ReactEventHandler<HTMLElement>
`onCanPlayCapture`	ReactEventHandler<HTMLElement>
`onCanPlayThrough`	ReactEventHandler<HTMLElement>
`onCanPlayThroughCapture`	ReactEventHandler<HTMLElement>
`onDurationChange`	ReactEventHandler<HTMLElement>
`onDurationChangeCapture`	ReactEventHandler<HTMLElement>
`onEmptied`	ReactEventHandler<HTMLElement>
`onEmptiedCapture`	ReactEventHandler<HTMLElement>
`onEncrypted`	ReactEventHandler<HTMLElement>
`onEncryptedCapture`	ReactEventHandler<HTMLElement>
`onEnded`	ReactEventHandler<HTMLElement>
`onEndedCapture`	ReactEventHandler<HTMLElement>
`onLoadedData`	ReactEventHandler<HTMLElement>
`onLoadedDataCapture`	ReactEventHandler<HTMLElement>
`onLoadedMetadata`	ReactEventHandler<HTMLElement>
`onLoadedMetadataCapture`	ReactEventHandler<HTMLElement>
`onLoadStart`	ReactEventHandler<HTMLElement>
`onLoadStartCapture`	ReactEventHandler<HTMLElement>
`onPause`	ReactEventHandler<HTMLElement>
`onPauseCapture`	ReactEventHandler<HTMLElement>
`onPlay`	ReactEventHandler<HTMLElement>
`onPlayCapture`	ReactEventHandler<HTMLElement>
`onPlaying`	ReactEventHandler<HTMLElement>
`onPlayingCapture`	ReactEventHandler<HTMLElement>
`onProgress`	ReactEventHandler<HTMLElement>
`onProgressCapture`	ReactEventHandler<HTMLElement>
`onRateChange`	ReactEventHandler<HTMLElement>
`onRateChangeCapture`	ReactEventHandler<HTMLElement>
`onSeeked`	ReactEventHandler<HTMLElement>
`onSeekedCapture`	ReactEventHandler<HTMLElement>
`onSeeking`	ReactEventHandler<HTMLElement>
`onSeekingCapture`	ReactEventHandler<HTMLElement>
`onStalled`	ReactEventHandler<HTMLElement>
`onStalledCapture`	ReactEventHandler<HTMLElement>
`onSuspend`	ReactEventHandler<HTMLElement>
`onSuspendCapture`	ReactEventHandler<HTMLElement>
`onTimeUpdate`	ReactEventHandler<HTMLElement>
`onTimeUpdateCapture`	ReactEventHandler<HTMLElement>
`onVolumeChange`	ReactEventHandler<HTMLElement>
`onVolumeChangeCapture`	ReactEventHandler<HTMLElement>
`onWaiting`	ReactEventHandler<HTMLElement>
`onWaitingCapture`	ReactEventHandler<HTMLElement>
`onAuxClick`	MouseEventHandler<HTMLElement>
`onAuxClickCapture`	MouseEventHandler<HTMLElement>
`onClick`	MouseEventHandler<HTMLElement>
`onClickCapture`	MouseEventHandler<HTMLElement>
`onContextMenu`	MouseEventHandler<HTMLElement>
`onContextMenuCapture`	MouseEventHandler<HTMLElement>
`onDoubleClick`	MouseEventHandler<HTMLElement>
`onDoubleClickCapture`	MouseEventHandler<HTMLElement>
`onDrag`	DragEventHandler<HTMLElement>
`onDragCapture`	DragEventHandler<HTMLElement>
`onDragEnd`	DragEventHandler<HTMLElement>
`onDragEndCapture`	DragEventHandler<HTMLElement>
`onDragEnter`	DragEventHandler<HTMLElement>
`onDragEnterCapture`	DragEventHandler<HTMLElement>
`onDragExit`	DragEventHandler<HTMLElement>
`onDragExitCapture`	DragEventHandler<HTMLElement>
`onDragLeave`	DragEventHandler<HTMLElement>
`onDragLeaveCapture`	DragEventHandler<HTMLElement>
`onDragOver`	DragEventHandler<HTMLElement>
`onDragOverCapture`	DragEventHandler<HTMLElement>
`onDragStart`	DragEventHandler<HTMLElement>
`onDragStartCapture`	DragEventHandler<HTMLElement>
`onDrop`	DragEventHandler<HTMLElement>
`onDropCapture`	DragEventHandler<HTMLElement>
`onMouseDown`	MouseEventHandler<HTMLElement>
`onMouseDownCapture`	MouseEventHandler<HTMLElement>
`onMouseEnter`	MouseEventHandler<HTMLElement>
`onMouseLeave`	MouseEventHandler<HTMLElement>
`onMouseMove`	MouseEventHandler<HTMLElement>
`onMouseMoveCapture`	MouseEventHandler<HTMLElement>
`onMouseOut`	MouseEventHandler<HTMLElement>
`onMouseOutCapture`	MouseEventHandler<HTMLElement>
`onMouseOver`	MouseEventHandler<HTMLElement>
`onMouseOverCapture`	MouseEventHandler<HTMLElement>
`onMouseUp`	MouseEventHandler<HTMLElement>
`onMouseUpCapture`	MouseEventHandler<HTMLElement>
`onSelect`	ReactEventHandler<HTMLElement>
`onSelectCapture`	ReactEventHandler<HTMLElement>
`onTouchCancel`	TouchEventHandler<HTMLElement>
`onTouchCancelCapture`	TouchEventHandler<HTMLElement>
`onTouchEnd`	TouchEventHandler<HTMLElement>
`onTouchEndCapture`	TouchEventHandler<HTMLElement>
`onTouchMove`	TouchEventHandler<HTMLElement>
`onTouchMoveCapture`	TouchEventHandler<HTMLElement>
`onTouchStart`	TouchEventHandler<HTMLElement>
`onTouchStartCapture`	TouchEventHandler<HTMLElement>
`onPointerDown`	PointerEventHandler<HTMLElement>
`onPointerDownCapture`	PointerEventHandler<HTMLElement>
`onPointerMove`	PointerEventHandler<HTMLElement>
`onPointerMoveCapture`	PointerEventHandler<HTMLElement>
`onPointerUp`	PointerEventHandler<HTMLElement>
`onPointerUpCapture`	PointerEventHandler<HTMLElement>
`onPointerCancel`	PointerEventHandler<HTMLElement>
`onPointerCancelCapture`	PointerEventHandler<HTMLElement>
`onPointerEnter`	PointerEventHandler<HTMLElement>
`onPointerLeave`	PointerEventHandler<HTMLElement>
`onPointerOver`	PointerEventHandler<HTMLElement>
`onPointerOverCapture`	PointerEventHandler<HTMLElement>
`onPointerOut`	PointerEventHandler<HTMLElement>
`onPointerOutCapture`	PointerEventHandler<HTMLElement>
`onGotPointerCapture`	PointerEventHandler<HTMLElement>
`onGotPointerCaptureCapture`	PointerEventHandler<HTMLElement>
`onLostPointerCapture`	PointerEventHandler<HTMLElement>
`onLostPointerCaptureCapture`	PointerEventHandler<HTMLElement>
`onScroll`	UIEventHandler<HTMLElement>
`onScrollCapture`	UIEventHandler<HTMLElement>
`onScrollEnd`	UIEventHandler<HTMLElement>
`onScrollEndCapture`	UIEventHandler<HTMLElement>
`onWheel`	WheelEventHandler<HTMLElement>
`onWheelCapture`	WheelEventHandler<HTMLElement>
`onAnimationStart`	AnimationEventHandler<HTMLElement>
`onAnimationStartCapture`	AnimationEventHandler<HTMLElement>
`onAnimationEnd`	AnimationEventHandler<HTMLElement>
`onAnimationEndCapture`	AnimationEventHandler<HTMLElement>
`onAnimationIteration`	AnimationEventHandler<HTMLElement>
`onAnimationIterationCapture`	AnimationEventHandler<HTMLElement>
`onToggle`	ToggleEventHandler<HTMLElement>
`onBeforeToggle`	ToggleEventHandler<HTMLElement>
`onTransitionCancel`	TransitionEventHandler<HTMLElement>
`onTransitionCancelCapture`	TransitionEventHandler<HTMLElement>
`onTransitionEnd`	TransitionEventHandler<HTMLElement>
`onTransitionEndCapture`	TransitionEventHandler<HTMLElement>
`onTransitionRun`	TransitionEventHandler<HTMLElement>
`onTransitionRunCapture`	TransitionEventHandler<HTMLElement>
`onTransitionStart`	TransitionEventHandler<HTMLElement>
`onTransitionStartCapture`	TransitionEventHandler<HTMLElement>

Accessibility

Property	Type	Description
`aria-activedescendant`	string	Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.
`aria-atomic`	Booleanish	Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.
`aria-autocomplete`	list \| none \| inline \| both	Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made.
`aria-braillelabel`	string	Defines a string value that labels the current element, which is intended to be converted into Braille. @see aria-label.
`aria-brailleroledescription`	string	Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille. @see aria-roledescription.
`aria-busy`	Booleanish
`aria-checked`	boolean \| false \| true \| mixed	Indicates the current "checked" state of checkboxes, radio buttons, and other widgets. @see aria-pressed @see aria-selected.
`aria-colcount`	number	Defines the total number of columns in a table, grid, or treegrid. @see aria-colindex.
`aria-colindex`	number	Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid. @see aria-colcount @see aria-colspan.
`aria-colindextext`	string	Defines a human readable text alternative of aria-colindex. @see aria-rowindextext.
`aria-colspan`	number	Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid. @see aria-colindex @see aria-rowspan.
`aria-controls`	string	Identifies the element (or elements) whose contents or presence are controlled by the current element. @see aria-owns.
`aria-current`	boolean \| step \| false \| true \| page \| location \| date \| time	Indicates the element that represents the current item within a container or set of related elements.
`aria-describedby`	string	Identifies the element (or elements) that describes the object. @see aria-labelledby
`aria-description`	string	Defines a string value that describes or annotates the current element. @see related aria-describedby.
`aria-details`	string	Identifies the element that provides a detailed, extended description for the object. @see aria-describedby.
`aria-disabled`	Booleanish	Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. @see aria-hidden @see aria-readonly.
`aria-dropeffect`	none \| link \| copy \| execute \| move \| popup	Indicates what functions can be performed when a dragged object is released on the drop target. @deprecated in ARIA 1.1
`aria-errormessage`	string	Identifies the element that provides an error message for the object. @see aria-invalid @see aria-describedby.
`aria-expanded`	Booleanish	Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.
`aria-flowto`	string	Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, allows assistive technology to override the general default of reading in document source order.
`aria-grabbed`	Booleanish	Indicates an element's "grabbed" state in a drag-and-drop operation. @deprecated in ARIA 1.1
`aria-haspopup`	boolean \| false \| true \| menu \| listbox \| tree \| grid \| dialog	Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.
`aria-hidden`	Booleanish	Indicates whether the element is exposed to an accessibility API. @see aria-disabled.
`aria-invalid`	boolean \| false \| true \| grammar \| spelling	Indicates the entered value does not conform to the format expected by the application. @see aria-errormessage.
`aria-keyshortcuts`	string	Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.
`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.
`aria-level`	number	Defines the hierarchical level of an element within a structure.
`aria-live`	off \| assertive \| polite	Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.
`aria-modal`	Booleanish	Indicates whether an element is modal when displayed.
`aria-multiline`	Booleanish	Indicates whether a text box accepts multiple lines of input or only a single line.
`aria-multiselectable`	Booleanish	Indicates that the user may select more than one item from the current selectable descendants.
`aria-orientation`	horizontal \| vertical	Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.
`aria-owns`	string	Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship. @see aria-controls.
`aria-placeholder`	string	Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format.
`aria-posinset`	number	Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. @see aria-setsize.
`aria-pressed`	boolean \| false \| true \| mixed	Indicates the current "pressed" state of toggle buttons. @see aria-checked @see aria-selected.
`aria-readonly`	Booleanish	Indicates that the element is not editable, but is otherwise operable. @see aria-disabled.
`aria-relevant`	text \| additions \| additions removals \| additions text \| all \| removals \| removals additions \| removals text \| text additions \| text removals	Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified. @see aria-atomic.
`aria-required`	Booleanish	Indicates that user input is required on the element before a form may be submitted.
`aria-roledescription`	string	Defines a human-readable, author-localized description for the role of an element.
`aria-rowcount`	number	Defines the total number of rows in a table, grid, or treegrid. @see aria-rowindex.
`aria-rowindex`	number	Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid. @see aria-rowcount @see aria-rowspan.
`aria-rowindextext`	string	Defines a human readable text alternative of aria-rowindex. @see aria-colindextext.
`aria-rowspan`	number	Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid. @see aria-rowindex @see aria-colspan.
`aria-selected`	Booleanish	Indicates the current "selected" state of various widgets. @see aria-checked @see aria-pressed.
`aria-setsize`	number	Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. @see aria-posinset.
`aria-sort`	none \| ascending \| descending \| other	Indicates if items in a table or grid are sorted in ascending or descending order.
`aria-valuemax`	number	Defines the maximum allowed value for a range widget.
`aria-valuemin`	number	Defines the minimum allowed value for a range widget.
`aria-valuenow`	number	Defines the current value for a range widget. @see aria-valuetext.
`aria-valuetext`	string	Defines the human readable text alternative of aria-valuenow for a range widget.

Components

Integrations