Flex

Flex in Storybook

Verwendung

Bei der Flex-Komponente handelt es sich um eine technische Komponente, die die Verwendung des Flex-CSS-Stylings erleichtert. Empfehlungen zur Verwendung finden Sie in der offiziellen Flexbox-Dokumentation.

Code

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

Importanweisung

import { Flex, FlexItem } from '@jutro/layout';

Komponentenvertrag

Vergewissern Sie sich, dass Sie die API-Oberfläche der Design System-Komponenten und die damit verbundenen Auswirkungen und Kompromisse verstehen. Erfahren Sie mehr in unserer Einführung zur Komponenten-API.

Eigenschaften

Flex-Eigenschaften

alignContent

Typ

'center' | 'baseline' | 'stretch' | 'start' | 'end'

Beschreibung

Aligns the flex within its container in the axis opposite to its direction.

alignItems

Typ

'center' | 'baseline' | 'stretch' | 'start' | 'end'

Beschreibung

Aligns all items within the grid in the axis opposite to its direction.

direction

Typ

'row' | 'rowReverse' | 'column' | 'columnReverse'

Beschreibung

Sets the flex direction.

Standardwert

'row'

gap

Typ

'none' | 'small' | 'medium' | 'large'

Beschreibung

The size of the gaps between rows and columns.

justifyContent

Typ

'center' | 'baseline' | 'stretch' | 'start' | 'end'

Beschreibung

Justifies the content in the flex direction: horizontally if direction is 'row' (default) or vertically if direction is 'column'.

tag

Typ

string

Beschreibung

Optional DOM tag to render.

Standardwert

'div'

wrap

Typ

boolean | 'true' | 'false' | 'reverse'

Beschreibung

Wrap (true), don't wrap (false), reverse wrap (reverse) flex items in the container.

phoneVerworfen

Typ

string

Beschreibung

Flex properties that are used at the phone breakpoint.

phoneWideVerworfen

Typ

string

Beschreibung

Flex properties that are used at the phoneWide breakpoint.

tabletVerworfen

Typ

Flex

Beschreibung

Flex properties that are used at the tablet breakpoint.

themeVerworfen

Typ

any

Beschreibung

Prop 'theme' is unused in the component and has no effect.

FlexItem-Eigenschaften

alignSelf

Typ

'center' | 'baseline' | 'stretch' | 'start' | 'end'

Beschreibung

Aligns the flex item according to the cross axis of the flex direction.

basis

Typ

number | string

Beschreibung

Specifies the initial length of a flex item.

grow

Typ

number | string

Beschreibung

The standard flex grow property.

shrink

Typ

number | string

Beschreibung

The standard flex shrink property.

tag

Typ

string

Beschreibung

Optional DOM tag to render.

Standardwert

'div'

textAlignVerworfen

Typ

'left' | 'center' | 'right'

Beschreibung

Aligns the contents of the column horizontally.

visibleVerworfen

Typ

boolean

Beschreibung

If set to false, the FlexItem is hidden. In any other case, the FlexItem is displayed.

Hooks

Für Flex sind keine Hooks verfügbar.

Übersetzungsschlüssel

Es gibt keine Übersetzungen für Flex.

Informationen über die Verwaltung von Übersetzungen finden Sie in unserem Abschnitt über Internationalisierung.

Escape Hatches

Weitere Informationen finden Sie in unserer Dokumentation über Escape Hatches.

Beispiele

Beispiel für einen einfachen Flex-Container

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 festgelegt. 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 Flex-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 Flex-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 festgelegt wird, werden die Elemente beginnend mit der rechten Seite des Bildschirms in derselben Zeile angeordnet.

<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 festgelegt 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>

Änderungsprotokoll

10.9.0

Flex-Änderungen in 10.9.0

Die folgenden Flex-Eigenschaften wurden abgekündigt:

• tablet
• phoneWide
• phone

Die folgenden Optionen für Flex-Eigenschaften wurden abgekündigt:

• alignItems - 'top', 'middle', 'bottom', 'right' und 'left'
• alignContent - 'top', 'middle', 'bottom', 'right' und 'left'
• justifyContent - 'top', 'middle', 'bottom', 'right' und 'left'

FlexItem-Änderungen in 10.9.0

Die folgenden FlexItem-Eigenschaften wurden abgekündigt:

• tablet
• phoneWide
• phone
• visible
• textAlign

Die folgenden Optionen für FlexItem-Eigenschaften wurden abgekündigt:

• alignSelf - 'top', 'middle', 'bottom', 'right' und 'left'