FlexBox

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

UsageAPI

FlexBox is only available in the React API for SWAN.

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="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="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"
    style="height: 360px; align-items: center; flex-flow: column wrap; justify-content: center;"
  >
    <div
      class="swan-card swan-m-2 swan-bgc-accent"
      style="border: 1px solid red; height: 90px; width: 90px;"
    >
      <div
        class="swan-display-flex"
        style="height: 100%; align-items: center; justify-content: center;"
      >
        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"
        style="height: 100%; align-items: center; justify-content: center;"
      >
        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"
        style="height: 100%; align-items: center; justify-content: center;"
      >
        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"
        style="height: 100%; align-items: center; justify-content: center;"
      >
        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"
        style="height: 100%; align-items: center; justify-content: center;"
      >
        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"
        style="height: 100%; align-items: center; justify-content: center;"
      >
        6
      </div>
    </div>
  </div>
</div>

<div class="swan-card swan-card-bordered">
  <div
    class="swan-display-flex"
    style="height: 360px; align-items: center; flex-flow: column wrap; justify-content: center;"
  >
    <div
      class="swan-card swan-m-2 swan-bgc-accent"
      style="border: 1px solid red; height: 90px; width: 90px;"
    >
      <div
        class="swan-display-flex"
        style="height: 100%; align-items: center; justify-content: center;"
      >
        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"
        style="height: 100%; align-items: center; justify-content: center;"
      >
        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"
        style="height: 100%; align-items: center; justify-content: center;"
      >
        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"
        style="height: 100%; align-items: center; justify-content: center;"
      >
        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"
        style="height: 100%; align-items: center; justify-content: center;"
      >
        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"
        style="height: 100%; align-items: center; justify-content: center;"
      >
        6
      </div>
    </div>
  </div>
</div>

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"
    style="height: 260px; align-items: center; flex-flow: wrap; justify-content: space-evenly; gap: var(--swan-sem-space-3);"
  >
    <div
      class="swan-card swan-bgc-accent"
      style="border: 1px solid red; height: 90px; width: 120px;"
    >
      <div
        class="swan-display-flex"
        style="height: 100%; align-items: center; justify-content: center;"
      >
        1
      </div>
    </div>
    <div
      class="swan-card swan-bgc-accent"
      style="border: 1px solid red; height: 90px; width: 160px;"
    >
      <div
        class="swan-display-flex"
        style="height: 100%; align-items: center; justify-content: center;"
      >
        2
      </div>
    </div>
    <div
      class="swan-card swan-bgc-accent"
      style="border: 1px solid red; height: 90px; width: 90px;"
    >
      <div
        class="swan-display-flex"
        style="height: 100%; align-items: center; justify-content: center;"
      >
        3
      </div>
    </div>
    <div
      class="swan-card swan-bgc-accent"
      style="border: 1px solid red; height: 90px; width: 90px;"
    >
      <div
        class="swan-display-flex"
        style="height: 100%; align-items: center; justify-content: center;"
      >
        4
      </div>
    </div>
  </div>
</div>

