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.

Syntax

Flex can be used to align items horizontally

<Flex pad="1">
  <Button href="https://www.example.com">Sign Up</Button>
  <Button href="https://www.example.com">Sign In</Button>
</Flex>

Output:

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

<Flex gap="4">
  ...
</Flex>

Justifying content

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

Center aligning buttons with center justification

<Flex justify="center">
  <Button href="https://www.example.com">
    Button 1
   </Button>
  <Button href="https://www.example.com">
    Button 2
  </Button>
  <Button href="https://www.example.com">
    Button 3
  </Button>
</Flex>

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

(The examples below are wrapped inside a Card element for clarity.)

Aligning content

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.

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.

Height

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

Example:

<Flex height="full">
  This Flex container will fill its parent
</Flex>

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

Custom CSS Class

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

Example:

<Flex class="custom-flex">
  I can be customized with CSS
</Flex>

Direction

By default <Flex> will layout elements horizontally. This is incredibly useful, since Markdown doesn't have a way to layout elements side by side.

If you however want to use <Flex> to layout elements vertically, you can set the dir attribute to col.

Example:

<Flex dir="column">
  <Button>Sign Up</Button href="https://www.example.com">
  <Button>Sign In</Button href="https://www.example.com">
</Flex>

You may want to use dir along with justify in many cases.