FlexBox

A simple, unstyled container that understands CSS flex layout without the need for adding any custom CSS.

UsageGuidelinesAPI

Use FlexBox...

To layout content to best organize and fill the available space.
To align elements within a container with a specific direction.

Don't use FlexBox...

To layout all page content. Use Grid instead.
To layout components such as Cards or Standard Tiles. Use Grid instead.
To layout form fields. Use Form instead.

ReactVanilla

<Card bordered>
  <FlexBox
    style={{ height: 360 }}
    justifyContent="center"
    alignItems="center"
    flexWrap="wrap"
    flexDirection={{ xs: 'row', sm: 'column' }}
  >
    {[1, 2, 3, 4, 5, 6].map(u => (
      <Card
        key={u}
        m={2}
        bgc="accent"
        style={{ border: '1px solid red', height: 90, width: 90 }}
      >
        <FlexBox
          style={{ height: '100%' }}
          justifyContent="center"
          alignItems="center"
        >
          {u}
        </FlexBox>
      </Card>
    ))}
  </FlexBox>
</Card>

<Card bordered>
  <FlexBox
    style={{ height: 360 }}
    justifyContent="center"
    alignItems="center"
    flexWrap="wrap"
    flexDirection={{ xs: 'row', sm: 'column' }}
  >
    {[1, 2, 3, 4, 5, 6].map(u => (
      <Card
        key={u}
        m={2}
        bgc="accent"
        style={{ border: '1px solid red', height: 90, width: 90 }}
      >
        <FlexBox
          style={{ height: '100%' }}
          justifyContent="center"
          alignItems="center"
        >
          {u}
        </FlexBox>
      </Card>
    ))}
  </FlexBox>
</Card>

<div class="swan-card swan-card-bordered">
  <div
    class="swan-display-flex swan-flex-box-align-items-center swan-flex-box-flex-wrap-wrap swan-flex-box-flex-direction-row swan-flex-box-flex-direction-column-sm swan-flex-box-justify-content-center"
    style="height: 360px;"
  >
    <div
      class="swan-card swan-m-2 swan-bgc-accent"
      style="border: 1px solid red; height: 90px; width: 90px;"
    >
      <div
        class="swan-display-flex swan-flex-box-align-items-center swan-flex-box-justify-content-center"
        style="height: 100%;"
      >
        1
      </div>
    </div>
    <div
      class="swan-card swan-m-2 swan-bgc-accent"
      style="border: 1px solid red; height: 90px; width: 90px;"
    >
      <div
        class="swan-display-flex swan-flex-box-align-items-center swan-flex-box-justify-content-center"
        style="height: 100%;"
      >
        2
      </div>
    </div>
    <div
      class="swan-card swan-m-2 swan-bgc-accent"
      style="border: 1px solid red; height: 90px; width: 90px;"
    >
      <div
        class="swan-display-flex swan-flex-box-align-items-center swan-flex-box-justify-content-center"
        style="height: 100%;"
      >
        3
      </div>
    </div>
    <div
      class="swan-card swan-m-2 swan-bgc-accent"
      style="border: 1px solid red; height: 90px; width: 90px;"
    >
      <div
        class="swan-display-flex swan-flex-box-align-items-center swan-flex-box-justify-content-center"
        style="height: 100%;"
      >
        4
      </div>
    </div>
    <div
      class="swan-card swan-m-2 swan-bgc-accent"
      style="border: 1px solid red; height: 90px; width: 90px;"
    >
      <div
        class="swan-display-flex swan-flex-box-align-items-center swan-flex-box-justify-content-center"
        style="height: 100%;"
      >
        5
      </div>
    </div>
    <div
      class="swan-card swan-m-2 swan-bgc-accent"
      style="border: 1px solid red; height: 90px; width: 90px;"
    >
      <div
        class="swan-display-flex swan-flex-box-align-items-center swan-flex-box-justify-content-center"
        style="height: 100%;"
      >
        6
      </div>
    </div>
  </div>
</div>