<div class="swan-card swan-card-bordered">
  <div
    class="swan-display-flex"
    style="height: 260px; align-items: center; flex-flow: wrap; justify-content: space-evenly; gap: var(--swan-sem-space-3);"
  >
    <div
      class="swan-card swan-bgc-accent"
      style="border: 1px solid red; height: 90px; width: 120px;"
    >
      <div
        class="swan-display-flex"
        style="height: 100%; align-items: center; justify-content: center;"
      >
        1
      </div>
    </div>
    <div
      class="swan-card swan-bgc-accent"
      style="border: 1px solid red; height: 90px; width: 160px;"
    >
      <div
        class="swan-display-flex"
        style="height: 100%; align-items: center; justify-content: center;"
      >
        2
      </div>
    </div>
    <div
      class="swan-card swan-bgc-accent"
      style="border: 1px solid red; height: 90px; width: 90px;"
    >
      <div
        class="swan-display-flex"
        style="height: 100%; align-items: center; justify-content: center;"
      >
        3
      </div>
    </div>
    <div
      class="swan-card swan-bgc-accent"
      style="border: 1px solid red; height: 90px; width: 90px;"
    >
      <div
        class="swan-display-flex"
        style="height: 100%; align-items: center; justify-content: center;"
      >
        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"
    style="height: 260px; align-items: flex-end; flex-flow: wrap; justify-content: center; gap: var(--swan-sem-space-3);"
  >
    <div
      class="swan-card swan-bgc-accent"
      style="border: 1px solid red; height: 120px; width: 90px;"
    >
      <div
        class="swan-display-flex"
        style="height: 100%; align-items: center; justify-content: center;"
      >
        1
      </div>
    </div>
    <div
      class="swan-card swan-bgc-accent"
      style="border: 1px solid red; height: 160px; width: 90px;"
    >
      <div
        class="swan-display-flex"
        style="height: 100%; align-items: center; justify-content: center;"
      >
        2
      </div>
    </div>
    <div
      class="swan-card swan-bgc-accent"
      style="border: 1px solid red; height: 90px; width: 90px;"
    >
      <div
        class="swan-display-flex"
        style="height: 100%; align-items: center; justify-content: center;"
      >
        3
      </div>
    </div>
    <div
      class="swan-card swan-bgc-accent"
      style="border: 1px solid red; height: 120px; width: 90px;"
    >
      <div
        class="swan-display-flex"
        style="height: 100%; align-items: center; justify-content: center;"
      >
        4
      </div>
    </div>
  </div>
</div>

<div class="swan-card swan-card-bordered">
  <div
    class="swan-display-flex"
    style="height: 260px; align-items: flex-end; flex-flow: wrap; justify-content: center; gap: var(--swan-sem-space-3);"
  >
    <div
      class="swan-card swan-bgc-accent"
      style="border: 1px solid red; height: 120px; width: 90px;"
    >
      <div
        class="swan-display-flex"
        style="height: 100%; align-items: center; justify-content: center;"
      >
        1
      </div>
    </div>
    <div
      class="swan-card swan-bgc-accent"
      style="border: 1px solid red; height: 160px; width: 90px;"
    >
      <div
        class="swan-display-flex"
        style="height: 100%; align-items: center; justify-content: center;"
      >
        2
      </div>
    </div>
    <div
      class="swan-card swan-bgc-accent"
      style="border: 1px solid red; height: 90px; width: 90px;"
    >
      <div
        class="swan-display-flex"
        style="height: 100%; align-items: center; justify-content: center;"
      >
        3
      </div>
    </div>
    <div
      class="swan-card swan-bgc-accent"
      style="border: 1px solid red; height: 120px; width: 90px;"
    >
      <div
        class="swan-display-flex"
        style="height: 100%; align-items: center; justify-content: center;"
      >
        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"
    style="height: 260px; width: 100%; align-items: center; flex-wrap: wrap; justify-content: flex-start; gap: var(--swan-sem-space-3);"
  >
    <div
      class="swan-card swan-bgc-accent"
      style="border: 1px solid red; height: 90px; width: 30%;"
    >
      <div
        class="swan-display-flex"
        style="height: 100%; align-items: center; justify-content: center;"
      >
        1
      </div>
    </div>
    <div
      class="swan-card swan-bgc-accent"
      style="border: 1px solid red; height: 90px; width: 30%;"
    >
      <div
        class="swan-display-flex"
        style="height: 100%; align-items: center; justify-content: center;"
      >
        2
      </div>
    </div>
    <div
      class="swan-card swan-bgc-accent"
      style="border: 1px solid red; height: 90px; width: 30%;"
    >
      <div
        class="swan-display-flex"
        style="height: 100%; align-items: center; justify-content: center;"
      >
        3
      </div>
    </div>
    <div
      class="swan-card swan-bgc-accent"
      style="border: 1px solid red; height: 90px; width: 30%;"
    >
      <div
        class="swan-display-flex"
        style="height: 100%; align-items: center; justify-content: center;"
      >
        4
      </div>
    </div>
  </div>
</div>

