mittwald Flow Logo

Components

Flex

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

Playground

Schließe die Components, die in einem Flex-Container dargestellt werden sollen, mit <Flex /> ein.

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

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

Anwendungsbeispiele

ListItem

In diesem Beispiel nutzen wir <Flex /> innerhalb einer List. Das ermöglicht es uns, gezielt den Content des ListItems zu platzieren – in diesem Fall den zweiten Text in der rechten unteren Ecke.

LayoutCard

Hier benutzen wir <Flex /> innerhalb einer LayoutCard. Dadurch können wir den Button gezielt unten anordnen.

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

Overview