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.
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 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 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).Can also be used for grid item Flex.
flex
CSSProperties[flex]
default:"0 1 auto"
Can also be used for grid item Flex.
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).gridColumn
CSSProperties[gridColumn]
gridColumnEnd
CSSProperties[gridColumnEnd]
gridColumnStart
CSSProperties[gridColumnStart]
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).