<div class="swan-card swan-card-bordered">
  <div
    class="swan-display-flex"
    style="height: 260px; width: 100%; align-items: center; flex-wrap: wrap; justify-content: flex-start; gap: var(--swan-sem-space-3);"
  >
    <div
      class="swan-card swan-bgc-accent"
      style="border: 1px solid red; height: 90px; width: 30%;"
    >
      <div
        class="swan-display-flex"
        style="height: 100%; align-items: center; justify-content: center;"
      >
        1
      </div>
    </div>
    <div
      class="swan-card swan-bgc-accent"
      style="border: 1px solid red; height: 90px; width: 30%;"
    >
      <div
        class="swan-display-flex"
        style="height: 100%; align-items: center; justify-content: center;"
      >
        2
      </div>
    </div>
    <div
      class="swan-card swan-bgc-accent"
      style="border: 1px solid red; height: 90px; width: 30%;"
    >
      <div
        class="swan-display-flex"
        style="height: 100%; align-items: center; justify-content: center;"
      >
        3
      </div>
    </div>
    <div
      class="swan-card swan-bgc-accent"
      style="border: 1px solid red; height: 90px; width: 30%;"
    >
      <div
        class="swan-display-flex"
        style="height: 100%; align-items: center; justify-content: center;"
      >
        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-grid-container">
  <div class="swan-row">
    <div class="swan-col-6">
      <div class="swan-card swan-card-bordered">
        <div
          class="swan-display-flex"
          style="height: 360px; align-items: center; flex-flow: wrap; justify-content: center; gap: var(--swan-sem-space-3);"
        >
          <div
            class="swan-card swan-bgc-accent"
            style="border: 1px solid red; height: 90px; width: 120px;"
          >
            <div
              class="swan-display-flex"
              style="height: 100%; align-items: center; justify-content: center;"
            >
              1
            </div>
          </div>
          <div
            class="swan-card swan-bgc-accent"
            style="border: 1px solid red; height: 90px; width: 160px;"
          >
            <div
              class="swan-display-flex"
              style="height: 100%; align-items: center; justify-content: center;"
            >
              2
            </div>
          </div>
          <div
            class="swan-card swan-bgc-accent"
            style="border: 1px solid red; height: 90px; width: 120px;"
          >
            <div
              class="swan-display-flex"
              style="height: 100%; align-items: center; justify-content: center;"
            >
              3
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="swan-col-6">
      <div class="swan-card swan-card-bordered">
        <div
          class="swan-display-flex"
          style="height: 360px; align-items: center; flex-flow: column wrap; justify-content: center; gap: var(--swan-sem-space-3);"
        >
          <div
            class="swan-card swan-bgc-accent"
            style="border: 1px solid red; height: 90px; width: 120px;"
          >
            <div
              class="swan-display-flex"
              style="height: 100%; align-items: center; justify-content: center;"
            >
              1
            </div>
          </div>
          <div
            class="swan-card swan-bgc-accent"
            style="border: 1px solid red; height: 90px; width: 160px;"
          >
            <div
              class="swan-display-flex"
              style="height: 100%; align-items: center; justify-content: center;"
            >
              2
            </div>
          </div>
          <div
            class="swan-card swan-bgc-accent"
            style="border: 1px solid red; height: 90px; width: 120px;"
          >
            <div
              class="swan-display-flex"
              style="height: 100%; align-items: center; justify-content: center;"
            >
              3
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="swan-grid-container">
  <div class="swan-row">
    <div class="swan-col-6">
      <div class="swan-card swan-card-bordered">
        <div
          class="swan-display-flex"
          style="height: 360px; align-items: center; flex-flow: wrap; justify-content: center; gap: var(--swan-sem-space-3);"
        >
          <div
            class="swan-card swan-bgc-accent"
            style="border: 1px solid red; height: 90px; width: 120px;"
          >
            <div
              class="swan-display-flex"
              style="height: 100%; align-items: center; justify-content: center;"
            >
              1
            </div>
          </div>
          <div
            class="swan-card swan-bgc-accent"
            style="border: 1px solid red; height: 90px; width: 160px;"
          >
            <div
              class="swan-display-flex"
              style="height: 100%; align-items: center; justify-content: center;"
            >
              2
            </div>
          </div>
          <div
            class="swan-card swan-bgc-accent"
            style="border: 1px solid red; height: 90px; width: 120px;"
          >
            <div
              class="swan-display-flex"
              style="height: 100%; align-items: center; justify-content: center;"
            >
              3
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="swan-col-6">
      <div class="swan-card swan-card-bordered">
        <div
          class="swan-display-flex"
          style="height: 360px; align-items: center; flex-flow: column wrap; justify-content: center; gap: var(--swan-sem-space-3);"
        >
          <div
            class="swan-card swan-bgc-accent"
            style="border: 1px solid red; height: 90px; width: 120px;"
          >
            <div
              class="swan-display-flex"
              style="height: 100%; align-items: center; justify-content: center;"
            >
              1
            </div>
          </div>
          <div
            class="swan-card swan-bgc-accent"
            style="border: 1px solid red; height: 90px; width: 160px;"
          >
            <div
              class="swan-display-flex"
              style="height: 100%; align-items: center; justify-content: center;"
            >
              2
            </div>
          </div>
          <div
            class="swan-card swan-bgc-accent"
            style="border: 1px solid red; height: 90px; width: 120px;"
          >
            <div
              class="swan-display-flex"
              style="height: 100%; align-items: center; justify-content: center;"
            >
              3
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Gap

