# Flex

Flex is [Box](/box) with `display: flex` and comes with helpful style shorthand. It
renders a `div` element by default.

## Import

```js
import { Flex } from "@blockstack/ui";
```

## Usage

Using the Flex components, here are some helpful shorthand props:

- `flexDirection` is `direction`
- `flexWrap` is `wrap`
- `alignItems` is `align`
- `justifyContent` is `justify`

While you can pass the verbose props, using the shorthand can save you some
time.

```jsx
<Flex align="center">
  <Flex bg="green.50" align="flex-end">
    <Text>Box 1</Text>
  </Flex>
  <Flex bg="blue.50" size="150px" align="center" justify="center">
    <Text textAlign="center" bg="pink.50">
      Box 2
    </Text>
  </Flex>
  <Box>
    <Text bg="tomato" color="white">
      Box 3
    </Text>
  </Box>
</Flex>
```
