.ch-flex--auto
.ch-flex--none

.ch-justify-content--start
.ch-justify-content--center
.ch-justify-content--end
.ch-justify-content--between
.ch-justify-content--around

.ch-align-items--stretch
.ch-align-items--start
.ch-align-items--center
.ch-align-items--end
.ch-align-items--baseline

.ch-flex-flow--row-wrap
.ch-flex-flow--row-nowrap
.ch-flex-flow--column-wrap
.ch-flex-flow--column-nowrap

.ch-flex-direction--row
.ch-flex-direction--row-reverse
.ch-flex-direction--column
.ch-flex-direction--column-reverse

---

Flex examples

How to solve some common layout problems with the flexbox helper classes.

---

Horizontal and vertical alignment

<div class="ch-display--flex ch-align-items--center">
  <p class="ch-mb--0">
    Use margin-left: auto to easily float an element to the right. We can
    vertically align items, too.
  </p>
  <a href="/" class="ch-btn ch-btn--primary ch-ml--auto">Button</a>
</div>

---

Equal heights

<div class="ch-display--flex">
  <div
    class="ch-width--4 ch-mh--1 ch-pa--3 ch-bg--white ch-ba--1 ch-rounded ch-bc--grey-3 ch-shadow--sm ch-display--flex ch-flex-flow--column-nowrap"
  >
    <h3>Card 1</h3>
    <p>Flex is great for making cards with equal height.</p>
    <p class="ch-mb--0 ch-mt--auto">Sticky footer</p>
  </div>

  <div
    class="ch-width--4 ch-mh--1 ch-pa--3 ch-bg--white ch-ba--1 ch-rounded ch-bc--grey-3 ch-shadow--sm ch-display--flex ch-flex-flow--column-nowrap"
  >
    <h3>Card 2</h3>
    <p>
      Even if one has more content than the others, they’ll all stretch to
      match.
    </p>
    <p class="ch-mb--0 ch-mt--auto">Sticky footer</p>
  </div>

  <div
    class="ch-width--4 ch-mh--1 ch-pa--3 ch-bg--white ch-ba--1 ch-rounded ch-bc--grey-3 ch-shadow--sm ch-display--flex ch-flex-flow--column-nowrap"
  >
    <h3>Card 3</h3>
    <p>
      Plus if your card is display: flex, you can set flex-flow: column nowrap,
      and use margin-top: auto to make a sticky footer.
    </p>
    <p class="ch-mb--0 ch-mt--auto">Sticky footer</p>
  </div>
</div>

---

Horizontal alignment with multiple elements

Set justify-content: space-between on the outer wrapper:

<div
  class="ch-display--flex ch-align-items--center ch-justify-content--between"
>
  <span class="ch-width--2 ch-bg--grey-2 ch-pa--4">Logo</span>
  <p class="ch-fs--6 ch-mb--0">My cool site</p>
  <a href="/" class="ch-btn ch-btn--primary">Menu</a>
</div>

---

Or use auto margins on the outer elements. This time the menu button was wrapped in a fixed-width element matching the logo, so that the text is visually aligned in the centre of the page.

<div class="ch-display--flex ch-align-items--center">
  <span class="ch-width--2 ch-bg--grey-2 ch-pa--4 ch-mr--auto">Logo</span>
  <p class="ch-fs--6 ch-mb--0">My cool site</p>
  <div class="ch-width--2 ch-ml--auto ch-display--flex ch-justify-content--end">
    <a href="/" class="ch-btn ch-btn--primary">Menu</a>
  </div>
</div>

---

Modal with fixed header and footer

<div
  class="ch-display--flex ch-flex-flow--column-nowrap ch-bg--white ch-ba--1 ch-bc--grey-3 ch-rounded ch-shadow--sm"
  style="height: 275px;"
>
  <div class="ch-flex--none ch-pa--3 ch-bb--1 ch-bc--grey-3">
    <p class="ch-mb--0">Header</p>
  </div>

  <div class="ch-flex--auto ch-pa--3" style="overflow-y: scroll;">
    <p>First we set the modal’s outer wrapper to flex-flow: column nowrap.</p>
    <p>
      Then we set the header and footer elements to flex: none. That’s a
      shorthand that means these elements must be their exact size, they can’t
      grow or shrink to fit the space.
    </p>
    <p>
      Setting the body element to flex: auto has the opposite effect - that’s a
      shorthand that means grow to take up whatever space is available.
    </p>
    <p class="ch-mb--0">
      We also set overflow-y: scroll, so that the content inside can be
      scrolled. Set any padding on the content inside the body to get a
      perfectly aligned scrollbar.
    </p>
  </div>

  <div class="ch-flex--none ch-pa--3 ch-bt--1 ch-bc--grey-3">
    <p class="ch-mb--0">Footer</p>
  </div>
</div>