Flex – Code

Implementation
Flex Container Props
Flex Item Props
Grid Item Props
Responsive Flex Props

Common Examples

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 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, or even as a grid item if it is a child of a Grid or other element with display: grid.

Best Practices

The Layout component should be used to create the overall column structure of a page’s content.
Use the Flex component to create CSS Flexbox containers within the page content.

<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

direction

CSSProperties[flexDirection]

default:"row"

gap

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

Applies gap CSS property. See Spacing

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

wrap

CSSProperties[flexWrap]

Applies flex-wrap CSS property.

<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.

<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 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]

<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).

FlexProps

>=640px

FlexProps

>=768px

FlexProps

>=1024px

FlexProps

>=1280px

xxl

FlexProps

>=1536px

​Common Examples

​Creating Flexbox layouts

​Best Practices

​Flex Container Props

​Flex Item Props

​Flex Grid Item Props

​Responsive Flex Props

Common Examples

Creating Flexbox layouts

Best Practices

`Flex` Container Props

`Flex` Item Props

`Flex` Grid Item Props

Responsive `Flex` Props