<div class="swan-card swan-card-bordered">
  <div
    class="swan-display-flex swan-flex-box-align-items-center swan-flex-box-flex-wrap-wrap swan-flex-box-flex-direction-row swan-flex-box-flex-direction-column-sm swan-flex-box-justify-content-center"
    style="height: 360px;"
  >
    <div
      class="swan-card swan-m-2 swan-bgc-accent"
      style="border: 1px solid red; height: 90px; width: 90px;"
    >
      <div
        class="swan-display-flex swan-flex-box-align-items-center swan-flex-box-justify-content-center"
        style="height: 100%;"
      >
        1
      </div>
    </div>
    <div
      class="swan-card swan-m-2 swan-bgc-accent"
      style="border: 1px solid red; height: 90px; width: 90px;"
    >
      <div
        class="swan-display-flex swan-flex-box-align-items-center swan-flex-box-justify-content-center"
        style="height: 100%;"
      >
        2
      </div>
    </div>
    <div
      class="swan-card swan-m-2 swan-bgc-accent"
      style="border: 1px solid red; height: 90px; width: 90px;"
    >
      <div
        class="swan-display-flex swan-flex-box-align-items-center swan-flex-box-justify-content-center"
        style="height: 100%;"
      >
        3
      </div>
    </div>
    <div
      class="swan-card swan-m-2 swan-bgc-accent"
      style="border: 1px solid red; height: 90px; width: 90px;"
    >
      <div
        class="swan-display-flex swan-flex-box-align-items-center swan-flex-box-justify-content-center"
        style="height: 100%;"
      >
        4
      </div>
    </div>
    <div
      class="swan-card swan-m-2 swan-bgc-accent"
      style="border: 1px solid red; height: 90px; width: 90px;"
    >
      <div
        class="swan-display-flex swan-flex-box-align-items-center swan-flex-box-justify-content-center"
        style="height: 100%;"
      >
        5
      </div>
    </div>
    <div
      class="swan-card swan-m-2 swan-bgc-accent"
      style="border: 1px solid red; height: 90px; width: 90px;"
    >
      <div
        class="swan-display-flex swan-flex-box-align-items-center swan-flex-box-justify-content-center"
        style="height: 100%;"
      >
        6
      </div>
    </div>
  </div>
</div>

Flexbox props support responsive values, allowing you to provide values per breakpoint (xs, sm, md, lg, xl) for layout control.

Justify Content

Use justifyContent to align items along the primary axis, which is the x-axis by default.

ReactVanilla

<Card bordered>
  <FlexBox
    style={{ height: 260 }}
    justifyContent="space-evenly"
    alignItems="center"
    flexWrap="wrap"
    flexDirection="row"
    gap="3"
  >
    <Card
      bgc="accent"
      style={{ border: '1px solid red', height: 90, width: 120 }}
    >
      <FlexBox
        style={{ height: '100%' }}
        justifyContent="center"
        alignItems="center"
      >
        1
      </FlexBox>
    </Card>
    <Card
      bgc="accent"
      style={{ border: '1px solid red', height: 90, width: 160 }}
    >
      <FlexBox
        style={{ height: '100%' }}
        justifyContent="center"
        alignItems="center"
      >
        2
      </FlexBox>
    </Card>
    <Card
      bgc="accent"
      style={{ border: '1px solid red', height: 90, width: 90 }}
    >
      <FlexBox
        style={{ height: '100%' }}
        justifyContent="center"
        alignItems="center"
      >
        3
      </FlexBox>
    </Card>

    <Card
      bgc="accent"
      style={{ border: '1px solid red', height: 90, width: 90 }}
    >
      <FlexBox
        style={{ height: '100%' }}
        justifyContent="center"
        alignItems="center"
      >
        4
      </FlexBox>
    </Card>
  </FlexBox>
</Card>

<Card bordered>
  <FlexBox
    style={{ height: 260 }}
    justifyContent="space-evenly"
    alignItems="center"
    flexWrap="wrap"
    flexDirection="row"
    gap="3"
  >
    <Card
      bgc="accent"
      style={{ border: '1px solid red', height: 90, width: 120 }}
    >
      <FlexBox
        style={{ height: '100%' }}
        justifyContent="center"
        alignItems="center"
      >
        1
      </FlexBox>
    </Card>
    <Card
      bgc="accent"
      style={{ border: '1px solid red', height: 90, width: 160 }}
    >
      <FlexBox
        style={{ height: '100%' }}
        justifyContent="center"
        alignItems="center"
      >
        2
      </FlexBox>
    </Card>
    <Card
      bgc="accent"
      style={{ border: '1px solid red', height: 90, width: 90 }}
    >
      <FlexBox
        style={{ height: '100%' }}
        justifyContent="center"
        alignItems="center"
      >
        3
      </FlexBox>
    </Card>

    <Card
      bgc="accent"
      style={{ border: '1px solid red', height: 90, width: 90 }}
    >
      <FlexBox
        style={{ height: '100%' }}
        justifyContent="center"
        alignItems="center"
      >
        4
      </FlexBox>
    </Card>
  </FlexBox>
</Card>

<div class="swan-card swan-card-bordered">
  <div
    class="swan-display-flex swan-flex-box-align-items-center swan-flex-box-flex-wrap-wrap swan-flex-box-flex-direction-row swan-flex-box-justify-content-space-evenly swan-flex-box-gap-3"
    style="height: 260px;"
  >
    <div
      class="swan-card swan-bgc-accent"
      style="border: 1px solid red; height: 90px; width: 120px;"
    >
      <div
        class="swan-display-flex swan-flex-box-align-items-center swan-flex-box-justify-content-center"
        style="height: 100%;"
      >
        1
      </div>
    </div>
    <div
      class="swan-card swan-bgc-accent"
      style="border: 1px solid red; height: 90px; width: 160px;"
    >
      <div
        class="swan-display-flex swan-flex-box-align-items-center swan-flex-box-justify-content-center"
        style="height: 100%;"
      >
        2
      </div>
    </div>
    <div
      class="swan-card swan-bgc-accent"
      style="border: 1px solid red; height: 90px; width: 90px;"
    >
      <div
        class="swan-display-flex swan-flex-box-align-items-center swan-flex-box-justify-content-center"
        style="height: 100%;"
      >
        3
      </div>
    </div>
    <div
      class="swan-card swan-bgc-accent"
      style="border: 1px solid red; height: 90px; width: 90px;"
    >
      <div
        class="swan-display-flex swan-flex-box-align-items-center swan-flex-box-justify-content-center"
        style="height: 100%;"
      >
        4
      </div>
    </div>
  </div>
