RUI.next
Playground
Playground

Flex

Flex is a wrap of Flexible Box.

<Flex>
  <Flex.Item>
    <PlaceHolder />
  </Flex.Item>
  <Flex.Item>
    <PlaceHolder />
  </Flex.Item>
</Flex>

Example

Basic usage of Flex component.

API

Flex

PropertiesDescriptionTypeDefault
directionhow flex items are placed in the flex container，value could be row,row-reverse,column,column-reversestringrow
wrapthe wrap way of sub-elements，option nowrap,wrap,wrap-reversestringnowrap
justifythe way of alignment for sub-elements of main axis, option start,end,center,between,aroundstringstart
alignthe way of alignment for sub-elements of cross-axis, option start,center,end,baseline,stretchstringcenter
alignContentthe way of alignment when have multiple axes, option start,end,center,between,around,stretchstringstretch

Flex.Item

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.