FlexItem

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>