</div>

<div class="swan-card swan-card-bordered">
  <div
    class="swan-display-flex swan-flex-box-align-items-center swan-flex-box-flex-wrap-wrap swan-flex-box-flex-direction-row swan-flex-box-justify-content-space-evenly swan-flex-box-gap-3"
    style="height: 260px;"
  >
    <div
      class="swan-card swan-bgc-accent"
      style="border: 1px solid red; height: 90px; width: 120px;"
    >
      <div
        class="swan-display-flex swan-flex-box-align-items-center swan-flex-box-justify-content-center"
        style="height: 100%;"
      >
        1
      </div>
    </div>
    <div
      class="swan-card swan-bgc-accent"
      style="border: 1px solid red; height: 90px; width: 160px;"
    >
      <div
        class="swan-display-flex swan-flex-box-align-items-center swan-flex-box-justify-content-center"
        style="height: 100%;"
      >
        2
      </div>
    </div>
    <div
      class="swan-card swan-bgc-accent"
      style="border: 1px solid red; height: 90px; width: 90px;"
    >
      <div
        class="swan-display-flex swan-flex-box-align-items-center swan-flex-box-justify-content-center"
        style="height: 100%;"
      >
        3
      </div>
    </div>
    <div
      class="swan-card swan-bgc-accent"
      style="border: 1px solid red; height: 90px; width: 90px;"
    >
      <div
        class="swan-display-flex swan-flex-box-align-items-center swan-flex-box-justify-content-center"
        style="height: 100%;"
      >
        4
      </div>
    </div>
  </div>
</div>

Align Items

Use alignItems to align items along the secondary axis, which is the y-axis by default.

ReactVanilla

<Card bordered>
  <FlexBox
    style={{ height: 260 }}
    justifyContent="center"
    alignItems="flex-end"
    flexWrap="wrap"
    flexDirection="row"
    gap="3"
  >
    <Card
      bgc="accent"
      style={{ border: '1px solid red', height: 120, width: 90 }}
    >
      <FlexBox
        style={{ height: '100%' }}
        justifyContent="center"
        alignItems="center"
      >
        1
      </FlexBox>
    </Card>
    <Card
      bgc="accent"
      style={{ border: '1px solid red', height: 160, width: 90 }}
    >
      <FlexBox
        style={{ height: '100%' }}
        justifyContent="center"
        alignItems="center"
      >
        2
      </FlexBox>
    </Card>
    <Card
      bgc="accent"
      style={{ border: '1px solid red', height: 90, width: 90 }}
    >
      <FlexBox
        style={{ height: '100%' }}
        justifyContent="center"
        alignItems="center"
      >
        3
      </FlexBox>
    </Card>
    <Card
      bgc="accent"
      style={{ border: '1px solid red', height: 120, width: 90 }}
    >
      <FlexBox
        style={{ height: '100%' }}
        justifyContent="center"
        alignItems="center"
      >
        4
      </FlexBox>
    </Card>
  </FlexBox>
</Card>

<Card bordered>
  <FlexBox
    style={{ height: 260 }}
    justifyContent="center"
    alignItems="flex-end"
    flexWrap="wrap"
    flexDirection="row"
    gap="3"
  >
    <Card
      bgc="accent"
      style={{ border: '1px solid red', height: 120, width: 90 }}
    >
      <FlexBox
        style={{ height: '100%' }}
        justifyContent="center"
        alignItems="center"
      >
        1
      </FlexBox>
    </Card>
    <Card
      bgc="accent"
      style={{ border: '1px solid red', height: 160, width: 90 }}
    >
      <FlexBox
        style={{ height: '100%' }}
        justifyContent="center"
        alignItems="center"
      >
        2
      </FlexBox>
    </Card>
    <Card
      bgc="accent"
      style={{ border: '1px solid red', height: 90, width: 90 }}
    >
      <FlexBox
        style={{ height: '100%' }}
        justifyContent="center"
        alignItems="center"
      >
        3
      </FlexBox>
    </Card>
    <Card
      bgc="accent"
      style={{ border: '1px solid red', height: 120, width: 90 }}
    >
      <FlexBox
        style={{ height: '100%' }}
        justifyContent="center"
        alignItems="center"
      >
        4
      </FlexBox>
    </Card>
  </FlexBox>
