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.

Flex can be used to align items horizontally

<Flex>
  ...
</Flex>

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.

Flex with gap specified

// [!code word:gap:1]
<Flex gap="4">
  ...
</Flex>

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 .

Center aligning content with center justification

// [!code word:justify:1]
<Flex justify="start">
  ...
</Flex>

Center aligning content with center justification

// [!code word:justify:1]
<Flex justify="end">
  ...
</Flex>

Center aligning content with center justification

// [!code word:justify:1]
<Flex justify="center">
  ...
</Flex>

Center aligning content with center justification

// [!code word:justify:1]
<Flex justify="between">
  ...
</Flex>

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 .

Wrapping flex content with wrap

// [!code word:wrap:1]
<Flex wrap="wrap">
  ...
</Flex>

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

// [!code word:align:1]
<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

// [!code word:height:1]
<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.

Vertical flex container

// [!code word:dir:1]
<Flex dir="column">
  ...
</Flex>

Class

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

Custom class

// [!code word:class:1]
<Flex class="custom-flex">
  ...
</Flex>