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

import { FlexLayout, FlexItem } from 'la-danze-ui';

function App() {

return (

<FlexLayout flexDirection="column" flexWrap="wrap">

<FlexItem />

...

</FlexLayout>

);

}

Props

Name	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'