Skip to main content

Flex

Flex in Storybook

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>