Inline
Legt Teile nebeneinander und umhüllt sie, wenn sie nicht passen.
Auf dieser Seite
Playground
123
Abstand (gap)
Verteilung
Teile
Hintergrund
<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
Stück 1Stück 2Stück 3Stück 4
Inline
Vier Stücke bei space-2.
Code anzeigen
<div class="feitio-inline" data-gap="2">
…
</div><Inline gap={2}>
…
</Inline>1234567891011121314
Umbruch
Wenn die Teile nicht passen, bricht die Zeile um, und derselbe Abstand gilt zwischen den Zeilen: nichts berührt sich.
Code anzeigen
<div class="feitio-inline" data-gap="3">
…
</div>12
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
<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.