RUI.next

Navigation-Layout
Flex

Flex

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>

Example

Basic usage of Flex component.

Basic
Block
Block

Block
Block
Block

Block
Block
Block
Block
Wrap (resize window to view the wrap items)
Block
Block
Block
Block
Block
Block
Block
Align
Block
Block
Block
Block
Block
Block
Block
Block
Block
Block
Block
Block
Block
Block
Block
Block
Block
Block

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.