Flex

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.