Flex - Joystick Design System

Base

Flex item

<div class="joy-flex">
  <div class="joy-flex__item joy-box joy-box--x-small joy-m-around--x-small">
    Flex item
  </div>
  <div class="joy-flex__item joy-box joy-box--x-small joy-m-around--x-small">
    Flex item
  </div>
  <div class="joy-flex__item joy-box joy-box--x-small joy-m-around--x-small">
    Flex item
  </div>
</div>

Direction

Row

Flex item

<div class="joy-flex--row">
  <div class="joy-flex__item joy-box joy-box--x-small joy-m-around--x-small">
    Flex item
  </div>
  <div class="joy-flex__item joy-box joy-box--x-small joy-m-around--x-small">
    Flex item
  </div>
  <div class="joy-flex__item joy-box joy-box--x-small joy-m-around--x-small">
    Flex item
  </div>
</div>

.joy-flex--row is equivilant to .joy-flex as flex-direction: row is the default flex-box behavior.

Column

Flex item

<div class="joy-flex--column">
  <div class="joy-flex__item joy-box joy-box--x-small joy-m-around--x-small">
    Flex item
  </div>
  <div class="joy-flex__item joy-box joy-box--x-small joy-m-around--x-small">
    Flex item
  </div>
  <div class="joy-flex__item joy-box joy-box--x-small joy-m-around--x-small">
    Flex item
  </div>
</div>

Justify Content

Flex start

Flex item

<div class="joy-flex joy-flex--jc-start"  style="height:200px">
  <div class="joy-flex__item joy-box joy-box--x-small joy-m-around--x-small">
    Flex item
  </div>
  <div class="joy-flex__item joy-box joy-box--x-small joy-m-around--x-small">
    Flex item
  </div>
  <div class="joy-flex__item joy-box joy-box--x-small joy-m-around--x-small">
    Flex item
  </div>
</div>

Center

Flex item

<div class="joy-flex joy-flex--jc-center" style="height:200px">
  <div class="joy-flex__item joy-box joy-box--x-small joy-m-around--x-small">
    Flex item
  </div>
  <div class="joy-flex__item joy-box joy-box--x-small joy-m-around--x-small">
    Flex item
  </div>
  <div class="joy-flex__item joy-box joy-box--x-small joy-m-around--x-small">
    Flex item
  </div>
</div>

Flex end

Flex item

<div class="joy-flex joy-flex--jc-end" style="height:200px">
  <div class="joy-flex__item joy-box joy-box--x-small joy-m-around--x-small">
    Flex item
  </div>
  <div class="joy-flex__item joy-box joy-box--x-small joy-m-around--x-small">
    Flex item
  </div>
  <div class="joy-flex__item joy-box joy-box--x-small joy-m-around--x-small">
    Flex item
  </div>
</div>

Space around

Flex item

<div class="joy-flex joy-flex--jc-space-around" style="height:200px">
  <div class="joy-flex__item joy-box joy-box--x-small joy-m-around--x-small">
    Flex item
  </div>
  <div class="joy-flex__item joy-box joy-box--x-small joy-m-around--x-small">
    Flex item
  </div>
  <div class="joy-flex__item joy-box joy-box--x-small joy-m-around--x-small">
    Flex item
  </div>
</div>

Space between

Flex item

<div class="joy-flex joy-flex--jc-space-between" style="height:200px">
  <div class="joy-flex__item joy-box joy-box--x-small joy-m-around--x-small">
    Flex item
  </div>
  <div class="joy-flex__item joy-box joy-box--x-small joy-m-around--x-small">
    Flex item
  </div>
  <div class="joy-flex__item joy-box joy-box--x-small joy-m-around--x-small">
    Flex item
  </div>
</div>

Align items

Stretch

Stretch is the default behavior for flex items.

Flex item

<div class="joy-flex joy-flex--ai-stretch" style="height: 200px;">
  <div class="joy-flex__item joy-box joy-box--x-small joy-m-around--x-small">
    Flex item
  </div>
  <div class="joy-flex__item joy-box joy-box--x-small joy-m-around--x-small">
    Flex item
  </div>
  <div class="joy-flex__item joy-box joy-box--x-small joy-m-around--x-small">
    Flex item
  </div>
</div>

Flex start

Flex item

<div class="joy-flex joy-flex--ai-start" style="height:200px">
  <div class="joy-flex__item joy-box joy-box--x-small joy-m-around--x-small">
    Flex item
  </div>
  <div class="joy-flex__item joy-box joy-box--x-small joy-m-around--x-small">
    Flex item
  </div>
  <div class="joy-flex__item joy-box joy-box--x-small joy-m-around--x-small">
    Flex item
  </div>
</div>

Center

Flex item

<div class="joy-flex joy-flex--ai-center" style="height: 200px;">
  <div class="joy-flex__item joy-box joy-box--x-small joy-m-around--x-small">
    Flex item
  </div>
  <div class="joy-flex__item joy-box joy-box--x-small joy-m-around--x-small">
    Flex item
  </div>
  <div class="joy-flex__item joy-box joy-box--x-small joy-m-around--x-small">
    Flex item
  </div>
</div>

Flex end

Flex item

