# Flex and FlexItem

## Flex

The `Flex` component creates a flex container for its children FlexItem components to be laid out in using the flexible box layout.

The amount of space between each flex item can either be set with `gutterSize` or `gap`. The `gap` option works better for responsive layouts that will switch the flex-direction from column to row.

## FlexItem

Children of the Flex component, they are the items that are laid out in the flex container.

They can be set to grow or shrink, depending on how much of the available space you want the child element to take up. By default they are set to grow.