</Card>

<div class="swan-card swan-card-bordered">
  <div
    class="swan-display-flex swan-flex-box-align-items-flex-end swan-flex-box-flex-wrap-wrap swan-flex-box-flex-direction-row swan-flex-box-justify-content-center swan-flex-box-gap-3"
    style="height: 260px;"
  >
    <div
      class="swan-card swan-bgc-accent"
      style="border: 1px solid red; height: 120px; width: 90px;"
    >
      <div
        class="swan-display-flex swan-flex-box-align-items-center swan-flex-box-justify-content-center"
        style="height: 100%;"
      >
        1
      </div>
    </div>
    <div
      class="swan-card swan-bgc-accent"
      style="border: 1px solid red; height: 160px; width: 90px;"
    >
      <div
        class="swan-display-flex swan-flex-box-align-items-center swan-flex-box-justify-content-center"
        style="height: 100%;"
      >
        2
      </div>
    </div>
    <div
      class="swan-card swan-bgc-accent"
      style="border: 1px solid red; height: 90px; width: 90px;"
    >
      <div
        class="swan-display-flex swan-flex-box-align-items-center swan-flex-box-justify-content-center"
        style="height: 100%;"
      >
        3
      </div>
    </div>
    <div
      class="swan-card swan-bgc-accent"
      style="border: 1px solid red; height: 120px; width: 90px;"
    >
      <div
        class="swan-display-flex swan-flex-box-align-items-center swan-flex-box-justify-content-center"
        style="height: 100%;"
      >
        4
      </div>
    </div>
  </div>
</div>

<div class="swan-card swan-card-bordered">
  <div
    class="swan-display-flex swan-flex-box-align-items-flex-end swan-flex-box-flex-wrap-wrap swan-flex-box-flex-direction-row swan-flex-box-justify-content-center swan-flex-box-gap-3"
    style="height: 260px;"
  >
    <div
      class="swan-card swan-bgc-accent"
      style="border: 1px solid red; height: 120px; width: 90px;"
    >
      <div
        class="swan-display-flex swan-flex-box-align-items-center swan-flex-box-justify-content-center"
        style="height: 100%;"
      >
        1
      </div>
    </div>
    <div
      class="swan-card swan-bgc-accent"
      style="border: 1px solid red; height: 160px; width: 90px;"
    >
      <div
        class="swan-display-flex swan-flex-box-align-items-center swan-flex-box-justify-content-center"
        style="height: 100%;"
      >
        2
      </div>
    </div>
    <div
      class="swan-card swan-bgc-accent"
      style="border: 1px solid red; height: 90px; width: 90px;"
    >
      <div
        class="swan-display-flex swan-flex-box-align-items-center swan-flex-box-justify-content-center"
        style="height: 100%;"
      >
        3
      </div>
    </div>
    <div
      class="swan-card swan-bgc-accent"
      style="border: 1px solid red; height: 120px; width: 90px;"
    >
      <div
        class="swan-display-flex swan-flex-box-align-items-center swan-flex-box-justify-content-center"
        style="height: 100%;"
      >
        4
      </div>
    </div>
  </div>
</div>

Flex Wrap

Use flexWrap to control whether the items in the FlexBox should wrap to the next line or not.

ReactVanilla

<Card bordered>
  <FlexBox
    style={{ height: 260, width: '100%' }}
    justifyContent="flex-start"
    alignItems="center"
    flexWrap="wrap"
    gap="3"
  >
    <Card
      bgc="accent"
      style={{ border: '1px solid red', height: 90, width: '30%' }}
    >
      <FlexBox
        style={{ height: '100%' }}
        justifyContent="center"
        alignItems="center"
      >
        1
      </FlexBox>
    </Card>
    <Card
      bgc="accent"
      style={{ border: '1px solid red', height: 90, width: '30%' }}
    >
      <FlexBox
        style={{ height: '100%' }}
        justifyContent="center"
        alignItems="center"
      >
        2
      </FlexBox>
    </Card>
    <Card
      bgc="accent"
      style={{ border: '1px solid red', height: 90, width: '30%' }}
    >
      <FlexBox
        style={{ height: '100%' }}
        justifyContent="center"
        alignItems="center"
      >
        3
      </FlexBox>
    </Card>
    <Card
      bgc="accent"
      style={{ border: '1px solid red', height: 90, width: '30%' }}
    >
      <FlexBox
        style={{ height: '100%' }}
        justifyContent="center"
        alignItems="center"
      >
        4
      </FlexBox>
    </Card>
  </FlexBox>
</Card>

