FlexLayout

Because flex is so common there are a Row and a Column components, with a lot of utility that mean it is very easy to create complex layouts without having to create extra styles.

• justify: like the justify-content flex property.
• gap: like the gap property, it accepts any Size.
• align: like the align-items flex property.
• padding: like the padding property, it accepts any Padding.

<Column gap="medium">
  <Row
    jsStyle={{ border: `1px solid ${cssVar("--highlight")}` }}
    justify="space-around"
    align="center"
  >
    <Badge />
    <Badge />
    <Badge />
  </Row>
  <Row
    jsStyle={{ border: `1px solid ${cssVar("--highlight")}` }}
    justify="space-evenly"
    align="center"
  >
    <Badge />
    <Badge />
    <Badge />
  </Row>
  <Row
    jsStyle={{ border: `1px solid ${cssVar("--highlight")}` }}
    justify="space-between"
    align="center"
  >
    <Badge />
    <Badge />
    <Badge />
  </Row>
</Column>