FlexItem
Responsive
Many of the properties for FlexItem can be responsive:
- Provide an array of
breakpoints
, which will be used in the (min-width) media queries used for responsive properties. - 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').
- 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. - 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:
- When the viewport is less than 800px wide, the third item will display next to the second one.
- 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>