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.