Flex is a wrap of Flexible Box.
<Flex>
<Flex.Item><PlaceHolder /></Flex.Item>
<Flex.Item><PlaceHolder /></Flex.Item>
</Flex><Flex>
<Flex.Item><PlaceHolder /></Flex.Item>
<Flex.Item><PlaceHolder /></Flex.Item>
</Flex>
Basic usage of Flex component.
| Properties | Description | Type | Default |
|---|---|---|---|
| direction | how flex items are placed in the flex container,value could be row,row-reverse,column,column-reverse | string | row |
| wrap | the wrap way of sub-elements,option nowrap,wrap,wrap-reverse | string | nowrap |
| justify | the way of alignment for sub-elements of main axis, option start,end,center,between,around | string | start |
| align | the way of alignment for sub-elements of cross-axis, option start,center,end,baseline,stretch | string | center |
| alignContent | the way of alignment when have multiple axes, option start,end,center,between,around,stretch | string | stretch |
Flex.Item component contains style flex: 1 as default, ensure all items average division width. Please note that Flex container's children may not be Flex.Item.