Zum Hauptinhalt springen

Flex

Flex in Storybook

Beispiele​

Einfaches Beispiel​

Ein einfacher Jutro Flex-Container besteht aus einer Flex-Komponente mit einer Reihe von untergeordneten Komponenten. Wenn es sich bei diesen untergeordneten Elementen um FlexItem-Komponenten handelt, können Sie die zusätzlichen FlexItem-Eigenschaften verwenden, um das Element im Layout weiter zu steuern.

Standardmäßig ist die wrap-Eigenschaft der Jutro Flex-Komponente auf true gesetzt. Das heißt, es wird versucht, die Elemente an den verfügbaren horizontalen Platz anzupassen. Wenn dies nicht möglich ist, werden sie in aufeinanderfolgenden Zeilen angezeigt.

<Flex>
    <FlexItem>
        <strong>First item</strong>
    </FlexItem>
    <FlexItem>
        <strong>Second item</strong>
    </FlexItem>
    <FlexItem>
        <strong>Third item</strong>
    </FlexItem>
</Flex>

gap-Beispiel​

Die gap-Eigenschaft wird verwendet, um den Abstand zwischen den Spalten in einem flexiblen Container festzulegen.

<h3>Small</h3>
<Flex gap="small">
    <FlexItem>
        <strong>First item</strong>
    </FlexItem>
    <FlexItem>
        <strong>Second item</strong>
    </FlexItem>
    <FlexItem>
        <strong>Third item</strong>
    </FlexItem>
</Flex>
<h3>Medium</h3>
<Flex gap="medium">
    <FlexItem>
        <strong>First item</strong>
    </FlexItem>
    <FlexItem>
        <strong>Second item</strong>
    </FlexItem>
    <FlexItem>
        <strong>Third item</strong>
    </FlexItem>
</Flex>
<h3>Large</h3>
<Flex gap="large">
    <FlexItem>
        <strong>First item</strong>
    </FlexItem>
    <FlexItem>
        <strong>Second item</strong>
    </FlexItem>
    <FlexItem>
        <strong>Third item</strong>
    </FlexItem>
</Flex>
<h3>None</h3>
<Flex gap="none">
    <FlexItem>
        <strong>First item</strong>
    </FlexItem>
    <FlexItem>
        <strong>Second item</strong>
    </FlexItem>
    <FlexItem>
        <strong>Third item</strong>
    </FlexItem>
</Flex>

direction-Beispiel​

Die direction-Eigenschaft legt die anfängliche Anordnung von Elementen in einem flexiblen Container fest. Der Standardwert ist row. Das bedeutet, dass Elemente in dieselbe Zeile eingefügt werden, wenn Platz vorhanden ist, beginnend mit der linken Seite des Bildschirms, wie in den vorherigen Beispielen zu sehen.

Wenn direction auf rowReverse gesetzt wird, werden die Elemente in dieselbe Zeile ab der rechten Seite des Fensters gesetzt.

<Flex direction='rowReverse'>
    <FlexItem>
        <strong>First item</strong>
    </FlexItem>
    <FlexItem>
        <strong>Second item</strong>
    </FlexItem>
    <FlexItem>
        <strong>Third item</strong>
    </FlexItem>
</Flex>

Wenn direction auf column oder columnReverse gesetzt wird, werden die Elemente vertikal von oben nach unten bzw. von unten nach oben angeordnet.

<Flex direction='column'>
    <FlexItem>
        <strong>First item</strong>
    </FlexItem>
    <FlexItem>
        <strong>Second item</strong>
    </FlexItem>
    <FlexItem>
        <strong>Third item</strong>
    </FlexItem>
</Flex>
<Flex direction='columnReverse'>
    <FlexItem>
        <strong>Fourth item</strong>
    </FlexItem>
    <FlexItem>
        <strong>Fifth item</strong>
    </FlexItem>
    <FlexItem>
        <strong>Sixth item</strong>
    </FlexItem>
</Flex>