Flex

Utilisation

Le composant Flex est un composant technique qui facilite l'utilisation du style CSS Flex. Pour des recommandations d'utilisation, reportez-vous à la documentation officielle Flexbox.

Code

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

Instruction d'importation

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

Cahier des charges du composant

Assurez-vous de comprendre la surface de l'API des composants du système de conception, ainsi que les implications et les compromis. Pour en savoir plus, reportez-vous à notre introduction à l'API des composants.

Propriétés

Propriétés de Flex

alignContent: Type
'center' | 'baseline' | 'stretch' | 'start' | 'end'
Description
Aligns the flex within its container in the axis opposite to its direction.
alignItems: Type
'center' | 'baseline' | 'stretch' | 'start' | 'end'
Description
Aligns all items within the grid in the axis opposite to its direction.
direction: Type
'row' | 'rowReverse' | 'column' | 'columnReverse'
Description
Sets the flex direction.

Valeur par défaut
'row'
gap: Type
'none' | 'small' | 'medium' | 'large'
Description
The size of the gaps between rows and columns.
justifyContent: Type
'center' | 'baseline' | 'stretch' | 'start' | 'end'
Description
Justifies the content in the flex direction: horizontally if direction is 'row' (default) or vertically if direction is 'column'.
tag: Type
string
Description
Optional DOM tag to render.

Valeur par défaut
'div'
wrap: Type
boolean | 'true' | 'false' | 'reverse'
Description
Wrap (true), don't wrap (false), reverse wrap (reverse) flex items in the container.
phoneobsolète: Type
string
Description
Flex properties that are used at the phone breakpoint.
phoneWideobsolète: Type
string
Description
Flex properties that are used at the phoneWide breakpoint.
tabletobsolète: Type
Flex
Description
Flex properties that are used at the tablet breakpoint.
themeobsolète: Type
any
Description
Prop 'theme' is unused in the component and has no effect.

Propriétés de FlexItem

alignSelf: Type
'center' | 'baseline' | 'stretch' | 'start' | 'end'
Description
Aligns the flex item according to the cross axis of the flex direction.
basis: Type
number | string
Description
Specifies the initial length of a flex item.
grow: Type
number | string
Description
The standard flex grow property.
shrink: Type
number | string
Description
The standard flex shrink property.
tag: Type
string
Description
Optional DOM tag to render.

Valeur par défaut
'div'
textAlignobsolète: Type
'left' | 'center' | 'right'
Description
Aligns the contents of the column horizontally.
visibleobsolète: Type
boolean
Description
If set to false, the FlexItem is hidden. In any other case, the FlexItem is displayed.

Crochets

Aucun crochet n'est disponible pour Flex.

Clés de traduction

Il n'existe aucune traduction pour Flex.

Pour en savoir plus sur la gestion des traductions, reportez-vous à notre section sur l'internationalisation.

Portes de sortie

Pour en savoir plus, reportez-vous à notre documentation sur les portes de sortie.

Exemples

Exemple de conteneur flexible de base

Un conteneur Jutro Flex de base contient un composant Flex avec plusieurs composants enfants. Si ces enfants sont des composants FlexItem, vous pouvez utiliser les propriétés FlexItem supplémentaires pour avoir plus de contrôle sur l'élément au niveau de la mise en page.

Par défaut, le composant Flex de Jutro contient la propriété wrap définie sur true. Cela signifie que vos éléments tentent de tenir dans l'espace horizontal disponible, mais s'ils ne le peuvent pas, ils apparaissent dans les lignes suivantes.

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

Exemple `gap`

La propriété gap est utilisée pour définir la distance entre les colonnes d'un conteneur Flex.

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

Exemple `direction`

La propriété direction définit la disposition initiale des éléments dans un conteneur Flex. Sa valeur par défaut est row, ce qui signifie que les éléments sont placés sur la même ligne s'il y a de la place, en commençant par le côté gauche de l'écran, comme on le voit dans les exemples précédents.

Si vous définissez direction sur rowReverse, les éléments seront placés sur la même ligne en partant du côté droit de l'écran.

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

Si vous définissez direction sur column ou columnReverse, les éléments seront disposés verticalement de haut en bas ou de bas en haut respectivement.

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

Flex

Utilisation

Code

Instruction d'importation

Cahier des charges du composant

Propriétés

Propriétés de Flex

`alignContent`

`alignItems`

`direction`

`gap`

`justifyContent`

`tag`

`wrap`

`phone`obsolète

`phoneWide`obsolète

`tablet`obsolète

`theme`obsolète

Propriétés de FlexItem

`alignSelf`

`basis`

`grow`

`shrink`

`tag`

`textAlign`obsolète

`visible`obsolète

Crochets

Clés de traduction

Portes de sortie

Exemples

Exemple de conteneur flexible de base

Exemple `gap`

Exemple `direction`

Journal des modifications

10.9.0

Modifications `Flex` effectuées dans la version 10.9.0

Modifications `FlexItem` effectuées dans la version 10.9.0

Utilisation​

Code​

Instruction d'importation​

Cahier des charges du composant​

Propriétés​

Propriétés de Flex​

alignContent​

alignItems​

direction​

gap​

justifyContent​

tag​

wrap​

phoneobsolète​

phoneWideobsolète​

tabletobsolète​

themeobsolète​

Propriétés de FlexItem​

alignSelf​

basis​

grow​

shrink​

tag​

textAlignobsolète​

visibleobsolète​

Crochets​

Clés de traduction​

Portes de sortie​

Exemples​

Exemple de conteneur flexible de base​

Exemple gap​

Exemple direction​

Journal des modifications​

10.9.0​

Modifications Flex effectuées dans la version 10.9.0​

Modifications FlexItem effectuées dans la version 10.9.0​

Utilisation

Code

Instruction d'importation

Cahier des charges du composant

Propriétés

Propriétés de Flex

`alignContent`

`alignItems`

`direction`

`gap`

`justifyContent`

`tag`

`wrap`

`phone`obsolète

`phoneWide`obsolète

`tablet`obsolète

`theme`obsolète

Propriétés de FlexItem

`alignSelf`

`basis`

`grow`

`shrink`

`tag`

`textAlign`obsolète

`visible`obsolète

Crochets

Clés de traduction

Portes de sortie

Exemples

Exemple de conteneur flexible de base

Exemple `gap`

Exemple `direction`

Journal des modifications

10.9.0

Modifications `Flex` effectuées dans la version 10.9.0

Modifications `FlexItem` effectuées dans la version 10.9.0