Import
import { Flex } from 'styled-system/jsx'Usage
Used to manage flex layouts
Loading example...
Direction
Use the direction or flexDirection prop to change the direction of the flex
Loading example...
Align
Use the align or alignItems prop to align the children along the cross axis.
Loading example...
Justify
Use the justify or justifyContent prop to align the children along the main
axis.
Loading example...
Order
Use the order prop to change the order of the children.
Loading example...
Auto Margin
Apply margin to a flex item to push it away from its siblings.
Loading example...
Wrap
Use the wrap or flexWrap prop to wrap the children when they overflow the
parent.
Loading example...
Props
The Flex component accepts the following utility props in addition to style and factory props:
| Prop | Type | Description |
|---|---|---|
align | SystemStyleObject['alignItems'] | The alignment of the children along the cross axis. |
direction | SystemStyleObject['flexDirection'] | The flex direction. |
justify | SystemStyleObject['justifyContent'] | The alignment of the children along the main axis. |
wrap | SystemStyleObject['flexWrap'] | The wrapping behavior of the children. |
basis | SystemStyleObject['flexBasis'] | The flex behavior of the children. |
grow | SystemStyleObject['flexGrow'] | The flex grow behavior of the children. |
shrink | SystemStyleObject['flexShrink'] | The flex shrink behavior of the children. |