Flex

Flex in Storybook

Wraps the native behavior of CSS Flex as a component. Flex is a one-dimensional model that can be used to build simple layouts. It is good for displaying a number of similar items, like cards or notifications. Jutro Flex gives you access to alignItems, direction, gap, and all the other CSS flex properties. See Storybook for a full list of available props.

Children do not need to be FlexItems but the FlexItem has props for controlling component behavior.

Responsiveness

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 gap="large">
    <SomeElement />
    <SomeElement />
  </FlexItem>
  <FlexItem gap="large">
    <SomeElement />
    <SomeElement />
  </FlexItem>
  <FlexItem gap="large">
    <SomeElement />
    <SomeElement />
  </FlexItem>
</Flex>

You can also use breakpoint props and other responsive features of Jutro. For more information, see our page about responsiveness.

grow

The grow prop specifies how big an item is in relation to other items. It takes a value without any unit because it stands for a proportion.

For example, if you want three items, and the first item to be twice as wide as the remaining two, set grow to 2, 1, and 1 respectively.

<Flex>
  <FlexItem grow={2}>
    <SomeElement />
    <SomeElement />
  </FlexItem>
  <FlexItem grow={1}>
    <SomeElement />
    <SomeElement />
  </FlexItem>
  <FlexItem grow={1}>
    <SomeElement />
    <SomeElement />
  </FlexItem>
</Flex>