Flex

The Flex component manages the layout of your application elements by utilizing CSS Flexbox. The properties for the Flex component are built on top of those from CSS Flexbox. Flex refers to the relationship between containers and items, similar to the Grid component. Containers wrap items, and items can also be containers. This relationship builds the structure of the layout. Flex layouts are largely 1-dimensional designs whereas Grid layouts offer control in a 2-dimensional format.

For more information on how to use the features and props for this component, check out the developer documentation.

Direction

The direction property determines which axis will be the main axis. By default, this is set to row, meaning the horizontal axis will be the main axis that content will display along. If direction is set to column, then the vertical axis will become the main axis.

Gap and padding

The gap property defines how much space should exist between items within a container. It accepts a multiplier that sets the gaps between items relative to the base spacing value in the Theme. The gap prop will set the spacing for both rows and columns if your Flex items wrap to a new line. For more control, you can separately set the colGap and rowGap properties. The gap property is overwritten by rowGap and colGap if they are provided.

For adding padding within the Flex container, you can pass any valid CSS shorthand notation for padding to the pad prop. The values passed to this prop should also be multipliers for the base spacing value in the Theme.

Justify

The justify property defines how items within a container should be aligned along the main axis.

Wrap

The wrap property determines how to handle items that may span past the bounds of the container. By default, items will simply extend past those bounds.

Align items

The alignItems property defines how items within a container should be aligned along the cross axis (the axis perpendicular to the main axis).

Align content

The alignContent property defines how lines of items along the main axis of a container are aligned. Most values for this prop are only honored if there are multiple rows or columns depending on what the direction is set to.

Align self

The alignSelf property allows an item to override the alignItem property that is set on a container.

Grow

The grow property defines how an item fills any extra space within the container. If this prop is set to 1 on a single item, then that item will fill as much space within the main axis while maintaining all other items' sizes. If multiple items within the same container have values set on the grow property, then their sizes will be determined by the relative difference in the values. For example, if most items are set to grow = 1, and a few of them are set to grow = 2, then those with grow = 2 will be twice the size of the others.

Note: Negative values are not allowed for the grow property.

Shrink

The shrink property defines how an item resizes to allow more space for other items in a container. If this property is set to 1 on a single item, then that item will shrink enough within the main axis to allow other items to fill the space they need. If multiple items within the same container have values set on the shrink property, then their sizes will be determined by the relative difference in the values. For example, if most items are set to shrink = 1, and a few of them are set to shrink = 2, then those with shrink = 2 will be half the size of the others.

Note: Negative values are not allowed for the shrink property.

The Flex component is built to handle responsive design out-of-the-box. There are a set of breakpoint properties, one for each breakpoint represented below. For each breakpoint, you can override any of the properties of a container or item in order to control the behavior of the layout across various screen sizes. Try adjusting the screen size to visualize this feature.

BreakpointValueValue in pixels
xs0em0px
sm31.25em500px
md62.5em1000px
lg93.75em1500px
xl125em2000px
NameTypeDefaultDescription
asElementTypeHTML tag or React Component to render the component as.
childrenReactNodeContent for either a container or item.
classNamestringAdditional CSS classes.
container
FlexContainerProps |true 
forwardedAsElementTypeHTML tag or React Component to finally render the component as.
itemFlexItemProps
lgBaseFlexPropsOverride props at large screen sizes and above.
mdBaseFlexPropsOverride props at medium screen sizes and above.
refRef<Element>Ref for the flex element.
smBaseFlexPropsOverride props at small screen sizes and above.
xlBaseFlexPropsOverride props at extra large screen sizes and above.
xsBaseFlexPropsOverride props at extra small screen sizes and above.