Flex
Flex is used to build layouts using Flexbox without writing custom CSS.
- Use Flex when you want to arrange elements along a single axis, e.g.:
- Vertically align items in a row
- Distribute items in a column or row
- Use Grid when you want to arrange elements along the horizontal and vertical axes, e.g.:
- You need columns or rows of a specific size
- It’s best to learn the basic spec before learning how it is applied through the Flex component
- We have linked to a few resources to help learn Flexbox
- It is important to first understand that flexbox places items in one direction, which is called the “main axis” and which is controlled by the
flexDirectionproperty
- Flex implements
Boxand accepts all the same properties - As with Box, numerical spacing values passed to Flex and FlexItem will be interpreted as increments of our spacing unit
- Shorthand properties like
flex,flex-flow,gapplace-items, andplace-contentare not currently supported FlexItemis a re-export of Box and equivalent in every way; it exists to help differentiate conceptually between a flex item and its contents- Using inline elements as flex items (e.g. buttons, icons, tags) can lead to unexpected behavior; FlexItem is intended to act as a wrapper around this content, though any block-level element—including Box—can serve the same purpose
Use the flexDirection prop to set the flex-direction, or the “main” axis along which flex items will be arranged. Defaults to row.
Specifies how content will wrap to a new line. The default value of nowrap will attempt to place all items on the same line.
Use rowGap and columnGap to add a gap between flex items. It will not add space to the outer edges. Numerical spacing values will be interpreted as increments of our spacing unit.
Use justifyContent to specify how items are placed along the main axis.
Use alignItems to specify how items are placed along the cross axis.
Similar to alignItems (above), alignSelf specifies how an individual flex item is placed along the cross axis.
Use alignContent to specify how items are aligned along the cross axis when the container wraps to another line.
This property only has an effect when flexWrap is set to either wrap or wrap-reverse.
Use flexGrow to specify how items should grow to fill the flex container. Use a unitless number to distribute space fractionally among the flex items.
In the example below, the width of the flex items are set to 50px, leaving the rest of the space available. The extra space is fractionally distributed among the three flex items: 1 fraction for the first, 2 fractions for the second, and 3 fractions for the third.
Use flexShrink to specify how items should shrink to fit the flex container. In practice, this property is often used alongside flexGrow and flexBasis.
In the example below, the width of both flex items is set to 60%, which is 20% too wide for the container. Using flexShrink={3} instructs the second item to shrink more than the first.
Use flexBasis to specify the size of an element before the remaining space is distributed among the flex items. Any CSS measurement is valid.Defaults to auto, which uses the value from the height or width properties.
In the example below, the first and third flex items have a basis specified, and the second will collapse down to fit its min-content.Adding flexGrow=1 to the second item will allow it to grow to occupy the remaining space.
Content is typically rendered based on the order of the HTML markup.The order property can be used to visually change the order in which flex items are displayed.
Use this property with caution and keep visual rearrangement to a minimum:
- Content should generally be authored so that it makes sense for screen readers
- Tab indexes will not be reset when items are reordered with
order, which can be confusing for keyboard users
Flex inherits all of its props from Box. These props are many and repetitive to list, so check out the Flex props on Storybook.
| Name | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | The content of the Flex | |
| component | ElementType | div | Alternative component used to render, e.g. article, section |