<div class="joy-flex joy-flex--ai-end" style="height: 200px;">
  <div class="joy-flex__item joy-box joy-box--x-small joy-m-around--x-small">
    Flex item
  </div>
  <div class="joy-flex__item joy-box joy-box--x-small joy-m-around--x-small">
    Flex item
  </div>
  <div class="joy-flex__item joy-box joy-box--x-small joy-m-around--x-small">
    Flex item
  </div>
</div>

Wrap

Nowrap

nowrap is the default behavior of a flex container.

Flex item 1

Flex item 2

Flex item 3

Flex item 4

Flex item 5

Flex item 6

<div class="joy-flex joy-flex--nowrap">
    <div class="joy-box joy-box--x-small joy-m-around--xx-small joy-align--absolute-center" style="height: 100px;width: 200px;">
      Flex item 1
  </div>
    <div class="joy-box joy-box--x-small joy-m-around--xx-small joy-align--absolute-center" style="height: 100px;width: 200px;">
      Flex item 2
  </div>
    <div class="joy-box joy-box--x-small joy-m-around--xx-small joy-align--absolute-center" style="height: 100px;width: 200px;">
      Flex item 3
  </div>
    <div class="joy-box joy-box--x-small joy-m-around--xx-small joy-align--absolute-center" style="height: 100px;width: 200px;">
      Flex item 4
  </div>
    <div class="joy-box joy-box--x-small joy-m-around--xx-small joy-align--absolute-center" style="height: 100px;width: 200px;">
      Flex item 5
  </div>
    <div class="joy-box joy-box--x-small joy-m-around--xx-small joy-align--absolute-center" style="height: 100px;width: 200px;">
      Flex item 6
  </div>
</div>

Wrap

Flex item 1

Flex item 2

Flex item 3

Flex item 4

Flex item 5

Flex item 6

<div class="joy-flex joy-flex--wrap">
    <div class="joy-box joy-box--x-small joy-m-around--xx-small joy-align--absolute-center" style="height: 100px;width: 200px;">
      Flex item 1
  </div>
    <div class="joy-box joy-box--x-small joy-m-around--xx-small joy-align--absolute-center" style="height: 100px;width: 200px;">
      Flex item 2
  </div>
    <div class="joy-box joy-box--x-small joy-m-around--xx-small joy-align--absolute-center" style="height: 100px;width: 200px;">
      Flex item 3
  </div>
    <div class="joy-box joy-box--x-small joy-m-around--xx-small joy-align--absolute-center" style="height: 100px;width: 200px;">
      Flex item 4
  </div>
    <div class="joy-box joy-box--x-small joy-m-around--xx-small joy-align--absolute-center" style="height: 100px;width: 200px;">
      Flex item 5
  </div>
    <div class="joy-box joy-box--x-small joy-m-around--xx-small joy-align--absolute-center" style="height: 100px;width: 200px;">
      Flex item 6
  </div>
</div>

Wrap reverse

Flex item 1

Flex item 2

Flex item 3

Flex item 4

Flex item 5

Flex item 6

<div class="joy-flex joy-flex--wrap-reverse">
    <div class="joy-box joy-box--x-small joy-m-around--xx-small joy-align--absolute-center" style="height: 100px;width: 200px;">
      Flex item 1
  </div>
    <div class="joy-box joy-box--x-small joy-m-around--xx-small joy-align--absolute-center" style="height: 100px;width: 200px;">
      Flex item 2
  </div>
    <div class="joy-box joy-box--x-small joy-m-around--xx-small joy-align--absolute-center" style="height: 100px;width: 200px;">
      Flex item 3
  </div>
    <div class="joy-box joy-box--x-small joy-m-around--xx-small joy-align--absolute-center" style="height: 100px;width: 200px;">
      Flex item 4
  </div>
    <div class="joy-box joy-box--x-small joy-m-around--xx-small joy-align--absolute-center" style="height: 100px;width: 200px;">
      Flex item 5
  </div>
    <div class="joy-box joy-box--x-small joy-m-around--xx-small joy-align--absolute-center" style="height: 100px;width: 200px;">
      Flex item 6
  </div>
</div>

Grow and Shrink

Flex item - Grow 1

Flex item - Grow 2

Flex item - Grow 3

<div class="joy-flex">
  <div class="joy-flex__item joy-flex__item--grow-1 joy-box joy-box--x-small joy-m-around--x-small">
    Flex item - Grow 1
  </div>
  <div class="joy-flex__item joy-flex__item--grow-2 joy-box joy-box--x-small joy-m-around--x-small">
    Flex item - Grow 2
  </div>
  <div class="joy-flex__item joy-flex__item--grow-3 joy-box joy-box--x-small joy-m-around--x-small">
    Flex item - Grow 3
  </div>
</div>

Flex item - Shrink 1

Flex item - Shrink 2

Flex item - Shrink 3

<div class="joy-flex">
  <div class="joy-flex__item joy-flex__item--shrink-1 joy-box joy-box--x-small joy-m-around--x-small">
    Flex item - Shrink 1
  </div>
  <div class="joy-flex__item joy-flex__item--shrink-2 joy-box joy-box--x-small joy-m-around--x-small">
    Flex item - Shrink 2
  </div>
  <div class="joy-flex__item joy-flex__item--shrink-3 joy-box joy-box--x-small joy-m-around--x-small">
    Flex item - Shrink 3
  </div>
</div>