Flex

Flex components implement a layout that flexibly arranges child components.

Example

Live Editor

<Flex> <BorderBox>Item</BorderBox> <BorderBox>Item</BorderBox> <BorderBox>Item</BorderBox> </Flex>

<Flex>
  <BorderBox>Item</BorderBox>
  <BorderBox>Item</BorderBox>
  <BorderBox>Item</BorderBox>
</Flex>

Result

Loading...

Direction

You can set the direction of flex. (row | column)

Live Editor

<Flex direction='column'> <BorderBox>Item</BorderBox> <BorderBox>Item</BorderBox> <BorderBox>Item</BorderBox> </Flex>

<Flex direction='column'>
  <BorderBox>Item</BorderBox>
  <BorderBox>Item</BorderBox>
  <BorderBox>Item</BorderBox>
</Flex>

Result

Loading...

Justify & Align

You can set the justify-content/align-items of flex.

Live Editor

<Flex justify='center' align='center'> <BorderBox>Item</BorderBox> <BorderBox>Item</BorderBox> <BorderBox>Item</BorderBox> </Flex>

<Flex justify='center' align='center'>
  <BorderBox>Item</BorderBox>
  <BorderBox>Item</BorderBox>
  <BorderBox>Item</BorderBox>
</Flex>

Result

Loading...

Wrap

You can set the wrap of flex. (nowrap | wrap | wrap-reverse)

Live Editor

<Flex wrap='wrap'> <BorderBox>Item</BorderBox> <BorderBox>Item</BorderBox> <BorderBox>Item</BorderBox> <BorderBox>Item</BorderBox> <BorderBox>Item</BorderBox> <BorderBox>Item</BorderBox> <BorderBox>Item</BorderBox> <BorderBox>Item</BorderBox> <BorderBox>Item</BorderBox> </Flex>

<Flex wrap='wrap'>
  <BorderBox>Item</BorderBox>
  <BorderBox>Item</BorderBox>
  <BorderBox>Item</BorderBox>
  <BorderBox>Item</BorderBox>
  <BorderBox>Item</BorderBox>
  <BorderBox>Item</BorderBox>
  <BorderBox>Item</BorderBox>
  <BorderBox>Item</BorderBox>
  <BorderBox>Item</BorderBox>
</Flex>

Result

Loading...

Gap

You can set the item's gap of flex.

Live Editor

<Flex gap='10px'> <BorderBox>Item</BorderBox> <BorderBox>Item</BorderBox> <BorderBox>Item</BorderBox> </Flex>

<Flex gap='10px'>
  <BorderBox>Item</BorderBox>
  <BorderBox>Item</BorderBox>
  <BorderBox>Item</BorderBox>
</Flex>

Result

Loading...