Flex

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.
`alignItems`	`"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%"
`justifyContent`	`"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.

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.

Menu Item 1

Menu Item 2

Menu Item 3

<Box borderStyle="sm" paddingX={2} paddingY={3} rounding={3} width={130}>
  <Flex alignItems="center" direction="column" gap={4}>
    <Text>Menu Item 1</Text>
    <Text>Menu Item 2</Text>
    <Text>Menu Item 3</Text>
  </Flex>
</Box>

<Box borderStyle="sm" paddingX={2} paddingY={3} rounding={3} width={130}>
  <Flex alignItems="center" direction="column" gap={4}>
    <Text>Menu Item 1</Text>
    <Text>Menu Item 2</Text>
    <Text>Menu Item 3</Text>
  </Flex>
</Box>

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.

Example: 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.

<Box borderStyle="sm" paddingX={2} paddingY={3} rounding={3} width="100%">
  <Flex alignItems="center" gap={4} width="100%">
    <Button text="Button 1" />
    <Flex.Item flex="grow">
      <Button text="Button 2" />
    </Flex.Item>
    <Button text="Button 3" />
  </Flex>
</Box>

<Box borderStyle="sm" paddingX={2} paddingY={3} rounding={3} width="100%">
  <Flex alignItems="center" gap={4} width="100%">
    <Button text="Button 1" />
    <Flex.Item flex="grow">
      <Button text="Button 2" />
    </Flex.Item>
    <Button text="Button 3" />
  </Flex>
</Box>

Example: 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.

Some text

Some really really really really really really really long text

<Box borderStyle="sm" paddingX={2} paddingY={3} rounding={3} width="100%">
  <Flex alignItems="center" gap={4} width="100%">
    <Flex.Item flexBasis={200}>
      <Text>Some text</Text>
    </Flex.Item>

    <Text>Some text</Text>

    <Flex.Item flexBasis="10em">
      <Text>Some really really really really really really really long text</Text>
    </Flex.Item>
  </Flex>
</Box>

<Box borderStyle="sm" paddingX={2} paddingY={3} rounding={3} width="100%">
  <Flex alignItems="center" gap={4} width="100%">
    <Flex.Item flexBasis={200}>
      <Text>Some text</Text>
    </Flex.Item>
    <Text>Some text</Text>
    <Flex.Item flexBasis="10em">
      <Text>Some really really really really really really really long text</Text>
    </Flex.Item>
  </Flex>
</Box>

Example: 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.

Some really long title text that just keeps going and going and going and going and going and going and going and going and going and going and going and going and going and going and going and going

Try it out!

<Box borderStyle="sm" padding={3} rounding={3}>
  <Flex alignItems="center" gap={3}>
    <Icon accessibilityLabel="Private" icon="lock" />

    <Flex.Item minWidth={0}>
      <Text truncate>Some really long title text that just keeps going and going and going and going and going and going and going and going and going and going and going and going and going and going and going and going</Text>
    </Flex.Item>

    <Badge text="Try it out!" />
  </Flex>
</Box>

<Box borderStyle="sm" padding={3} rounding={3}>
  <Flex alignItems="center" gap={3}>
    <Icon accessibilityLabel="Private" icon="lock" />
    <Flex.Item minWidth={0}>
      <Text truncate>Some really long title text that just keeps going and going and going and going and going and going and going and going and going and going and going and going and going and going and going and going</Text>
    </Flex.Item>
    <Badge text="Try it out!" />
  </Flex>
</Box>

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"

Edit page on GitHub