FlexLayout
#
This component creates a div
with display: flex
, and permits customizing more css flex properties with props. It should be used with FlexItem
.
#
Example#
PropsName | Type | Default | Required | Description |
---|---|---|---|---|
flexDirection | FlexDirection | Globals | No | See mozilla doc. | |
flexWrap | FlexWrap | Globals | No | See mozilla doc. | |
flexFlow | MixProperties<FlexDirection, FlexWrap> | Globals | No | See mozilla doc. | |
justifyContent | JustifyContent |MixProperties<'safe', JustifyContent> |MixProperties<'unsafe', JustifyContent> |Globals | No | See mozilla doc. | |
alignItems | AlignItems |MixProperties<'safe', AlignItems> |MixProperties<'unsafe', AlignItems> |Globals | No | See mozilla doc. | |
alignContent | AlignContent |MixProperties<'safe', AlignContent> |MixProperties<'unsafe', AlignContent> |Globals | No | See mozilla doc. | |
fullHeight | boolean | No | If true , will set height: 100% . |
Globals:
'inherit' | 'initial' | 'unset'
FlexDirection:'row' | 'row-reverse' | 'column' | 'column-reverse'
FlexWrap:'nowrap' | 'wrap' | 'wrap-reverse'
JustifyContent:'flex-start' | 'flex-end' | 'start' | 'end' | 'left' | 'right' | 'center' | 'space-between' | 'space-around' | 'space-evenly'
AlignItems:'flex-start' | 'flex-end' | 'start' | 'end' | 'stretch' | 'self-start' | 'self-end' | 'center' | 'baseline'
AlignContent:'flex-start' | 'flex-end' | 'start' | 'end' | 'normal' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch'