# Flex

Flex ordnet Components innerhalb eines Flex-Containers an. Sie ermöglicht eine flexible, CSS-Flexbox-basierte Ausrichtung und Verteilung von Inhalten.

## Guidelines

# Grundlagen

Flex wurde eingeführt, um eine flexible Anordnung von Inhalten auf Basis der
CSS-Flexbox zu ermöglichen. So bleibt unser Designsystem offen genug, um auch
spezifische, schwer zu standardisierende Anforderungen und Layouts abzubilden.

## Best practices

Achte bei der Verwendung von Flex darauf, dass ...

- sie nicht für Layouts verwendet wird, die mit
  [Align](/04-components/structure/align/overview) kombiniert werden können und
  einem festen UI-Pattern folgen.
- sie gezielt für Sonderfälle genutzt wird – in den meisten Fällen bietet unser
  Designsystem bereits eine passende Lösung.

## Flex vs. Align

Flex und [Align](/04-components/structure/align/overview) sind sich als
Layout-Components sehr ähnlich. Um die beiden besser unterscheiden zu können,
hier ein paar hilfreiche Anhaltspunkte.

  

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

  

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