Flex
Compose elements in a flex container
Import
Source
Docs
Package
Usage
Gap
xs
sm
md
lg
xl
Supported props
Prop | CSS Property | Theme key |
---|---|---|
gap | gap | theme.spacing |
rowGap | rowGap | theme.spacing |
columnGap | columnGap | theme.spacing |
align | alignItems | – |
justify | justifyContent | – |
wrap | flexWrap | – |
direction | flexDirection | – |
Responsive props
Flex
component props can have responsive values the same way as other style props:
Flex component props
Name | Type | Description |
---|---|---|
align | SystemProp<AlignItems> | align-items CSS property |
columnGap | SystemProp<SpacingValue> | column-gap CSS property |
direction | SystemProp<FlexDirection> | flex-direction CSS property |
gap | SystemProp<SpacingValue> | gap CSS property |
justify | SystemProp<JustifyContent> | justify-content CSS property |
rowGap | SystemProp<SpacingValue> | row-gap CSS property |
wrap | SystemProp<FlexWrap> | flex-wrap CSS property |