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.

OverviewProperties

FlexProps

Signature:

export declare type FlexProps<E extends > = <E, >;

FlexOwnProps

Signature:

export declare type FlexOwnProps = & & & & ;

FlexStyleProps

extends, , , ,

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.