Flex

The Flex component gives you quick access to flexbox layout. In some design libraries it is called "Stack".

Wrap:

Code Example

<Flex row>
  <Button lg>Button 1</Button>
  <Button>Button 2</Button>
  <Button xs>Button 3</Button>
  <Button>Button 4</Button>
  <Button sm>Button 5</Button>
</Flex>

Components

The Flex components include the following:

Flex
FlexItem

Flex

Flex can be customize with the following props.

Prop	Type	Description
`is`	string	Allows setting the HTML tag.
`join`	boolean	Use inside Join to group items together.
`flex`	boolean	Allows disabling the `flex` styles.
`flex-1`	boolean	Allows the item to grow and shrink as needed, ignoring its initial size.
`flex-auto`	boolean	Allows the item to grow and shrink, taking into account its initial size.
`flex-initial`	boolean	Allows the item shrink but not grow, taking into account its initial size.
`flex-none`	boolean	Prevents the item from growing or shrinking.
`grow`	boolean	Allows the flex item to grow to fill any available space.
`direction`	string	Allows setting the flex direction to one of the below props.
`row`	boolean	Sets flex direction to row.
`col`	boolean	Sets flex direction to col.
`reverse`	boolean	Sets flex direction to col-reverse or row-reverse.
`wrap`	boolean	Enables flex-wrap.
`no-wrap`	boolean	Disables flex-wrap.
`wrap-reverse`	boolean	Enables reverse wrap.

Flex props are intentionally limited to the above set. We don't want to load every flex utility into your app. Manually use TailwindCSS utility classes to to keep your bundle size smaller:

Gap control gutters between grid and flexbox items.
Justify Content control position along a container's main axis.
Align Content control rows position in multi-row flex containers.
Align Items control position along a container's cross axis.
Align Self control how an individual flex or grid item is positioned along its container's cross axis.

FlexItem

The FlexItem component has the same props as Flex, but the flex prop is set to false, by default.

Prev Drawer

Next Footer