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#

NameTypeDefaultRequiredDescription
flexDirectionFlexDirection | GlobalsNoSee mozilla doc.
flexWrapFlexWrap | GlobalsNoSee mozilla doc.
flexFlowMixProperties<FlexDirection, FlexWrap> | GlobalsNoSee mozilla doc.
justifyContentJustifyContent
|MixProperties<'safe', JustifyContent>
|MixProperties<'unsafe', JustifyContent>
|Globals
NoSee mozilla doc.
alignItemsAlignItems
|MixProperties<'safe', AlignItems>
|MixProperties<'unsafe', AlignItems>
|Globals
NoSee mozilla doc.
alignContentAlignContent
|MixProperties<'safe', AlignContent>
|MixProperties<'unsafe', AlignContent>
|Globals
NoSee mozilla doc.
fullHeightbooleanNoIf 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'