Flex

Examples

Basic example

A basic Jutro flex container consists of a Flex component with a number of children components. If these children are FlexItem components, you can use the additional FlexItem props to have further control of the item within the layout.

By default, the Jutro Flex component has the wrap property set to true. That means your items try to fit in the available horizontal space, but if they cannot, they appear in subsequent lines.

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

`gap` example

The gap property is used to set the distance between the columns in a flex container.

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

The direction property sets the initial arrangement of items in a flex container. Its default value is row which means items are put on the same row if there is space, starting from the left side of the screen as seen in the previous examples.

If you set direction to rowReverse, the items will be put on the same row starting from the right hand side of the screen.

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

If you set direction to column or columnReverse, the items will be vertically arranged from top to bottom or from bottom to top respectively.

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

Usage

The Flex component is a technical component that facilitates the use of Flex CSS styling. For usage recommendations, see the official flexbox documentation.

Code

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

Import statement

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

Component contract

Make sure to understand the Design System components API surface, and the implications and trade-offs. Learn more in our introduction to the component API.

Properties

Flex properties

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.

Default value
'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.

Default value
'div'
wrap: Type
boolean | 'true' | 'false' | 'reverse'
Description
Wrap (true), don't wrap (false), reverse wrap (reverse) flex items in the container.
phonedeprecated: Type
string
Description
Flex properties that are used at the phone breakpoint.
phoneWidedeprecated: Type
string
Description
Flex properties that are used at the phoneWide breakpoint.
tabletdeprecated: Type
Flex
Description
Flex properties that are used at the tablet breakpoint.
themedeprecated: Type
any
Description
Prop 'theme' is unused in the component and has no effect.

FlexItem properties

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.

Default value
'div'
textAligndeprecated: Type
'left' | 'center' | 'right'
Description
Aligns the contents of the column horizontally.
visibledeprecated: Type
boolean
Description
If set to false, the FlexItem is hidden. In any other case, the FlexItem is displayed.

Hooks

No hooks are available for Flex.

Translation keys

There are no translations for Flex.

For information on how to manage translations, see our section about Internationalization.

Escape hatches

For more information, see our documentation about escape hatches.

Flex

Examples

Basic example

`gap` example

`direction` example

Usage

Code

Import statement

Component contract

Properties

Flex properties

`alignContent`

`alignItems`

`direction`

`gap`

`justifyContent`

`tag`

`wrap`

`phone`deprecated

`phoneWide`deprecated

`tablet`deprecated

`theme`deprecated

FlexItem properties

`alignSelf`

`basis`

`grow`

`shrink`

`tag`

`textAlign`deprecated

`visible`deprecated

Hooks

Translation keys

Escape hatches

Changelog

10.9.0

`Flex` changes in 10.9.0

`FlexItem` changes in 10.9.0

Examples​

Basic example​

gap example​

direction example​

Usage​

Code​

Import statement​

Component contract​

Properties​

Flex properties​

alignContent​

alignItems​

direction​

gap​

justifyContent​

tag​

wrap​

phonedeprecated​

phoneWidedeprecated​

tabletdeprecated​

themedeprecated​

FlexItem properties​

alignSelf​

basis​

grow​

shrink​

tag​

textAligndeprecated​

visibledeprecated​

Hooks​

Translation keys​

Escape hatches​

Changelog​

10.9.0​

Flex changes in 10.9.0​

FlexItem changes in 10.9.0​

Examples

Basic example

`gap` example

`direction` example

Usage

Code

Import statement

Component contract

Properties

Flex properties

`alignContent`

`alignItems`

`direction`

`gap`

`justifyContent`

`tag`

`wrap`

`phone`deprecated

`phoneWide`deprecated

`tablet`deprecated

`theme`deprecated

FlexItem properties

`alignSelf`

`basis`

`grow`

`shrink`

`tag`

`textAlign`deprecated

`visible`deprecated

Hooks

Translation keys

Escape hatches

Changelog

10.9.0

`Flex` changes in 10.9.0

`FlexItem` changes in 10.9.0