# Flex

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

## Overview

# Playground

  Individuelles Layout mit Flex

    Der Einsatz von Flex führt zu individuellen Layouts, die vom Designsystem
    abweichen. Das kann den Wartungsaufwand erhöhen und für User zu ungewohnten
    Interaktionen führen. Nutze Flex daher nur für gezielte, kleine
    Layout-Anpassungen und überlege sorgfältig, ob der Einsatz wirklich
    notwendig ist.

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

```tsx
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](/04-components/structure/list/overview). Das ermöglicht es uns, gezielt
den Content des ListItems zu platzieren – in diesem Fall den zweiten Text in der
rechten unteren Ecke.

```tsx
import {
  Avatar,
  Content,
  Flex,
  Heading,
  IconExtension,
  Text,
  typedList,
} from "@mittwald/flow-react-components";

export default () => {
  const List = typedList<{ text: string }>();

  return (
    <List.List
      defaultViewMode="tiles"
      aria-label="Extensions"
    >
      <List.StaticData
        data={[
          { text: "Meine Extension" },
          {
            text: "Meine andere Extension mit einen deutlich längeren Namen",
          },
        ]}
      />
      <List.Item
        showTiles
        showList={false}
        textValue={(i) => i.text}
      >
        {(i) => (
          <List.ItemView>
            <Avatar>
              <IconExtension />
            </Avatar>
            <Heading>{i.text}</Heading>

            <Content slot="bottom">
              <Flex justify="end" align="end">
                <Text>Kostenlos</Text>
              </Flex>
            </Content>
          </List.ItemView>
        )}
      </List.Item>
    </List.List>
  );
}
```

## LayoutCard

Hier benutzen wir `<Flex />` innerhalb einer
[LayoutCard](/04-components/structure/layout-card/overview). Dadurch können wir
den Button gezielt unten anordnen.

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

<LayoutCard style={{ minHeight: 300 }}>
  <Text>
    Labore, similique. Earum, quas in. At dolorem corrupti
    blanditiis nulla deserunt laborum! Corrupti delectus
    aspernatur nihil nulla obcaecati ipsam porro sequi rem?
    Quam.
  </Text>
  <Flex align="end" grow>
    <Button color="accent">Install</Button>
  </Flex>
</LayoutCard>
```