Flex

View source on GitHub

Flex is a layout component with a very limited subset of the props available to Box and a few special props of its own.

Use this component for flex layouts, especially when even spacing between elements is desired (see the 'gap' property!).

Props

Component props
Name
Type
Default
alignContent
"start" | "end" | "center" | "between" | "around" | "evenly" | "stretch"
"stretch"

Aligns the flex container's lines within when there is extra space in the cross axis, similar to how justify-content aligns individual items within the main axis.

"start" | "end" | "center" | "baseline" | "stretch"
"start"

Defines the default behaviour for how flex items are laid out along the cross axis on the current line. Think of it as the justify-content version for the cross axis (perpendicular to the main axis).

alignSelf
"auto" | "start" | "end" | "center" | "baseline" | "stretch"
"stretch"

Allows the default alignment (or the one specified by align-items) to be overridden for individual flex items.

children
React.Node
-
direction
"row" | "column"
"row"

Establishes the main axis, thus defining the direction flex items are placed in the flex container.

flex
"grow" | "shrink" | "none"
"shrink"

Defines how a flex item will be sized. "grow", equivalent to "flex: 1 1 auto", will size the Flex relative to its parent, growing and shrinking based on available space. "shrink", equivalent to "flex: 0 1 auto" (the browser default), allows the Flex to shrink if compressed but not grow if given extra space. Finally, "none", equivalent to "flex: 0 0 auto", preserves the Flex's size based on child content regardless of its container's size.

gap
0 .. 12
0

Defines spacing between each child along the main axis.

height
number | string
-

Use numbers for pixels: height={100} and strings for percentages: height="100%"

"start" | "end" | "center" | "between" | "around" | "evenly"
"center"

Defines the alignment along the main axis. It helps distribute extra free space left over when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.

maxHeight
number | string
-
maxWidth
number | string
-

Use numbers for pixels: maxWidth={100} and strings for percentages: maxWidth="100%"

minHeight
number | string
-

Use numbers for pixels: minHeight={100} and strings for percentages: minHeight="100%"

minWidth
number | string
-

Use numbers for pixels: minWidth={100} and strings for percentages: minWidth="100%"

width
number | string
-

Use numbers for pixels: width={100} and strings for percentages: width="100%"

wrap
boolean
false

By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap onto multiple lines, from top to bottom.

Subcomponents

Flex.Item Props

Flex.Item subcomponent props
Name
Type
Default
alignSelf
"auto" | "start" | "end" | "center" | "baseline" | "stretch"
"stretch"

Allows the default alignment (or the one specified by align-items) to be overridden for individual flex items.

children
React.Node
-
flex
"grow" | "shrink" | "none"
"shrink"

Defines how a flex item will be sized. "grow", equivalent to "flex: 1 1 auto", will size the Flex.Item relative to its parent, growing and shrinking based on available space. "shrink", equivalent to "flex: 0 1 auto" (the browser default), allows the Flex.Item to shrink if compressed but not grow if given extra space. Finally, "none", equivalent to "flex: 0 0 auto", preserves the Flex.Item's size based on child content regardless of its container's size.

flexBasis
number | string
-

Defines the initial main size of the flex item. Use numbers for pixels: flexBasis={100} and strings for other units: flexBasis="100vh".

minWidth
number | string
-

Use numbers for pixels: minWidth={100} and strings for percentages: minWidth="100%". Can be used to fix overflowing children; see the example to learn more.

Variants

Flex Layout

Flex is strictly for flex layouts. If you're new to flex layout, please read the excellent CSS-Tricks guide to flexbox.

justifyContent="start", alignItems="start"
justifyContent="start", alignItems="end"
justifyContent="start", alignItems="center"
justifyContent="start", alignItems="baseline"
justifyContent="start", alignItems="stretch"
justifyContent="end", alignItems="start"
justifyContent="end", alignItems="end"
justifyContent="end", alignItems="center"
justifyContent="end", alignItems="baseline"
justifyContent="end", alignItems="stretch"
justifyContent="center", alignItems="start"
justifyContent="center", alignItems="end"
justifyContent="center", alignItems="center"
justifyContent="center", alignItems="baseline"
justifyContent="center", alignItems="stretch"
justifyContent="between", alignItems="start"
justifyContent="between", alignItems="end"
justifyContent="between", alignItems="center"
justifyContent="between", alignItems="baseline"
justifyContent="between", alignItems="stretch"
justifyContent="around", alignItems="start"
justifyContent="around", alignItems="end"
justifyContent="around", alignItems="center"
justifyContent="around", alignItems="baseline"
justifyContent="around", alignItems="stretch"

With a limited set of props that only relate to flex layouts, Flex is useful for separating layout from other concerns to prevent overloaded Box usage.

Applying flex properties to children

When using the 'gap' property, Flex wraps each child in a Flex.Item sub-component. If one of more of those children need custom flex properties, you can use Flex.Item directly.

Initial item width using flexBasis

If an item needs a different width in the flex layout than the content would otherwise indicate, flexBasis can be used.

Overflowing children and minWidth

Extra-wide children can sometimes overflow the Flex parent container, breaking the layout (and skipping truncation, if applicable).
To fix this, simply wrap the wide child in Flex.Item with minWidth={0}. Voila!

For more info, check out this very helpful blog post.

Edit page on GitHub