Flex
Compose elements in a flex container
Polymorphic
Source
Docs
Package
Usage
Gap
Supported props
Responsive props
Flex
component props can have responsive values the same way as other style props:
Difference from Group and Stack
Flex
component is an alternative to Group and Stack.
Flex
is more flexible, it allows creating both horizontal and vertical flexbox layouts, but requires more configuration.
Unlike Group and Stack Flex
is polymorphic and supports responsive props.
Browser support
Flex
uses flexbox gap to add spacing between children. In older browsers, Flex
children may not have spacing. You can install PostCSS flex-gap-polyfill to add support for older browsers.