Flex component

The Flex component is a building block for making more complex layouts without resorting to custom CSS.

The component is modelled after the CSS flexbox concept: which is a powerful way to layout elements.

Attributes

The <Flex> component can be customized using the following attributes.

Gap

You can increase spacing between children with the gap attribute. It must be a value between 0 and 5 inclusive. The default gap is 0.

Justify

You can use the justify attribute to place items according to each other in the Flex component.

Must be one of start, end, center, between. Defaults to start.

Wrapping

You can use the wrap attribute to specify how elements should wrap inside the Flex container.

Must be one of wrap, nowrap, wrapreverse. Defaults to nowrap.

Align

You can use the align attribute to align items horizontally (or vertically, if in the Flex direction is column) in the Flex component. This is equivalent to the flexbox align-items attribute.

Must be one of start, end, center, stretch, baseline. Defaults to start.

Center aligning content with center justification

<Flex align="center">
  ...
</Flex>

Height

You can tell your Flex element to consume the full height of its container with the height attribute.

Height of flex container

<Flex height="full">
  ...
</Flex>

Must be one of auto or full. Defaults to auto.

Direction

The dir attribute can be used to change the direction of the flex container from horizontal to vertical.

Class

You can pass a custom class to your Flex element with the class attribute:

Custom class

<Flex class="custom-flex">
  ...
</Flex>