import { Meta, Story, Canvas, ArgsTable } from "@storybook/addon-docs";
import { Flex } from "./";
import { Center } from "../Center";
import { Button } from "../../inputs";

<Meta title="Components/Layout/Flex" component={Flex} />

# Flex

Flex is component with display: flex and comes with helpful style shorthand. It renders a div element.

# Import

```
import { Flex } from "@cloudline/cloudline-styled-components"
```

# Usage

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

- flexDirection is direction
- flexWrap is wrap
- flexBasis is basis
- flexGrow is grow
- flexShrink is shrink
- alignItems is align
- justifyContent is justify
- gap is gap

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

<Canvas withSource="open">
  <Story name="Flex">
    <div style={{ backgroundColor: "lightgreen", height: "200px" }}>
      <Center h="100%">
        <Flex justify="center" gap={3}>
          <Button value="Look at me flex" />
          <Button value="FLEX" />
        </Flex>
      </Center>
    </div>
  </Story>
</Canvas>

<ArgsTable story="Flex" />