<Card bordered>
  <FlexBox
    style={{ height: 260, width: '100%' }}
    justifyContent="flex-start"
    alignItems="center"
    flexWrap="wrap"
    gap="3"
  >
    <Card
      bgc="accent"
      style={{ border: '1px solid red', height: 90, width: '30%' }}
    >
      <FlexBox
        style={{ height: '100%' }}
        justifyContent="center"
        alignItems="center"
      >
        1
      </FlexBox>
    </Card>
    <Card
      bgc="accent"
      style={{ border: '1px solid red', height: 90, width: '30%' }}
    >
      <FlexBox
        style={{ height: '100%' }}
        justifyContent="center"
        alignItems="center"
      >
        2
      </FlexBox>
    </Card>
    <Card
      bgc="accent"
      style={{ border: '1px solid red', height: 90, width: '30%' }}
    >
      <FlexBox
        style={{ height: '100%' }}
        justifyContent="center"
        alignItems="center"
      >
        3
      </FlexBox>
    </Card>
    <Card
      bgc="accent"
      style={{ border: '1px solid red', height: 90, width: '30%' }}
    >
      <FlexBox
        style={{ height: '100%' }}
        justifyContent="center"
        alignItems="center"
      >
        4
      </FlexBox>
    </Card>
  </FlexBox>
</Card>

<div class="swan-card swan-card-bordered">
  <div
    class="swan-display-flex swan-flex-box-align-items-center swan-flex-box-flex-wrap-wrap swan-flex-box-justify-content-flex-start swan-flex-box-gap-3"
    style="height: 260px; width: 100%;"
  >
    <div
      class="swan-card swan-bgc-accent"
      style="border: 1px solid red; height: 90px; width: 30%;"
    >
      <div
        class="swan-display-flex swan-flex-box-align-items-center swan-flex-box-justify-content-center"
        style="height: 100%;"
      >
        1
      </div>
    </div>
    <div
      class="swan-card swan-bgc-accent"
      style="border: 1px solid red; height: 90px; width: 30%;"
    >
      <div
        class="swan-display-flex swan-flex-box-align-items-center swan-flex-box-justify-content-center"
        style="height: 100%;"
      >
        2
      </div>
    </div>
    <div
      class="swan-card swan-bgc-accent"
      style="border: 1px solid red; height: 90px; width: 30%;"
    >
      <div
        class="swan-display-flex swan-flex-box-align-items-center swan-flex-box-justify-content-center"
        style="height: 100%;"
      >
        3
      </div>
    </div>
    <div
      class="swan-card swan-bgc-accent"
      style="border: 1px solid red; height: 90px; width: 30%;"
    >
      <div
        class="swan-display-flex swan-flex-box-align-items-center swan-flex-box-justify-content-center"
        style="height: 100%;"
      >
        4
      </div>
    </div>
  </div>
</div>

<div class="swan-card swan-card-bordered">
  <div
    class="swan-display-flex swan-flex-box-align-items-center swan-flex-box-flex-wrap-wrap swan-flex-box-justify-content-flex-start swan-flex-box-gap-3"
    style="height: 260px; width: 100%;"
  >
    <div
      class="swan-card swan-bgc-accent"
      style="border: 1px solid red; height: 90px; width: 30%;"
    >
      <div
        class="swan-display-flex swan-flex-box-align-items-center swan-flex-box-justify-content-center"
        style="height: 100%;"
      >
        1
      </div>
    </div>
    <div
      class="swan-card swan-bgc-accent"
      style="border: 1px solid red; height: 90px; width: 30%;"
    >
      <div
        class="swan-display-flex swan-flex-box-align-items-center swan-flex-box-justify-content-center"
        style="height: 100%;"
      >
        2
      </div>
    </div>
    <div
      class="swan-card swan-bgc-accent"
      style="border: 1px solid red; height: 90px; width: 30%;"
    >
      <div
        class="swan-display-flex swan-flex-box-align-items-center swan-flex-box-justify-content-center"
        style="height: 100%;"
      >
        3
      </div>
    </div>
    <div
      class="swan-card swan-bgc-accent"
      style="border: 1px solid red; height: 90px; width: 30%;"
    >
      <div
        class="swan-display-flex swan-flex-box-align-items-center swan-flex-box-justify-content-center"
        style="height: 100%;"
      >
        4
      </div>
    </div>
  </div>
</div>

Flex Direction

Use flexDirection to control whether the items in the FlexBox are laid out in a row or column; this also switches the primary and secondary axis.

ReactVanilla

