Description
Layout.FlexItem is a building block for flexbox based layout of contents and components. Can be used in combination with FlexContainer.
Demo
Contents
<Layout.FlexItem>Contents</Layout.FlexItem>
Widths
No width (default)
Contents
Small
Cont.
Medium
Contents
Large
Contents
<Layout.Card><p>No width (default)</p><Layout.FlexItem><TestElement>Contents</TestElement></Layout.FlexItem><p>Small</p><Layout.FlexItem width="small"><TestElement>Cont.</TestElement></Layout.FlexItem><p>Medium</p><Layout.FlexItem width="medium"><TestElement>Contents</TestElement></Layout.FlexItem><p>Large</p><Layout.FlexItem width="large"><TestElement>Contents</TestElement></Layout.FlexItem></Layout.Card>
Properties
| Property | Type | Description |
|---|---|---|
className | string | (optional) Outer DOM element class name |
grow | boolean | (optional) True to expand in width/height when there is more space available. |
shrink | boolean | (optional) True to shrink in width/height when there is not enough space available for all components within the container. |
width | string or false | (optional)small, medium or large for predefined standard widths. |
children | React.Node | (optional) Contents. |