Flex

Overview

The Flex component extends the Box utility component and provides a CSS flexbox container alongside flexbox properties.

When to use:

  • Want to lay a collection of items out in one direction or another.
  • Want to control the dimensions of the items in that one dimension, or control the spacing between items.
  • Justify or vertically align items as needed.
  • Mostly used for simple one dimensional layouts.

Implementation

Edit the code below to see your changes live!

<Flex
  alignContent="stretch"
  alignItems="stretch"
  flexDirection="row"
  flexWrap="nowrap"
  justifyContent="flex-start"
>
  <FlexItem
    alignSelf="auto"
    flexBasis="auto"
    flexGrow={0}
    flexOrder={0}
    flexShrink={1}
  >
    <ExampleBox>Item 1</ExampleBox>
  </FlexItem>
  <FlexItem
    alignSelf="auto"
    flexBasis="auto"
    flexGrow={0}
    flexOrder={0}
    flexShrink={1}
  >
    <ExampleBox>Item 2</ExampleBox>
  </FlexItem>
  <FlexItem
    alignSelf="auto"
    flexBasis="auto"
    flexGrow={0}
    flexOrder={0}
    flexShrink={1}
  >
    <ExampleBox>Item 3</ExampleBox>
  </FlexItem>
  <FlexItem
    alignSelf="auto"
    flexBasis="auto"
    flexGrow={0}
    flexOrder={0}
    flexShrink={1}
  >
    <ExampleBox>Item 4</ExampleBox>
  </FlexItem>
</Flex>

Props

Prop name
Type
Default
Description
alignContentstretch | center | flex-start | flex-end | space-between | space-aroundstretch

Modifies the behavior of the flex-wrap property on the vertical axis. Same as the align-content CSS property.

alignItemsnormal | stretch | center | flex-start | flex-end | baselinestretch

Specifies the default alignment for items in a flex container. Same as the align-items CSS property.

flexColumnGapstring

Sets the size of the gap between flex columns. Same as the column-gap CSS property.

flexDirectionrow | column | row-reverse | column-reverserow

Determines the direction of flex items. Same as the flex-direction CSS property.

flexGapstring

Controls the spacing between flex items. Same as the gap CSS property.

flexRowGapstring

Sets the size of the gap between flex rows. Same as the row-gap CSS property.

justifyContentcenter | flex-start | flex-end | left | right | normal | space-between | space-around | space-evenly | stretchflex-start

Modifies the behavior of the flex-wrap property on the horizontal axis. Same as the justify-content CSS property.

flexWrapnowrap | wrap | wrap-reversenowrap

Controls whether flex items should wrap or not. Same as the flex-wrap CSS property.

Props ending with * are required

Inherited

Expand

Box Props

Expand

Display Props

Expand

Margin Props

Expand

Padding Props

Do's and Don'ts

Do
Use Flex when focusing on 1-dimensional or content flow.
Use FlexItem when children need specific flex properties.
Use CSS-Tricks complete guide to flexbox.
Don't
Don’t use Flex when focusing on 2-dimensional flow. Use Grid instead.
Don't use FlexItem if children don't have specific flex properties.