# Inline

Legt Teile nebeneinander und umhüllt sie, wenn sie nicht passen.

## Playground

```html
<div class="feitio-inline" data-gap="1"><span class="lay-box">1</span><span class="lay-box">2</span><span class="lay-box">3</span></div>
```

## Wann verwenden

-   Jedesmal wenn es Platz zwischen Teilen: Platz gehört zum Elternteil, und nur ein Schritt der Skala.

## Wann nicht verwenden

-   **Für einen Komponente inneren Padding:** es kommt bereit.
-   **Mit einer handgeschriebenen Rand entlang:** nie; der Check versagt es.

## Beispiele

### Inline

Vier Stücke bei `space-2`.

Code anzeigen

```html
<div class="feitio-inline" data-gap="2">
  …
</div>
```

```jsx
<Inline gap={2}>
  …
</Inline>
```

### Umbruch

Wenn die Teile nicht passen, bricht die Zeile um, und derselbe Abstand gilt zwischen den Zeilen: nichts berührt sich.

Code anzeigen

```html
<div class="feitio-inline" data-gap="3">
  …
</div>
```

### Verteilt

`data-justify="between"` bringt das erste Teil auf die eine Seite und das letzte auf die andere, wie eine Überschrift und ihre Aktion.

Code anzeigen

```html
<div class="feitio-inline" data-gap="3" data-justify="between">
  <h2>…</h2>
  <button class="feitio-button">…</button>
</div>
```

## Attribute

Attribut

Werte

Zum Zweck

`class="feitio-inline"`

erforderlich

Das Layout.

`data-gap`

`1` bis `7`

Der Abstand zwischen den Elementen. In React kompiliert kein anderer Wert.

`justify`

`"between"`, `"end"`

Wie die Teile entlang der Linie verteilt werden.

Die Regeln und ein ganzes Formular, das mit allen drei erstellt wurde, finden sich in [Layout](/de/dev/layout/).