# Flex

Flex is a component that allows you to easily create a flexible layout.

## Design & usage guidelines

The Flex component facilitates the rendering of multiple child components into a
grid layout with as many rows as needed. Each column of the Flex grid can be
programmed to take the smallest space possible or grow depending on available
space. Once the number of child components exceeds the length of the template
array, new rows will be created to accomodate the extra children, styled
similarily to the children above.

It is also possible to nest grids within each other. This can be helpful when
wanting to apply different grid styles to different groups of children. For
example, nested grids with different `align` and `template` props can be used to
further control the layout of the children.

## Related components

Use [Grid](/components/Grid) to create grid layouts. Using Flex inside of Grid
gives you the ability to achieve complex layouts without needing custom
wrappers.

Use [Content](../Content/Content.md) to evenly space elements in a simple
one-directional layout.


## Props

### Mobile

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `align` | `FlexAlignType` | No | `center` | It works the same way as `alignItems` style with flex. |
| `gap` | `"base" | "large" | "none" | "small" | "smaller" | "smallest"` | No | `base` | The spacing between the children. |
| `template` | `ColumnKeys[]` | No | `[]` | Determine how the children gets laid out on the flex grid. If there are more Children than elements in the template, ... |