# 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](../Grid/Grid.md) 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

### Web

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `template` | `ColumnKeys[]` | Yes | — | Determine how the children gets laid out  **Supported keys** - `"grow"` - Grows to the space available. If all childr... |
| `align` | `"center" | "end" | "start"` | No | `center` | Adjusts the alignment of the Flex children. |
| `direction` | `Direction` | No | `row` | The direction of the content. |
| `gap` | `"base" | "extravagant" | "large" | "larger" | "largest" | "minuscule" | "none" | "slim" | "small" | "smaller" | "smallest"` | No | `base` | The spacing between the children. |