# Flex

Flex ordnet Components CSS-Flexbox-basiert in einem Flex-Container an.

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. Für wiederkehrende Kombinationen ist
[Combine](https://flow.mittwald.de/04-components/structure/combine) zuständig.

```tsx
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](https://flow.mittwald.de/04-components/structure/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](https://flow.mittwald.de/04-components/structure/column-layout). Es bricht je
  Breakpoint automatisch um.

## Flex vs. Combine

Flex ist das freie Werkzeug, [Combine](https://flow.mittwald.de/04-components/structure/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](https://flow.mittwald.de/04-components/structure/list) platzierst du mit
`<Flex />` den Content eines ListItems gezielt – in diesem Beispiel 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

Innerhalb einer [LayoutCard](https://flow.mittwald.de/04-components/structure/layout-card) ordnest du
mit `<Flex />` einzelne Elemente gezielt an – hier den Button am unteren Rand.

```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="success">Install</Button>
  </Flex>
</LayoutCard>
```

---

# Properties

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `align` | `"start" \| "end" \| "center" \| "baseline" \| "stretch"` | `"start"` | The alignItems value of the element. |
| `children` | `ReactNode` | - | - |
| `className` | `string` | - | The elements class name. |
| `columnGap` | `"s" \| "xs" \| "m" \| "l" \| "xl"` | - | The columnGap size of the element. |
| `direction` | `FlexDirection` | `"row"` | The flexDirection value of the element. |
| `elementType` | `"div" \| "span" \| "p" \| "main" \| ExoticComponent<{}> \| "aside" \| "footer" \| "header" \| "li" \| "ol" \| "section" \| "ul"` | - | The HTML element or React component rendered as the elements root. |
| `gap` | `"s" \| "xs" \| "m" \| "l" \| "xl"` | - | The gap size of the element. |
| `grow` | `boolean` | - | Whether the element should grow. |
| `justify` | `JustifyContent` | `"start"` | The justifyContent value of the element. |
| `padding` | `"s" \| "xs" \| "m" \| "l" \| "xl"` | - | The padding 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. |
| `paddingTop` | `"s" \| "xs" \| "m" \| "l" \| "xl"` | - | The padding top of the element. |
| `rowGap` | `"s" \| "xs" \| "m" \| "l" \| "xl"` | - | The rowGap size of the element. |
| `wrap` | `FlexWrap` | `"nowrap"` | The flexWrap value of the element. |

### Accessibility

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `aria-describedby` | `string` | - | Identifies the element (or elements) that describes the object. @see aria-labelledby |
| `aria-hidden` | `Booleanish` | - | Indicates whether the element is exposed to an accessibility API. @see aria-disabled. |
| `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. |