> ## Documentation Index
> Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Flex - Web

> Create CSS Flexbox containers.

> [!NOTE]
>
> For development, import `Flex` from
> `@servicetitan/anvil2`. For design, find it in the
> [Anvil2 file](https://www.figma.com/design/xaNQsvRKczoxu7pj0M6QT8/Anvil2-v3).

**Implementation**

flex-playground

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/flex-playground?file=src/App.tsx)

```tsx lines expandable theme={null}
import { Flex, Avatar, Text, Button } from "@servicetitan/anvil2";

function App() {
  return (
    <Flex gap="6">
      <Avatar name="Cory Sparks" size="large" status="online" />
      <Flex direction="column" grow="1">
        <Text variant="headline" el="h2" size="large">
          Cory Sparks
        </Text>
        <Text color="subdued">Electrician | Omaha, NE</Text>
      </Flex>
      <Flex direction="column" gap="2" alignSelf="center" alignItems="flex-end">
        <Button size="small" appearance="primary">
          View Profile
        </Button>
        <Button size="small">Edit Profile</Button>
      </Flex>
    </Flex>
  );
}

export default App;
```

## Common Examples

```tsx theme={null}
import { Flex } from "@servicetitan/anvil2";

const ExampleComponent = () => (
  <Flex direction="column">{/* add content here ... */}</Flex>
);
```

### Creating Flexbox layouts

The Anvil2 `Flex` component makes it easy to create layouts using [CSS Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) properties. Under the hood, a flex is just an HTML div element with `display: flex` applied. Use the props listed below to apply other CSS Flexbox properties to the container.

Note that a `Flex` is always a container, but can also be used as a flex item by wrapping it in another `Flex`, or a different component that includes `display: flex`, such as [Card](https://anvil.servicetitan.com/docs/components/card/react-native.md), or even as a grid item if it is a child of a [Grid](https://anvil.servicetitan.com/docs/components/grid/code/) or other element with `display: grid`.

## Best Practices

* The [Layout](https://anvil.servicetitan.com/docs/components/layout/code/) component should be used to create the overall column structure of a page's content.
* Use the `Flex` component to create [CSS Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) containers within the page content.

**Flex Container Props**

```tsx theme={null}
<Flex
  direction="row"
  alignItems="stretch"
  justifyContent="flex-start"
  gap="4"
  columnGap="2"
  rowGap="2"
  alignContent="stretch"
  placeContent="center"
  placeItems="center"
  inline={false}
/>
```

## `Flex` Container Props

In addition to the props listed in the tables below, the `Flex` component can accept any valid HTML `div` props.

Other than the gap and responsive props, each of the props listed corresponds to a CSS property.

**alignContent** `CSSProperties[alignContent]`

**alignItems** `CSSProperties[alignItems]` (default: stretch)

**columnGap** `"0" | "half" | "1" | "2" | "3" | "4" | "5" | "6" | "8" | "12" | "13" | "14"`

Applies `column-gap` CSS property. See
[Spacing](https://anvil.servicetitan.com/docs/foundations/spacing.md)

**direction** `CSSProperties[flexDirection]` (default: row)

**gap** `"0" | "half" | "1" | "2" | "3" | "4" | "5" | "6" | "8" | "12" | "13" | "14"`

Applies `gap` CSS property. See [Spacing](https://anvil.servicetitan.com/docs/foundations/spacing.md)

**inline** `boolean`

Applies `display: inline-flex` CSS property.

**justifyContent** `CSSProperties[alignContent]`

**placeContent** `CSSProperties[placeContent]`

**placeItems** `CSSProperties[placeItems]`

**rowGap** `"0" | "half" | "1" | "2" | "3" | "4" | "5" | "6" | "8" | "12" | "13" | "14"`

Applies `row-gap` CSS property. See [Spacing](https://anvil.servicetitan.com/docs/foundations/spacing.md)

**wrap** `CSSProperties[flexWrap]`

Applies `flex-wrap` CSS property.

**Flex Item Props**

```tsx theme={null}
<Flex
  alignSelf="center"
  basis="auto"
  flex="0 1 auto"
  grow={1}
  shrink={1}
  order={0}
  placeSelf="center"
/>
```

## `Flex` Item Props

These props are used to configure the `Flex` component as a flex item (with a parent flex container).

**alignSelf** `CSSProperties[alignSelf]`

Can also be used for grid item `Flex`.

**basis** `CSSProperties[flexBasis]`

**flex** `CSSProperties[flex]` (default: 0 1 auto)

**grow** `CSSProperties[flexGrow]`

**order** `CSSProperties[order]`

Can also be used for grid item `Flex`.

**placeSelf** `CSSProperties[placeSelf]`

Can also be used for grid item `Flex`.

**shrink** `CSSProperties[flexShrink]`

Can also be used for grid item `Flex`.

**Grid Item Props**

```tsx theme={null}
<Flex
  gridArea="header"
  gridColumn="1 / 3"
  gridColumnEnd="3"
  gridColumnStart="1"
  gridRow="1 / 2"
  gridRowEnd="2"
  gridRowStart="1"
  justifyItems="start"
  justifySelf="start"
/>
```

## `Flex` Grid Item Props

These props are used to configure the `Flex` component as a grid item (with a parent [Grid](https://anvil.servicetitan.com/docs/components/grid/code) container).

**gridArea** `CSSProperties[gridArea]`

**gridColumn** `CSSProperties[gridColumn]`

**gridColumnEnd** `CSSProperties[gridColumnEnd]`

**gridColumnStart** `CSSProperties[gridColumnStart]`

**gridRow** `CSSProperties[gridRow]`

**gridRowEnd** `CSSProperties[gridRowEnd]`

**gridRowStart** `CSSProperties[gridRowStart]`

**justifyItems** `CSSProperties[justifyItems]`

**justifySelf** `CSSProperties[justifySelf]`

**Responsive Flex Props**

```tsx theme={null}
<Flex
  sm={{ direction: "column" }}
  md={{ direction: "row" }}
  lg={{ gap: "4" }}
  xl={{ alignItems: "center" }}
  xxl={{ justifyContent: "space-between" }}
/>
```

## Responsive `Flex` Props

The following props accept an object that allows any of the props listed in the table above, and applies them to the specified breakpoint (and above).

**sm** `FlexProps`

`>=640px`

**md** `FlexProps`

`>=768px`

**lg** `FlexProps`

`>=1024px`

**xl** `FlexProps`

`>=1280px`

**xxl** `FlexProps`

`>=1536px`


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.