<GridContainer>
  <Row>
    <Column span={6}>
      <Card bordered>
        <FlexBox
          style={{ height: 360 }}
          justifyContent="center"
          alignItems="center"
          flexWrap="wrap"
          flexDirection="row"
          gap="3"
        >
          <Card
            bgc="accent"
            style={{ border: '1px solid red', height: 90, width: 120 }}
          >
            <FlexBox
              style={{ height: '100%' }}
              justifyContent="center"
              alignItems="center"
            >
              1
            </FlexBox>
          </Card>
          <Card
            bgc="accent"
            style={{ border: '1px solid red', height: 90, width: 160 }}
          >
            <FlexBox
              style={{ height: '100%' }}
              justifyContent="center"
              alignItems="center"
            >
              2
            </FlexBox>
          </Card>
          <Card
            bgc="accent"
            style={{ border: '1px solid red', height: 90, width: 120 }}
          >
            <FlexBox
              style={{ height: '100%' }}
              justifyContent="center"
              alignItems="center"
            >
              3
            </FlexBox>
          </Card>
        </FlexBox>
      </Card>
    </Column>
    <Column span={6}>
      <Card bordered>
        <FlexBox
          style={{ height: 360 }}
          justifyContent="center"
          alignItems="center"
          flexWrap="wrap"
          flexDirection="column"
          gap="3"
        >
          <Card
            bgc="accent"
            style={{ border: '1px solid red', height: 90, width: 120 }}
          >
            <FlexBox
              style={{ height: '100%' }}
              justifyContent="center"
              alignItems="center"
            >
              1
            </FlexBox>
          </Card>
          <Card
            bgc="accent"
            style={{ border: '1px solid red', height: 90, width: 160 }}
          >
            <FlexBox
              style={{ height: '100%' }}
              justifyContent="center"
              alignItems="center"
            >
              2
            </FlexBox>
          </Card>
          <Card
            bgc="accent"
            style={{ border: '1px solid red', height: 90, width: 120 }}
          >
            <FlexBox
              style={{ height: '100%' }}
              justifyContent="center"
              alignItems="center"
            >
              3
            </FlexBox>
          </Card>
        </FlexBox>
      </Card>
    </Column>
  </Row>
</GridContainer>

<GridContainer>
  <Row>
    <Column span={6}>
      <Card bordered>
        <FlexBox
          style={{ height: 360 }}
          justifyContent="center"
          alignItems="center"
          flexWrap="wrap"
          flexDirection="row"
          gap="3"
        >
          <Card
            bgc="accent"
            style={{ border: '1px solid red', height: 90, width: 120 }}
          >
            <FlexBox
              style={{ height: '100%' }}
              justifyContent="center"
              alignItems="center"
            >
              1
            </FlexBox>
          </Card>
          <Card
            bgc="accent"
            style={{ border: '1px solid red', height: 90, width: 160 }}
          >
            <FlexBox
              style={{ height: '100%' }}
              justifyContent="center"
              alignItems="center"
            >
              2
            </FlexBox>
          </Card>
          <Card
            bgc="accent"
            style={{ border: '1px solid red', height: 90, width: 120 }}
          >
            <FlexBox
              style={{ height: '100%' }}
              justifyContent="center"
              alignItems="center"
            >
              3
            </FlexBox>
          </Card>
        </FlexBox>
      </Card>
    </Column>
    <Column span={6}>
      <Card bordered>
        <FlexBox
          style={{ height: 360 }}
          justifyContent="center"
          alignItems="center"
          flexWrap="wrap"
          flexDirection="column"
          gap="3"
        >
          <Card
            bgc="accent"
            style={{ border: '1px solid red', height: 90, width: 120 }}
          >
            <FlexBox
              style={{ height: '100%' }}
              justifyContent="center"
              alignItems="center"
            >
              1
            </FlexBox>
          </Card>
          <Card
            bgc="accent"
            style={{ border: '1px solid red', height: 90, width: 160 }}
          >
            <FlexBox
              style={{ height: '100%' }}
              justifyContent="center"
              alignItems="center"
            >
              2
            </FlexBox>
          </Card>
          <Card
            bgc="accent"
            style={{ border: '1px solid red', height: 90, width: 120 }}
          >
            <FlexBox
              style={{ height: '100%' }}
              justifyContent="center"
              alignItems="center"
            >
              3
            </FlexBox>
          </Card>
        </FlexBox>
      </Card>
    </Column>
  </Row>
</GridContainer>

<div class="swan-card swan-card-bordered">
  <div
    class="swan-display-flex swan-flex-box-align-items-center swan-flex-box-flex-wrap-wrap swan-flex-box-flex-direction-column swan-flex-box-justify-content-center swan-flex-box-gap-3"
    style="height: 360px;"
  >
    <div
      class="swan-card swan-bgc-accent"
      style="border: 1px solid red; height: 90px; width: 120px;"
    >
      <div
        class="swan-display-flex swan-flex-box-align-items-center swan-flex-box-justify-content-center"
        style="height: 100%;"
      >
        1
      </div>
    </div>
    <div
      class="swan-card swan-bgc-accent"
      style="border: 1px solid red; height: 90px; width: 160px;"
    >
      <div
        class="swan-display-flex swan-flex-box-align-items-center swan-flex-box-justify-content-center"
        style="height: 100%;"
      >
        2
      </div>
    </div>
    <div
      class="swan-card swan-bgc-accent"
      style="border: 1px solid red; height: 90px; width: 120px;"
    >
      <div
        class="swan-display-flex swan-flex-box-align-items-center swan-flex-box-justify-content-center"
        style="height: 100%;"
      >
        3
      </div>
    </div>
  </div>
