Components

FlexItem

FlexItem is used within Flex to lay out other components in your app.

Examples #

Import Syntax #

import Flex, { FlexItem } from 'mineral-ui/Flex';

Note

Layout components, like FlexItem, have no visual style. They are rendered with background colors and borders in the examples below for illustrative purposes.

Basic Usage #

Use Flex and FlexItem to lay out components throughout your app. They can be arranged side-by-side, stacked on top of one another, sized proportionally, and lots more as illustrated in the further examples below.

A
B
C
<Flex>
  <FlexItem>A</FlexItem>
  <FlexItem>B</FlexItem>
  <FlexItem>C</FlexItem>
</Flex>

Grow #

By default, FlexItems will not expand to fill their container (grow={0}). Setting the grow prop to a positive number allows you to determine the rate at which they will expand, relative to their siblings.

For the simplest case where each item expands at the same rate, set grow={1} on all FlexItems, as in the first row below. If different values are set, then they grow proportionally. For example, the total of values for the items in the third row below is 6. So the first item will fill 3/6 or 50% of the available space, the second item will fill 2/6 or ~33%, and the last item will fill 1/6 or ~17%.

1
1
1
1
0
0
3
2
1
<DemoLayout>
  <Flex>
    <FlexItem grow={1}>1</FlexItem>
    <FlexItem grow={1}>1</FlexItem>
    <FlexItem grow={1}>1</FlexItem>
  </Flex>
  <Flex>
    <FlexItem grow={1}>1</FlexItem>
    <FlexItem grow={0}>0</FlexItem>
    <FlexItem grow={0}>0</FlexItem>
  </Flex>
  <Flex>
    <FlexItem grow={3}>3</FlexItem>
    <FlexItem grow={2}>2</FlexItem>
    <FlexItem grow={1}>1</FlexItem>
  </Flex>
</DemoLayout>

Shrink #

Shrink is the opposite of grow, but uses the same proportionality mechanic. By default, FlexItems shrink at an equal rate, e.g. shrink={1}.

3
2
1
<Flex>
  <FlexItem shrink={3} width="100%">3</FlexItem>
  <FlexItem shrink={2} width="100%">2</FlexItem>
  <FlexItem shrink={1} width="100%">1</FlexItem>
</Flex>

Min Width #

Truncated content inside FlexItem will not truncate as expected, because flex items have a default minWidth of auto. You can enable truncation by setting minWidth to 0 on the wrapping FlexItem (why does this work?).

<Flex>
  <FlexItem><Button>Short Text</Button></FlexItem>
  <FlexItem><Button>Short Text</Button></FlexItem>
  <FlexItem minWidth={0}>
    <Select placeholder="Super long example of text that is specifically formed to force truncation, when minWidth is set to 0, even when the viewport is rather wide" data={data} />
  </FlexItem>
</Flex>

Align Self #

Flex's alignItems prop will align its items along the cross axis. The alignSelf prop allows an override of that value for specific items.

stretch
start
center
end
stretch
start
center
end
() => {
  const propValues = [
    'stretch', // same as default from Flex
    'start',
    'center',
    'end'
  ];

  const renderFlexItems = () =>
    propValues.map((value, index) => (
      <FlexItem alignSelf={value} key={index}>
        {value}
      </FlexItem>
    ));

  return (
    <DemoLayout>
      <Flex>{renderFlexItems()}</Flex>
      <Flex direction="column">{renderFlexItems()}</Flex>
    </DemoLayout>
  );
}

Flex Props #

FlexItem can also be a Flex. Setting the flex prop to true will compose FlexItem from Flex, allowing it to accept any of Flex's props. This can reduce repetition when a layout requires nested flex containers and flexed items.

A
B
C
D
<Flex>
  <FlexItem flex alignItems="center" grow={1}>
    <FlexItem>A</FlexItem>
    <FlexItem>B</FlexItem>
  </FlexItem>
  <FlexItem>
    <Box>C</Box>
    <Box>D</Box>
  </FlexItem>
</Flex>

Box Props #

Because FlexItem composes the Box component, it accepts any of Box's props. Note that this is still true when using the flex prop, as Flex also composes Box.

A
B
C
<Flex>
  <FlexItem>A</FlexItem>
  <FlexItem as="span" marginRight="auto" padding="lg">B</FlexItem>
  <FlexItem>C</FlexItem>
</Flex>

Responsive #

Many of the properties for FlexItem can be responsive:

  1. Provide an array of breakpoints, which will be used in the (min-width) media queries used for responsive properties.
  2. Those breakpoint values can either be a number (converted to px) or a key from the theme (e.g. the default mineralTheme has 'narrow', 'medium', and 'wide').
  3. For each responsive property, instead of passing a single value, pass an array of values that is one longer than the breakpoints array. The first value applies when no breakpoint matches, the second value applies when the first breakpoint matches, and so on.
  4. If you don't need to change a value at a breakpoint, you can pass null to skip that breakpoint for that property.

The code in the example below exhibits the following behavior:

  1. When the viewport is less than 800px wide, the third item will display next to the second one.
  2. When the viewport is at least 800px wide, the third item will be pushed to the left edge of the container.

Heads Up

Notice there is no breakpoints prop defined for each FlexItem below. Flex will automatically pass along any breakpoints defined to its FlexItem children. If a FlexItem has its own breakpoints, those will take precedence.

A
B
C
<Flex breakpoints={[800]}>
  <FlexItem>A</FlexItem>
  <FlexItem>B</FlexItem>
  <FlexItem marginLeft={['sm', 'auto']}>C</FlexItem>
</Flex>

API & Theme #

FlexItem Props #

The FlexItem component takes the following React props.

NameTypeDefaultDescription
alignSelf

Align item along the cross axis [Responsive-capable]

breakpointsArray<number | string>

Media query (min-width) breakpoints along which to apply props marked "[Responsive-capable]"

flexboolean

When true, FlexItem composes Flex; when false, it composes Box

grownumber | Array<number | null>0

Grow factor along the main axis (see example) [Responsive-capable]

minWidthnumber | string | Array<number | string | null>

Set the minimum width (see example) [Responsive-capable]

shrinknumber | Array<number | null>1

Shrink factor along the main axis (see example) [Responsive-capable]

Note

In addition to the props above, FlexItem also accepts all props for Box (and for Flex, if flex is true).

Undocumented properties will be applied to the root element.

Usage #

When/How to Use #

FlexItem, together with Flex, provides an easy way to align components next to or on top of one another. With many alignment options and optionally responsive properties, it is powerful and flexible enough to be the foundation of your app's layout.

Best Practices #

Use FlexItem within Flex to align components relative to one another.

Products
About
Contact

Don't use FlexItem within Flex to align components to a columnar layout. Use GridItem within Grid, instead.

Don't display content directly inside FlexItem. Wrap FlexItem around components instead.

1: Shipping Info
2: Billing Info
3: Confirm Order