# Flex

> Native Solid 2 fork. Original documentation and designs © WorkOS; historical posts retain their original context.

```jsx
<Flex gap="3">

	<Box width="64px" height="64px">

		<DecorativeBox />

	</Box>

	<Box width="64px" height="64px">

		<DecorativeBox />

	</Box>

	<Box width="64px" height="64px">

		<DecorativeBox />

	</Box>

	<Box width="64px" height="64px">

		<DecorativeBox />

	</Box>

	<Box width="64px" height="64px">

		<DecorativeBox />

	</Box>

</Flex>
```

## API Reference

This component is based on the `div` element and supports [common margin props](/themes/docs/overview/layout#margin-props).

Use these props to create flex layouts.

| Prop                                                                                                                                                                   | Type                                                    | Default |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ------- |
| `as`Shorthand for changing the default rendered element into a semantically appropriate alternative. Cannot be used in combination with `asChild`.                     | `"div" \| "span"`                                       | `"div"` |
| `asChild`Render one explicit target with merged props and behavior, not a cloned child. Read our [Composition](/primitives/docs/guides/composition) guide for details. | `boolean`                                               | —       |
| `display`                                                                                                                                                              | `Responsive<"none" \| "inline-flex" \| "flex">`         | —       |
| `direction`                                                                                                                                                            | `Responsive<enum>`                                      | —       |
| `align`                                                                                                                                                                | `Responsive<enum>`                                      | —       |
| `justify`                                                                                                                                                              | `Responsive<"start" \| "center" \| "end" \| "between">` | —       |
| `wrap`                                                                                                                                                                 | `Responsive<"nowrap" \| "wrap" \| "wrap-reverse">`      | —       |
| `gap`                                                                                                                                                                  | `Responsive<enum \| string>`                            | —       |
| `gapX`                                                                                                                                                                 | `Responsive<enum \| string>`                            | —       |
| `gapY`                                                                                                                                                                 | `Responsive<enum \| string>`                            | —       |

The following props are shared between [Box](./box), [Flex](./flex), [Grid](./grid), [Container](./container) and [Section](./section) components. Read more about layout components in [Layout](/themes/docs/overview/layout).

| Prop              | Type                         | Default |
| ----------------- | ---------------------------- | ------- |
| `p`               | `Responsive<enum \| string>` | —       |
| `px`              | `Responsive<enum \| string>` | —       |
| `py`              | `Responsive<enum \| string>` | —       |
| `pt`              | `Responsive<enum \| string>` | —       |
| `pr`              | `Responsive<enum \| string>` | —       |
| `pb`              | `Responsive<enum \| string>` | —       |
| `pl`              | `Responsive<enum \| string>` | —       |
| `width`           | `Responsive<string>`         | —       |
| `minWidth`        | `Responsive<string>`         | —       |
| `maxWidth`        | `Responsive<string>`         | —       |
| `height`          | `Responsive<string>`         | —       |
| `minHeight`       | `Responsive<string>`         | —       |
| `maxHeight`       | `Responsive<string>`         | —       |
| `position`        | `Responsive<enum>`           | —       |
| `inset`           | `Responsive<enum \| string>` | —       |
| `top`             | `Responsive<enum \| string>` | —       |
| `right`           | `Responsive<enum \| string>` | —       |
| `bottom`          | `Responsive<enum \| string>` | —       |
| `left`            | `Responsive<enum \| string>` | —       |
| `overflow`        | `Responsive<enum>`           | —       |
| `overflowX`       | `Responsive<enum>`           | —       |
| `overflowY`       | `Responsive<enum>`           | —       |
| `flexBasis`       | `Responsive<string>`         | —       |
| `flexShrink`      | `Responsive<enum \| string>` | —       |
| `flexGrow`        | `Responsive<enum \| string>` | —       |
| `gridArea`        | `Responsive<string>`         | —       |
| `gridColumn`      | `Responsive<string>`         | —       |
| `gridColumnStart` | `Responsive<string>`         | —       |
| `gridColumnEnd`   | `Responsive<string>`         | —       |
| `gridRow`         | `Responsive<string>`         | —       |
| `gridRowStart`    | `Responsive<string>`         | —       |
| `gridRowEnd`      | `Responsive<string>`         | —       |
| `alignSelf`       | `Responsive<enum>`           | —       |
| `justifySelf`     | `Responsive<enum>`           | —       |