</div>

<div class="swan-card swan-card-bordered">
  <div
    class="swan-display-flex swan-flex-box-align-items-center swan-flex-box-flex-wrap-wrap swan-flex-box-flex-direction-column swan-flex-box-justify-content-center swan-flex-box-gap-3"
    style="height: 360px;"
  >
    <div
      class="swan-card swan-bgc-accent"
      style="border: 1px solid red; height: 90px; width: 120px;"
    >
      <div
        class="swan-display-flex swan-flex-box-align-items-center swan-flex-box-justify-content-center"
        style="height: 100%;"
      >
        1
      </div>
    </div>
    <div
      class="swan-card swan-bgc-accent"
      style="border: 1px solid red; height: 90px; width: 160px;"
    >
      <div
        class="swan-display-flex swan-flex-box-align-items-center swan-flex-box-justify-content-center"
        style="height: 100%;"
      >
        2
      </div>
    </div>
    <div
      class="swan-card swan-bgc-accent"
      style="border: 1px solid red; height: 90px; width: 120px;"
    >
      <div
        class="swan-display-flex swan-flex-box-align-items-center swan-flex-box-justify-content-center"
        style="height: 100%;"
      >
        3
      </div>
    </div>
  </div>
</div>

Gap

Use gap to put a gutter between the items in the FlexBox. This accepts one of the semantic or numeric space units as values. Note that this controls the inline gap property in the style attribute, so you cannot set the gap via style.

ReactVanilla

<Card bordered>
  <FlexBox
    style={{ height: 260 }}
    justifyContent="center"
    alignItems="center"
    flexWrap="wrap"
    flexDirection="row"
    gap="8"
  >
    <Card
      bgc="accent"
      style={{ border: '1px solid red', height: 120, width: 90 }}
    >
      <FlexBox
        style={{ height: '100%' }}
        justifyContent="center"
        alignItems="center"
      >
        1
      </FlexBox>
    </Card>
    <Card
      bgc="accent"
      style={{ border: '1px solid red', height: 160, width: 90 }}
    >
      <FlexBox
        style={{ height: '100%' }}
        justifyContent="center"
        alignItems="center"
      >
        2
      </FlexBox>
    </Card>
    <Card
      bgc="accent"
      style={{ border: '1px solid red', height: 90, width: 90 }}
    >
      <FlexBox
        style={{ height: '100%' }}
        justifyContent="center"
        alignItems="center"
      >
        3
      </FlexBox>
    </Card>
    <Card
      bgc="accent"
      style={{ border: '1px solid red', height: 120, width: 90 }}
    >
      <FlexBox
        style={{ height: '100%' }}
        justifyContent="center"
        alignItems="center"
      >
        4
      </FlexBox>
    </Card>
  </FlexBox>
</Card>

<Card bordered>
  <FlexBox
    style={{ height: 260 }}
    justifyContent="center"
    alignItems="center"
    flexWrap="wrap"
    flexDirection="row"
    gap="8"
  >
    <Card
      bgc="accent"
      style={{ border: '1px solid red', height: 120, width: 90 }}
    >
      <FlexBox
        style={{ height: '100%' }}
        justifyContent="center"
        alignItems="center"
      >
        1
      </FlexBox>
    </Card>
    <Card
      bgc="accent"
      style={{ border: '1px solid red', height: 160, width: 90 }}
    >
      <FlexBox
        style={{ height: '100%' }}
        justifyContent="center"
        alignItems="center"
      >
        2
      </FlexBox>
    </Card>
    <Card
      bgc="accent"
      style={{ border: '1px solid red', height: 90, width: 90 }}
    >
      <FlexBox
        style={{ height: '100%' }}
        justifyContent="center"
        alignItems="center"
      >
        3
      </FlexBox>
    </Card>
    <Card
      bgc="accent"
      style={{ border: '1px solid red', height: 120, width: 90 }}
    >
      <FlexBox
        style={{ height: '100%' }}
        justifyContent="center"
        alignItems="center"
      >
        4
      </FlexBox>
    </Card>
  </FlexBox>
</Card>

<div class="swan-card swan-card-bordered">
  <div
    class="swan-display-flex swan-flex-box-align-items-center swan-flex-box-flex-wrap-wrap swan-flex-box-flex-direction-row swan-flex-box-justify-content-center swan-flex-box-gap-8"
    style="height: 260px;"
  >
    <div
      class="swan-card swan-bgc-accent"
      style="border: 1px solid red; height: 120px; width: 90px;"
    >
      <div
        class="swan-display-flex swan-flex-box-align-items-center swan-flex-box-justify-content-center"
        style="height: 100%;"
      >
        1
      </div>
    </div>
    <div
      class="swan-card swan-bgc-accent"
      style="border: 1px solid red; height: 160px; width: 90px;"
    >
      <div
        class="swan-display-flex swan-flex-box-align-items-center swan-flex-box-justify-content-center"
        style="height: 100%;"
      >
        2
      </div>
    </div>
    <div
      class="swan-card swan-bgc-accent"
      style="border: 1px solid red; height: 90px; width: 90px;"
    >
      <div
        class="swan-display-flex swan-flex-box-align-items-center swan-flex-box-justify-content-center"
        style="height: 100%;"
      >
        3
      </div>
    </div>
    <div
      class="swan-card swan-bgc-accent"
      style="border: 1px solid red; height: 120px; width: 90px;"
    >
      <div
        class="swan-display-flex swan-flex-box-align-items-center swan-flex-box-justify-content-center"
        style="height: 100%;"
      >
        4
      </div>
    </div>
  </div>
