Flex
The Flex component can be used to layout its children with Flexbox. The
component can be customized with flexbox props.
More information about Flexbox.
FlexProps
Signature:
export declare type FlexProps<E extends > = <E, >;FlexOwnProps
Signature:
export declare type FlexOwnProps = & & & & ;FlexStyleProps
, , , , | Name | Type | Default | Description |
|---|---|---|---|
order? | .[] | - | Defines order |
flexGrow? | .[] | - | Defines flex grow |
flexShrink? | .[] | - | Defines flex shrink |
flexBasis? | .[] | - | Defines flex basis |
flex? | .[] | - | Defines flex |
flexDirection? | .[] | - | Defines flex direction |
flexWrap? | .[] | - | Defines flex wrap |
flexFlow? | .[] | - | Defines flex flow |
gridColumnStart? | .[] | - | Defines grid column start |
gridColumnEnd? | .[] | - | Defines grid column end |
gridRowStart? | .[] | - | Defines grid row start |
gridRowEnd? | .[] | - | Defines grid row end |
gridColumn? | .[] | - | Defines grid column |
gridRow? | .[] | - | Defines grid row |
gridArea? | .[] | - | Defines grid area |
GridFlexPositionProps
| Name | Type | Default | Description |
|---|---|---|---|
justifySelf? | - | justify self positions | |
alignSelf? | - | align self positions | |
placeSelf? | - | place self positions | |
justifyItems? | - | justify items positions | |
alignItems? | - | align items positions | |
placeItems? | - | place items positions | |
justifyContent? | - | justify content positions | |
alignContent? | - | align content positions | |
placeContent? | - | place content positions |
GapProps
| Name | Type | Default | Description |
|---|---|---|---|
gap? | - | Defines gap | |
rowGap? | - | Defines row gap | |
columnGap? | - | Defines column gap |
LayoutSizeProps
| Name | Type | Default | Description |
|---|---|---|---|
width? | [] | - | CSS width property |
minWidth? | [] | - | CSS min width property |
maxWidth? | [] | - | CSS max width property |
height? | [] | - | CSS height property |
minHeight? | [] | - | CSS min height property |
maxHeight? | [] | - | CSS max height property |
SpacingProps
| Name | Type | Default | Description |
|---|---|---|---|
padding? | - | Defines CSS padding property | |
p? | - | Defines CSS padding property | |
paddingX? | - | Defines CSS x padding property | |
px? | - | Defines CSS x padding property | |
paddingY? | - | Defines CSS y padding property | |
py? | - | Defines CSS y padding property | |
paddingTop? | - | Defines CSS top padding property | |
pt? | - | Defines CSS top padding property | |
paddingRight? | - | Defines CSS right padding property | |
pr? | - | Defines CSS right padding property | |
paddingBottom? | - | Defines CSS bottom padding property | |
pb? | - | Defines CSS bottom padding property | |
paddingLeft? | - | Defines CSS left padding property | |
pl? | - | Defines CSS left padding property | |
margin? | - | Defines CSS margin property | |
m? | - | Defines CSS margin property | |
marginX? | - | Defines CSS x margin property | |
mx? | - | Defines CSS x margin property | |
marginY? | - | Defines CSS y margin property | |
my? | - | Definesy CSS margin property | |
marginTop? | - | Defines CSS top margin property | |
mt? | - | Defines CSS top margin property | |
marginRight? | - | Defines CSS right margin property | |
mr? | - | Defines CSS right margin property | |
marginBottom? | - | Defines CSS bottom margin property | |
mb? | - | Defines bottom margin property | |
marginLeft? | - | Defines CSS left margin property | |
ml? | - | Defines CSS left margin property |
FlexItemStyleProps
| Name | Type | Default | Description |
|---|---|---|---|
flexItem? | - | Determines whether this is a flex item. If true, display: 'flex' style will not be added. |