Use gap to put a gutter between the items in the FlexBox. This accepts one of the SWAN standard spacing units as values, 1-13. 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"
    style="height: 260px; align-items: center; flex-flow: wrap; justify-content: center; gap: var(--swan-sem-space-8);"
  >
    <div
      class="swan-card swan-bgc-accent"
      style="border: 1px solid red; height: 120px; width: 90px;"
    >
      <div
        class="swan-display-flex"
        style="height: 100%; align-items: center; justify-content: center;"
      >
        1
      </div>
    </div>
    <div
      class="swan-card swan-bgc-accent"
      style="border: 1px solid red; height: 160px; width: 90px;"
    >
      <div
        class="swan-display-flex"
        style="height: 100%; align-items: center; justify-content: center;"
      >
        2
      </div>
    </div>
    <div
      class="swan-card swan-bgc-accent"
      style="border: 1px solid red; height: 90px; width: 90px;"
    >
      <div
        class="swan-display-flex"
        style="height: 100%; align-items: center; justify-content: center;"
      >
        3
      </div>
    </div>
    <div
      class="swan-card swan-bgc-accent"
      style="border: 1px solid red; height: 120px; width: 90px;"
    >
      <div
        class="swan-display-flex"
        style="height: 100%; align-items: center; justify-content: center;"
      >
        4
      </div>
    </div>
  </div>
</div>

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

Stack/Inline

Use FlexBox to emulate the functionality of these Emu components:

For Stack, use a FlexBox with flexDirection="column", plus a gap property to put a gutter between the children.
For Inline, SWAN usually uses the Grid component instead for horizontal layout, to provide the site-standard spacing between the columns and to create visual harmony from page to page. However, for smaller spaces or unusual layouts, use a FlexBox with with flexDirection="row" and a gap.

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	`"center" \| "end" \| "start" \| "inherit" \| "initial" \| "revert" \| "unset" \| "stretch" \| "flex-end" \| "flex-start" \| "baseline" \| 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	`"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	`"row" \| "inherit" \| "initial" \| "revert" \| "unset" \| "column" \| "column-reverse" \| "row-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	`"center" \| "end" \| "start" \| "inherit" \| "left" \| "right" \| "normal" \| "initial" \| "revert" \| "unset" \| "space-around" \| "space-between" \| "space-evenly" \| "stretch" \| "flex-end" \| "flex-start" \| 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	`0 \| 1 \| 2 \| "0" \| "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" \| null`	false	The gap property places a uniform gap (gutter) between the flex container's children.	null

Was this page useful?

Published: Jan 7, 2022Last updated: Oct 17, 2024

File Input

Fluid Image