</div>

<div class="swan-card swan-card-bordered">
  <div
    class="swan-display-flex swan-flex-box-align-items-center swan-flex-box-flex-wrap-wrap swan-flex-box-flex-direction-row swan-flex-box-justify-content-center swan-flex-box-gap-8"
    style="height: 260px;"
  >
    <div
      class="swan-card swan-bgc-accent"
      style="border: 1px solid red; height: 120px; width: 90px;"
    >
      <div
        class="swan-display-flex swan-flex-box-align-items-center swan-flex-box-justify-content-center"
        style="height: 100%;"
      >
        1
      </div>
    </div>
    <div
      class="swan-card swan-bgc-accent"
      style="border: 1px solid red; height: 160px; width: 90px;"
    >
      <div
        class="swan-display-flex swan-flex-box-align-items-center swan-flex-box-justify-content-center"
        style="height: 100%;"
      >
        2
      </div>
    </div>
    <div
      class="swan-card swan-bgc-accent"
      style="border: 1px solid red; height: 90px; width: 90px;"
    >
      <div
        class="swan-display-flex swan-flex-box-align-items-center swan-flex-box-justify-content-center"
        style="height: 100%;"
      >
        3
      </div>
    </div>
    <div
      class="swan-card swan-bgc-accent"
      style="border: 1px solid red; height: 120px; width: 90px;"
    >
      <div
        class="swan-display-flex swan-flex-box-align-items-center swan-flex-box-justify-content-center"
        style="height: 100%;"
      >
        4
      </div>
    </div>
  </div>
</div>

Stack Layout

Use Flexbox with flexDirection="column" and the gap property to create vertical stacks of elements with consistent spacing.
This approach centralizes spacing control, ensures uniform gutters between children, and avoids hard-coding margins on individual elements.

If you previously used the Emu Stack component, this is the recommended Swan replacement.

Inline Layout

For horizontal layouts, Swan usually recommends the Grid component. Grid provides site-standard spacing between items and maintains visual harmony across pages.
However, for smaller or more unusual inline layouts, you can use Flexbox with flexDirection="row" and a gap.

If you previously used the Emu Inline component, use Grid where possible, or Flexbox for lightweight cases.

Props

FlexBox

This component is implemented using the <div /> as the root element. You can utilize the native attributes supported by <div /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.

See core props for additional props that can be applied to this component.

prop	type	required	description	default
alignItems	`Responsive<"center" \| "end" \| "start" \| "inherit" \| "initial" \| "revert" \| "unset" \| "baseline" \| "stretch" \| "flex-start" \| "flex-end"> \| null`	false	The CSS align-items property sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area. One of: "stretch", "center", "start", "end", "flex-start", "flex-end", "baseline", "inherit", "initial", "revert", "unset".	null
flexWrap	`Responsive<"wrap" \| "inherit" \| "initial" \| "revert" \| "unset" \| "nowrap" \| "wrap-reverse"> \| null`	false	The flex-wrap CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked. One of: "nowrap", "wrap", "wrap-reverse", "inherit", "initial", "revert", "unset".	null
flexDirection	`Responsive<"row" \| "inherit" \| "initial" \| "revert" \| "unset" \| "row-reverse" \| "column" \| "column-reverse"> \| null`	false	The flex-direction CSS property sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed). One of: "row", "row-reverse", "column", "column-reverse", "inherit", "initial", "revert", "unset".	null
justifyContent	`Responsive<"center" \| "end" \| "start" \| "inherit" \| "left" \| "right" \| "normal" \| "initial" \| "revert" \| "unset" \| "stretch" \| "flex-start" \| "flex-end" \| "space-between" \| "space-around" \| "space-evenly"> \| null`	false	The CSS justify-content property defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. One of: "stretch", "center", "start", "end", "flex-start", "flex-end", "left", "right", "normal", "space-between", "space-around", "space-evenly", "inherit", "initial", "revert", "unset".	null
gap	`Responsive<0 \| 1 \| "0" \| 2 \| "1" \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12 \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "10" \| "11" \| "12" \| "between-sections" \| "between-subsections" \| "between-actions" \| "to-actions" \| "between-icon-and-text"> \| null`	false	The gap property places a uniform gap (gutter) between the flex container's children.	null