Teutonic CSS

Basic grid

→

This is the bare naked Flexbox grid. There is no fixed size of columns here, instead the number of columns is defined by the number and the size of the childs.

This looks similar to the basic CSS grid but is in fact different. The childs take all space available. See how the last container childs wrap on a next row when your browser window get’s smaller. Also note that the direct childs of the Flebox containers with gap need to be encapsulated.

Syntax: .flex.gap_s

SCSS: _flex.scss

<div class="flex gap_s">
  <div><div class="box text-clip text-mono">&nbsp;</div></div>
  <div><div class="box text-clip text-mono">&nbsp;</div></div>
  <div><div class="box text-clip text-mono">&nbsp;</div></div>
  <div><div class="box text-clip text-mono">&nbsp;</div></div>
  <div><div class="box text-clip text-mono">&nbsp;</div></div>
  <div><div class="box text-clip text-mono">&nbsp;</div></div>
  <div><div class="box text-clip text-mono">&nbsp;</div></div>
  <div><div class="box text-clip text-mono">&nbsp;</div></div>
  <div><div class="box text-clip text-mono">&nbsp;</div></div>
  <div><div class="box text-clip text-mono">&nbsp;</div></div>
  <div><div class="box text-clip text-mono">&nbsp;</div></div>
  <div><div class="box text-clip text-mono">&nbsp;</div></div>
  <div><div class="box text-clip text-mono">&nbsp;</div></div>
  <div><div class="box text-clip text-mono">&nbsp;</div></div>
  <div><div class="box text-clip text-mono">&nbsp;</div></div>
  <div><div class="box text-clip text-mono">&nbsp;</div></div>
  <div><div class="box text-clip text-mono">&nbsp;</div></div>
  <div><div class="box text-clip text-mono">&nbsp;</div></div>
  <div><div class="box text-clip text-mono">&nbsp;</div></div>
  <div><div class="box text-clip text-mono">&nbsp;</div></div>
</div>

Spans

→

A simple application of the flexbox CSS grid system is to stack fixed sized layout modules.

There is no number of fixed columns here. So the Flexbox span classes are based on fractions like span-half instead of span-6.

SCSS: _flex-spans.scss

span-fifth

span-quarter

span-third

span-half

span-full

span-twothird

span-third

span-half

span-quarter

<div class="flex gap_s">
  <div class="span-fifth">
    <div class="box text-clip text-mono bg-b">
      &nbsp;
      <div class="mini-info">span-fifth</div>
    </div>
  </div>
  <div class="span-fifth">
    <div class="box text-clip text-mono bg-c">
      &nbsp;
      <div class="mini-info">span-fifth</div>
    </div>
  </div>
  <div class="span-fifth">
    <div class="box text-clip text-mono bg-d">
      &nbsp;
      <div class="mini-info">span-fifth</div>
    </div>
  </div>
  <div class="span-fifth">
    <div class="box text-clip text-mono bg-e">
      &nbsp;
      <div class="mini-info">span-fifth</div>
    </div>
  </div>
  <div class="span-fifth">
    <div class="box text-clip text-mono bg-f">
      &nbsp;
      <div class="mini-info">span-fifth</div>
    </div>
  </div>
  <div class="span-quarter">
    <div class="box text-clip text-mono bg-g">
      &nbsp;
      <div class="mini-info">span-quarter</div>
    </div>
  </div>
  <div class="span-quarter">
    <div class="box text-clip text-mono bg-h">
      &nbsp;
      <div class="mini-info">span-quarter</div>
    </div>
  </div>
  <div class="span-quarter">
    <div class="box text-clip text-mono bg-i">
      &nbsp;
      <div class="mini-info">span-quarter</div>
    </div>
  </div>
  <div class="span-quarter">
    <div class="box text-clip text-mono bg-j">
      &nbsp;
      <div class="mini-info">span-quarter</div>
    </div>
  </div>
  <div class="span-third">
    <div class="box text-clip text-mono bg-k">
      &nbsp;
      <div class="mini-info">span-third</div>
    </div>
  </div>
  <div class="span-third">
    <div class="box text-clip text-mono bg-l">
      &nbsp;
      <div class="mini-info">span-third</div>
    </div>
  </div>
  <div class="span-third">
    <div class="box text-clip text-mono bg-m">
      &nbsp;
      <div class="mini-info">span-third</div>
    </div>
  </div>
  <div class="span-half">
    <div class="box text-clip text-mono bg-n">
      &nbsp;
      <div class="mini-info">span-half</div>
    </div>
  </div>
  <div class="span-half">
    <div class="box text-clip text-mono bg-o">
      &nbsp;
      <div class="mini-info">span-half</div>
    </div>
  </div>
  <div class="span-full">
    <div class="box text-clip text-mono bg-p">
      &nbsp;
      <div class="mini-info">span-full</div>
    </div>
  </div>
  <div class="span-twothird">
    <div class="box text-clip text-mono bg-q">
      &nbsp;
      <div class="mini-info">span-twothird</div>
    </div>
  </div>
  <div class="span-third">
    <div class="box text-clip text-mono bg-r">
      &nbsp;
      <div class="mini-info">span-third</div>
    </div>
  </div>
  <div class="span-half">
    <div class="box text-clip text-mono bg-s">
      &nbsp;
      <div class="mini-info">span-half</div>
    </div>
  </div>
  <div class="span-quarter">
    <div class="box text-clip text-mono bg-t">
      &nbsp;
      <div class="mini-info">span-quarter</div>
    </div>
  </div>
  <div class="span-quarter">
    <div class="box text-clip text-mono bg-u">
      &nbsp;
      <div class="mini-info">span-quarter</div>
    </div>
  </div>
</div>

Auto span

→

As seen above, flex childs fill up the available space by their number and contents. The span class .span-auto makes a flex child container only as big as it’s contents.

SCSS: _flex-spans.scss

no span class

span-auto

<div class="flex gap_s">
  <div><div class="box bg-1 text-mono text-clip">no span class</div></div>
  <div><div class="box bg-1 text-mono text-clip">no span class</div></div>
  <div class="span-auto"><div class="box bg-warn-3 text-mono text-bold text-clip">span-auto</div></div>
</div>

Fluid span

→

The width of flex child containers is not only defined by the number of containers, but also by their content. They will adjust and distrubute their widths automatically acording to content.

Usage is a bit tricky :)

Rant tweet

[YOUR OWN PERSONAL OPINION ON A TOPIC] > [ARTICLE TITLE]: https://[URL] #[HASHTAG] by @[HANDLE]

Endorsement tweet

I ♥ this post by @[HANDLE] - https://[URL] #[HASHTAG]

Solution tweet

Don't let your [ASSET] [NEGATIVE RESULT]. Find out how to [GOAL] here: https://[URL] #[HASHTAG]

<div class="flex wrap-no gap_m collapse-p">
  <div>
    <div>
      <h5 class="text-clip ma-b_s">Rant tweet</h5>
      <p class="text-hyphen">[YOUR OWN PERSONAL OPINION ON A TOPIC] > [ARTICLE TITLE]: https://[URL] #[HASHTAG] by @[HANDLE]</p>
    </div>
  </div>
  <div>
    <div>
      <h5 class="text-clip ma-b_s">Endorsement tweet</h5>
      <p class="text-hyphen">I ♥ this post by @[HANDLE] - https://[URL] #[HASHTAG]</p>
    </div>
  </div>
  <div>
    <div>
      <h5 class="text-clip ma-b_s">Solution tweet</h5>
      <p class="text-hyphen">Don't let your [ASSET] [NEGATIVE RESULT]. Find out how to [GOAL] here: https://[URL] #[HASHTAG]</p>
    </div>
  </div>
</div>

Gaps

→

Use gutter classes from .gap_xs to .gap_xl to control the space between the objects.

There is no flex-gap property (yet?), so the gutters are based on a negative margin on the grid container and paddings for it’s direct child elements. Direct childs need to be nested one level. The benefit: In contrast to CSS Grid gaps, even large gaps are no problem. Downsides: There is no gap-default here, so you’ll need to set one. Margin-collapsing might appear in certain situations.

SCSS: _flex-gaps.scss

Extra small gap .flex.gap_xs

Small gap .flex.gap_s

Medium gap .flex.gap_m

Large gap .flex.gap_l

<h4 class="flex wrap-no">
  <span>Extra small gap</span>
  <span class="span-auto text-thin text-mono">.flex.gap_xs</span>
</h4>
<div class="flex ma-t_s gap_xs">
  <div class="span-fifth"><div class="box text-clip text-mono bg-b">&nbsp;</div></div>
  <div class="span-fifth"><div class="box text-clip text-mono bg-c">&nbsp;</div></div>
  <div class="span-fifth"><div class="box text-clip text-mono bg-d">&nbsp;</div></div>
  <div class="span-fifth"><div class="box text-clip text-mono bg-e">&nbsp;</div></div>
  <div class="span-fifth"><div class="box text-clip text-mono bg-f">&nbsp;</div></div>
  <div class="span-third"><div class="box text-clip text-mono bg-g">&nbsp;</div></div>
  <div class="span-third"><div class="box text-clip text-mono bg-h">&nbsp;</div></div>
  <div class="span-third"><div class="box text-clip text-mono bg-i">&nbsp;</div></div>
</div>
<h4 class="ma-t_l flex wrap-no">
  <span>Small gap</span>
  <span class="span-auto text-thin text-mono">.flex.gap_s</span>
</h4>
<div class="flex ma-t_s gap_s">
  <div class="span-fifth"><div class="box text-clip text-mono bg-b">&nbsp;</div></div>
  <div class="span-fifth"><div class="box text-clip text-mono bg-c">&nbsp;</div></div>
  <div class="span-fifth"><div class="box text-clip text-mono bg-d">&nbsp;</div></div>
  <div class="span-fifth"><div class="box text-clip text-mono bg-e">&nbsp;</div></div>
  <div class="span-fifth"><div class="box text-clip text-mono bg-f">&nbsp;</div></div>
  <div class="span-third"><div class="box text-clip text-mono bg-g">&nbsp;</div></div>
  <div class="span-third"><div class="box text-clip text-mono bg-h">&nbsp;</div></div>
  <div class="span-third"><div class="box text-clip text-mono bg-i">&nbsp;</div></div>
</div>
<h4 class="ma-t_l flex wrap-no">
  <span>Medium gap</span>
  <span class="span-auto text-thin text-mono">.flex.gap_m</span>
</h4>
<div class="flex ma-t_s gap_m">
  <div class="span-fifth"><div class="box text-clip text-mono bg-b">&nbsp;</div></div>
  <div class="span-fifth"><div class="box text-clip text-mono bg-c">&nbsp;</div></div>
  <div class="span-fifth"><div class="box text-clip text-mono bg-d">&nbsp;</div></div>
  <div class="span-fifth"><div class="box text-clip text-mono bg-e">&nbsp;</div></div>
  <div class="span-fifth"><div class="box text-clip text-mono bg-f">&nbsp;</div></div>
  <div class="span-third"><div class="box text-clip text-mono bg-g">&nbsp;</div></div>
  <div class="span-third"><div class="box text-clip text-mono bg-h">&nbsp;</div></div>
  <div class="span-third"><div class="box text-clip text-mono bg-i">&nbsp;</div></div>
</div>
<h4 class="ma-t_l flex wrap-no">
  <span>Large gap</span>
  <span class="span-auto text-thin text-mono">.flex.gap_l</span>
</h4>
<div class="flex ma-t_s gap_l">
  <div class="span-fifth"><div class="box text-clip text-mono bg-b">&nbsp;</div></div>
  <div class="span-fifth"><div class="box text-clip text-mono bg-c">&nbsp;</div></div>
  <div class="span-fifth"><div class="box text-clip text-mono bg-d">&nbsp;</div></div>
  <div class="span-fifth"><div class="box text-clip text-mono bg-e">&nbsp;</div></div>
  <div class="span-fifth"><div class="box text-clip text-mono bg-f">&nbsp;</div></div>
  <div class="span-third"><div class="box text-clip text-mono bg-g">&nbsp;</div></div>
  <div class="span-third"><div class="box text-clip text-mono bg-h">&nbsp;</div></div>
  <div class="span-third"><div class="box text-clip text-mono bg-i">&nbsp;</div></div>
</div>

No gap

→

The special gutter class .gap-no gives a border-collapsed look.

In this case the direct childs of .flex can be styled, no need for an extra encapsulated padding-div.

SCSS: _flex.scss _gap-no.scss

No gutter .flex.gap-no

<h3 class="flex wrap-no">
  <span>No gutter</span>
  <span class="span-auto text-thin text-mono">.flex.gap-no</span>
</h3>

<div class="flex gap-no ma-t_s">
  <div class="span-fifth box text-clip text-mono bg-b">&nbsp;</div>
  <div class="span-fifth box text-clip text-mono bg-c">&nbsp;</div>
  <div class="span-fifth box text-clip text-mono bg-d">&nbsp;</div>
  <div class="span-fifth box text-clip text-mono bg-e">&nbsp;</div>
  <div class="span-fifth box text-clip text-mono bg-f">&nbsp;</div>
  <div class="span-third box text-clip text-mono bg-g">&nbsp;</div>
  <div class="span-third box text-clip text-mono bg-h">&nbsp;</div>
  <div class="span-third box text-clip text-mono bg-i">&nbsp;</div>
</div>

Horizontal gaps

→

The gutter size alters horizontal and vertical spacing at the same sizing ratio by default. In certain scenatios you want the horizontal and vertical gap spacing to differ.

So you can combine that standard gap classes with an additional horizontal gap class that will overwrite only the horizontal value.

Syntax: .gap-h_{size}

SCSS: _flex-gaps.scss

Horizontally smaller gap

.flex.gap_xs.gap-h_s

Vertically smaller gap

.flex.gap_s.gap-h_xs

<h4 class="flex wrap-no">
  <div>Horizontally smaller gap</div>
  <div class="span-auto text-thin text-mono">.flex.gap_xs.gap-h_s</div>
</h4>
<div class="flex gap_xs gap-h_s ma-t_s text-mono">
  <div class="span-third"><div class="box text-clip bg-b">&nbsp;</div></div>
  <div class="span-third"><div class="box text-clip bg-c">&nbsp;</div></div>
  <div class="span-third"><div class="box text-clip bg-d">&nbsp;</div></div>
  <div class="span-quarter"><div class="box text-clip bg-e">&nbsp;</div></div>
  <div class="span-quarter"><div class="box text-clip bg-f">&nbsp;</div></div>
  <div class="span-quarter"><div class="box text-clip bg-g">&nbsp;</div></div>
  <div class="span-quarter"><div class="box text-clip bg-h">&nbsp;</div></div>
</div>

<h4 class="flex wrap-no ma-t_m">
  <div>Vertically smaller gap</div>
  <div class="span-auto text-thin text-mono">.flex.gap_s.gap-h_xs</div>
</h4>
<div class="flex gap_s gap-h_xs ma-t_s text-mono">
  <div class="span-third"><div class="box text-clip bg-b">&nbsp;</div></div>
  <div class="span-third"><div class="box text-clip bg-c">&nbsp;</div></div>
  <div class="span-third"><div class="box text-clip bg-d">&nbsp;</div></div>
  <div class="span-quarter"><div class="box text-clip bg-e">&nbsp;</div></div>
  <div class="span-quarter"><div class="box text-clip bg-f">&nbsp;</div></div>
  <div class="span-quarter"><div class="box text-clip bg-g">&nbsp;</div></div>
  <div class="span-quarter"><div class="box text-clip bg-h">&nbsp;</div></div>
</div>

Column

→

Add a .column to a .flex container, to change the flex-diretion from row to column. Note how the right column here defines the height of all columns by it’s contents and how the price is always aligned on the bottom.

SCSS: _flex.scss

Pricing Table

Basic

competently negotiate extensible

5 items
10 friends
10 undoes

€10

Pro

progressively pontificate 24/365

10 items
20 friends
20 undoes
20 benchmarks

€100

Enterprise

holisticly aggregate data

20 items
40 friends
40 undoes
40 benchmarks
40 rollbacks
80 snapshots

€1000

<h3 class="pa-b_s bo-b_xs">Pricing Table</h3>
<div class="grid gap-no collapse-p">
  <div class="box pa-no flex column span-4">
    <div class="pa_m bg-a">
      <h3>Basic</h3>
      <p class="text-clip ma-t_s">competently negotiate extensible</p>
      <ul class="ma-t_m bo-t_px">
        <li class="pa-v_xs">5 items</li>
        <li class="pa-v_xs">10 friends</li>
        <li class="pa-v_xs">10 undoes</li>
      </ul>
    </div>
    <div class="span-auto text-right text_xxxl pa_m bg-a ma-t_xs">
      <span class="text-thin">€</span>10
    </div>
  </div>
  <div class="box pa-no flex column span-4 bs_l zi-1">
    <div class="pa_m bg-b">
      <h3>Pro</h3>
      <p class="text-clip ma-t_s">progressively pontificate 24/365</p>
      <ul class="ma-t_m bo-t_px">
        <li class="pa-v_xs">10 items</li>
        <li class="pa-v_xs">20 friends</li>
        <li class="pa-v_xs">20 undoes</li>
        <li class="pa-v_xs">20 benchmarks</li>
      </ul>
    </div>
    <div class="span-auto text-right text_xxxl pa_m bg-b ma-t_xs">
      <span class="text-thin">€</span>100
    </div>
  </div>
  <div class="box pa-no flex column span-4">
    <div class="pa_m bg-c">
      <h3>Enterprise</h3>
      <p class="text-clip ma-t_s">holisticly aggregate data</p>
      <ul class="ma-t_m bo-t_px">
        <li class="pa-v_xs">20 items</li>
        <li class="pa-v_xs">40 friends</li>
        <li class="pa-v_xs">40 undoes</li>
        <li class="pa-v_xs">40 benchmarks</li>
        <li class="pa-v_xs">40 rollbacks</li>
        <li class="pa-v_xs">80 snapshots</li>
      </ul>
    </div>
    <div class="span-auto text-right text_xxxl pa_m bg-c ma-t_xs">
      <span class="text-thin">€</span>1000
    </div>
  </div>
</div>

Nesting

→

You can put a flexbox into a flexbox into a flexbox into a flexbox. BUT the markup here is a nesty. Please consider CSS grid nesting.

<div class="flex gap_m">
  <div class="span-half">
    <div class="box bg-a">
      <div class="flex gap_s">
        <div class="span-half">
          <div class="box bg-d">
            <div class="flex gap_s">
              <div class="span-half">
                <div class="box bg-l"></div>
              </div>
              <div class="span-half">
                <div class="box bg-l"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="span-half">
          <div class="box bg-d">
            <div class="flex gap_s">
              <div class="span-half">
                <div class="box bg-l"></div>
              </div>
              <div class="span-half">
                <div class="box bg-l"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="span-half">
    <div class="box bg-a">
      <div class="flex gap_s">
        <div class="span-half">
          <div class="box bg-d">
            <div class="flex gap_s">
              <div class="span-half">
                <div class="box bg-l"></div>
              </div>
              <div class="span-half">
                <div class="box bg-l"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="span-half">
          <div class="box bg-d">
            <div class="flex gap_s">
              <div class="span-half">
                <div class="box bg-l"></div>
              </div>
              <div class="span-half">
                <div class="box bg-l"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Breakpoints

→

The responsive helper classes for childs: .span-half-t, .span-half-p, collapse-t and collapse-p. -t is for tablet and -p for phone screen resolutions.

Syntax: .span-third.span-half-t

SCSS: _flex-breakpoints.scss

span-third span-half-t

span-quarter span-half-t collapse-p

span-third collapse-p

<div class="flex gap_s">
  <div class="span-third span-half-t text-clip">
    <div class="box text-clip text-mono bg-b">span-third span-half-t</div>
  </div>
  <div class="span-third span-half-t text-clip">
    <div class="box text-clip text-mono bg-c">span-third span-half-t</div>
  </div>
  <div class="span-third span-half-t text-clip">
    <div class="box text-clip text-mono bg-d">span-third span-half-t</div>
  </div>
  <div class="span-third span-half-t text-clip">
    <div class="box text-clip text-mono bg-e">span-third span-half-t</div>
  </div>
  <div class="span-third span-half-t text-clip">
    <div class="box text-clip text-mono bg-f">span-third span-half-t</div>
  </div>
  <div class="span-third span-half-t text-clip">
    <div class="box text-clip text-mono bg-g">span-third span-half-t</div>
  </div>
  <div class="span-quarter span-half-t collapse-p text-clip">
    <div class="box text-clip text-mono bg-h">span-quarter span-half-t collapse-p</div>
  </div>
  <div class="span-quarter span-half-t collapse-p text-clip">
    <div class="box text-clip text-mono bg-i">span-quarter span-half-t collapse-p</div>
  </div>
  <div class="span-quarter span-half-t collapse-p text-clip">
    <div class="box text-clip text-mono bg-j">span-quarter span-half-t collapse-p</div>
  </div>
  <div class="span-quarter span-half-t collapse-p text-clip">
    <div class="box text-clip text-mono bg-k">span-quarter span-half-t collapse-p</div>
  </div>
  <div class="span-third collapse-p text-clip">
    <div class="box text-clip text-mono bg-l">span-third collapse-p</div>
  </div>
  <div class="span-third collapse-p text-clip">
    <div class="box text-clip text-mono bg-m">span-third collapse-p</div>
  </div>
  <div class="span-third collapse-p text-clip">
    <div class="box text-clip text-mono bg-n">span-third collapse-p</div>
  </div>
</div>

Wrapping

→

Childs of .flex will wrap over multiple rows. The childs of .flex.wrap-no will always stay in one line. Resize your browser window to see this in action.

SCSS: _flex.scss

Wrap .flex

just

wrap

around

multiple

lines

whenever

the

viewport

has

not

enough

space.

No wrap .flex.wrap-no

stay

together

one

line

matter

what

viewport.

<h3 class="bo-b_xs pa-b_xs flex">
  <span>Wrap</span>
  <span class="span-auto text-thin text-mono">.flex</span>
</h3>
<div class="flex gap-no">
  <div class="box bg-a">We</div>
  <div class="box bg-b">just</div>
  <div class="box bg-c">wrap</div>
  <div class="box bg-d">around</div>
  <div class="box bg-e">in</div>
  <div class="box bg-f">multiple</div>
  <div class="box bg-g">lines</div>
  <div class="box bg-h">whenever</div>
  <div class="box bg-i">the</div>
  <div class="box bg-j">viewport</div>
  <div class="box bg-k">has</div>
  <div class="box bg-l">not</div>
  <div class="box bg-m">enough</div>
  <div class="box bg-n">space.</div>
</div>
<h3 class="ma-t_l bo-b_xs pa-b_xs flex">
  <span>No wrap</span>
  <span class="span-auto text-thin text-mono">.flex.wrap-no</span>
</h3>
<div class="flex wrap-no gap-no">
  <div class="box text-clip bg-a">We</div>
  <div class="box text-clip bg-b">stay</div>
  <div class="box text-clip bg-c">together</div>
  <div class="box text-clip bg-d">in</div>
  <div class="box text-clip bg-e">one</div>
  <div class="box text-clip bg-f">line</div>
  <div class="box text-clip bg-g">no</div>
  <div class="box text-clip bg-h">matter</div>
  <div class="box text-clip bg-i">what</div>
  <div class="box text-clip bg-j">viewport.</div>
</div>

Align items

→

Use the Flexbox item alignment helper class to position the Flexbox childs on the secondary axis (cross axis). This will set the CSS property align-items.

Are you getting confused by the differnt alignment methods with Flexbox? Don’t bother too much! You are not alone. The axis concept in Flexbox is puzzeling. These methods will be there when you’ll need them.

Syntax: .items-{alignment}

SCSS: _flex-align-items.scss

.items-stretch

.box

↑ Stretched items take all the place. Will not work with gapped flexboxes, as those need to be nested and the strechting only applis to the first child.

.items-end

.box

↑ Items aligned on the end of the secondary axis.

.items-center

.box

↑ Items aligned in the middle of the secondary axis.

<h4 class="text-mono ma-b_xs">.items-stretch</h4>
<div class="bg-0 pa_s text-mono">
  <div class="flex gap-no items-stretch height_xl">
    <div class="bg-d box">.box</div>
    <div class="bg-e box">.box</div>
    <div class="bg-f box">.box</div>
  </div>
</div>
<p class="ma-t_xs text_s">
  &uarr; Stretched items take all the place. Will not work with gapped flexboxes, as those need to be nested and the strechting only applis to the first child.
</p>

<h4 class="text-mono ma-t_m ma-b_xs">.items-end</h4>
<div class="bg-0 pa_s text-mono">
  <div class="flex gap-no items-end height_xl">
    <div class="bg-d box">.box</div>
    <div class="bg-e box">.box</div>
    <div class="bg-f box">.box</div>
  </div>
</div>
<p class="ma-t_xs text_s">
  &uarr; Items aligned on the end of the secondary axis.
</p>

<h4 class="text-mono ma-t_m ma-b_xs">.items-center</h4>
<div class="bg-0 pa_s text-mono">
  <div class="flex gap-no items-center height_xl">
    <div class="bg-d box">.box</div>
    <div class="bg-e box">.box</div>
    <div class="bg-f box">.box</div>
  </div>
</div>
<p class="ma-t_xs text_s">
  &uarr; Items aligned in the middle of the secondary axis.
</p>

Align content

→

Use the Flexbox content alignment helper class to position ALL childs on the main axis. Note, this has no effect when the flexbox has only a single line. It needs to wrap over multiple lines. This will set the CSS property align-content, see the MDN page.

This one of the puzzling Flexbox features. Only when those boxes create two lines, the property will apply.

Syntax: .content-{alignment}

SCSS: _flex-align-content.scss

.content-end

.box.auto

↑ Items are placed on the end.

.content-center

.box.auto

↑ Items are placed in the middle.

.content-between

.box.auto

↑ Items are placed in between, starting at start, ending at end.

.content-around

.box.auto

↑ Items are played around with some space left on start and end.

<h4 class="text-mono ma-b_xs">.content-end</h4>
<div class="bg-0 pa_s text-mono">
  <div class="flex wrap gap-no content-end min-height_xl">
    <div class="bg-d box span-auto">.box.auto</div>
    <div class="bg-e box span-auto">.box.auto</div>
    <div class="bg-f box span-auto">.box.auto</div>
    <div class="bg-g box span-auto">.box.auto</div>
    <div class="bg-h box span-auto">.box.auto</div>
    <div class="bg-i box span-auto">.box.auto</div>
    <div class="bg-j box span-auto">.box.auto</div>
    <div class="bg-k box span-auto">.box.auto</div>
    <div class="bg-l box span-auto">.box.auto</div>
    <div class="bg-m box span-auto">.box.auto</div>
    <div class="bg-n box span-auto">.box.auto</div>
    <div class="bg-o box span-auto">.box.auto</div>
    <div class="bg-p box span-auto">.box.auto</div>
    <div class="bg-q box span-auto">.box.auto</div>
  </div>
</div>
<p class="ma-t_xs text_s">
  &uarr; Items are placed on the end.
</p>

<h4 class="text-mono ma-t_m ma-b_xs">.content-center</h4>
<div class="bg-0 pa_s text-mono">
  <div class="flex wrap gap-no content-center min-height_xl">
    <div class="bg-d box span-auto">.box.auto</div>
    <div class="bg-e box span-auto">.box.auto</div>
    <div class="bg-f box span-auto">.box.auto</div>
    <div class="bg-g box span-auto">.box.auto</div>
    <div class="bg-h box span-auto">.box.auto</div>
    <div class="bg-i box span-auto">.box.auto</div>
    <div class="bg-j box span-auto">.box.auto</div>
    <div class="bg-k box span-auto">.box.auto</div>
    <div class="bg-l box span-auto">.box.auto</div>
    <div class="bg-m box span-auto">.box.auto</div>
    <div class="bg-n box span-auto">.box.auto</div>
    <div class="bg-o box span-auto">.box.auto</div>
    <div class="bg-p box span-auto">.box.auto</div>
    <div class="bg-q box span-auto">.box.auto</div>
  </div>
</div>
<p class="ma-t_xs text_s">
  &uarr; Items are placed in the middle.
</p>

<h4 class="text-mono ma-t_m ma-b_xs">.content-between</h4>
<div class="bg-0 pa_s text-mono">
  <div class="flex wrap gap-no content-between min-height_xl">
    <div class="bg-d box span-auto">.box.auto</div>
    <div class="bg-e box span-auto">.box.auto</div>
    <div class="bg-f box span-auto">.box.auto</div>
    <div class="bg-g box span-auto">.box.auto</div>
    <div class="bg-h box span-auto">.box.auto</div>
    <div class="bg-i box span-auto">.box.auto</div>
    <div class="bg-j box span-auto">.box.auto</div>
    <div class="bg-k box span-auto">.box.auto</div>
    <div class="bg-l box span-auto">.box.auto</div>
    <div class="bg-m box span-auto">.box.auto</div>
    <div class="bg-n box span-auto">.box.auto</div>
    <div class="bg-o box span-auto">.box.auto</div>
    <div class="bg-p box span-auto">.box.auto</div>
    <div class="bg-q box span-auto">.box.auto</div>
  </div>
</div>
<p class="ma-t_xs text_s">
  &uarr; Items are placed in between, starting at start, ending at end.
</p>

<h4 class="text-mono ma-t_m ma-b_xs">.content-around</h4>
<div class="bg-0 pa_s text-mono">
  <div class="flex wrap gap-no content-around min-height_xl">
    <div class="bg-d box span-auto">.box.auto</div>
    <div class="bg-e box span-auto">.box.auto</div>
    <div class="bg-f box span-auto">.box.auto</div>
    <div class="bg-g box span-auto">.box.auto</div>
    <div class="bg-h box span-auto">.box.auto</div>
    <div class="bg-i box span-auto">.box.auto</div>
    <div class="bg-j box span-auto">.box.auto</div>
    <div class="bg-k box span-auto">.box.auto</div>
    <div class="bg-l box span-auto">.box.auto</div>
    <div class="bg-m box span-auto">.box.auto</div>
    <div class="bg-n box span-auto">.box.auto</div>
    <div class="bg-o box span-auto">.box.auto</div>
    <div class="bg-p box span-auto">.box.auto</div>
    <div class="bg-q box span-auto">.box.auto</div>
  </div>
</div>
<p class="ma-t_xs text_s">
  &uarr; Items are played around with some space left on start and end.
</p>

Align justify

→

Use the Flexbox justify alignment helper class to position ALL childs on the main axis. This will only work when the items are NOT streched over the full space. This will set the CSS property justify-content.

Syntax: .justify-{alignment}

SCSS: _flex-align-justify.scss

.justify-end

.box.auto

↑ All items pushed to the end of the main axis.

.justify-center

.box.auto

↑ All items aligned on the middle of the main axis.

.justify-between

.box.auto

↑ Items are trying to get away from each other, starting at start, ending at end.

.justify-around

.box.auto

↑ Items are trying to get away from each other, with some space left to start and end.

<h4 class="text-mono ma-b_xs">.justify-end</h4>
<div class="bg-0 pa_s text-mono">
  <div class="flex gap-no justify-end">
    <div class="bg-d box span-auto">.box.auto</div>
    <div class="bg-e box span-auto">.box.auto</div>
    <div class="bg-f box span-auto">.box.auto</div>
  </div>
</div>
<p class="ma-t_xs text_s">
  &uarr; All items pushed to the end of the main axis.
</p>

<h4 class="text-mono ma-t_m ma-b_xs">.justify-center</h4>
<div class="bg-0 pa_s text-mono">
  <div class="flex gap-no justify-center">
    <div class="bg-d box span-auto">.box.auto</div>
    <div class="bg-e box span-auto">.box.auto</div>
    <div class="bg-f box span-auto">.box.auto</div>
  </div>
</div>
<p class="ma-t_xs text_s">
  &uarr; All items aligned on the middle of the main axis.
</p>

<h4 class="text-mono ma-t_m ma-b_xs">.justify-between</h4>
<div class="bg-0 pa_s text-mono">
  <div class="flex gap-no justify-between">
    <div class="bg-d box span-auto">.box.auto</div>
    <div class="bg-e box span-auto">.box.auto</div>
    <div class="bg-f box span-auto">.box.auto</div>
  </div>
</div>
<p class="ma-t_xs text_s">
  &uarr; Items are trying to get away from each other, starting at start, ending at end.
</p>

<h4 class="text-mono ma-t_m ma-b_xs">.justify-around</h4>
<div class="bg-0 pa_s text-mono">
  <div class="flex gap-no justify-around">
    <div class="bg-d box span-auto">.box.auto</div>
    <div class="bg-e box span-auto">.box.auto</div>
    <div class="bg-f box span-auto">.box.auto</div>
  </div>
</div>
<p class="ma-t_xs text_s">
  &uarr; Items are trying to get away from each other, with some space left to start and end.
</p>

Align self

→

Use the Flexbox self alignment helper classes to position the Flexbox childs individually on the secondary axis.

Syntax: .self-{position}

SCSS: _flex-align-self.scss

Align self in flexbox row

self-start

self-center

self-end

↑ In a Flexbox row, the main axis is horizontal, so the end is on the right — in case of left to right.

Align self in flexbox column

self-start

self-center

self-end

↑ In a Flexbox column, the main axis is vertical, so the end is on the bottom — in case of top to bottom.

<h3 class="ma-b_xs">Align self in flexbox row</h3>
<div class="bg-0 pa_s text-mono">
  <div class="flex height_xl">
    <div class="self-start bg-d box">self-start</div>
    <div class="self-center bg-e box">self-center</div>
    <div class="self-end bg-f box">self-end</div>
  </div>
</div>
<p class="ma-t_xs text_s">
  &uarr; In a Flexbox row, the main axis is horizontal, so the end is on the right — in case of left to right.
</p>

<h3 class="ma-t_m ma-b_xs">Align self in flexbox column</h3>
<div class="bg-0 pa_s text-mono">
  <div class="flex column height_xl">
    <div class="self-start bg-q box">self-start</div>
    <div class="self-center bg-r box">self-center</div>
    <div class="self-end bg-s box">self-end</div>
  </div>
</div>
<p class="ma-t_xs text_s">
  &uarr; In a Flexbox column, the main axis is vertical, so the end is on the bottom — in case of top to bottom.
</p>

Align margin

→

With the auto margin helper classes you can align items in a Flexbox on the main axis.

Someday, there will be a justify-self property in Flexbox to make this a little more semantic and less hacky. Don’t get confused by the other alignment methods here.

Syntax: .ma{-direction?}-auto

SCSS: _margin-auto.scss

Flexbox row

ma-h-auto

no extra class

ma-l-auto

↑ Useful for horizontal navigations.

Flexbox column

ma-v-auto

no extra class

ma-t-auto

<h3>Flexbox row</h3>
<div class="bg-0 pa_s ma-t_xs flex">
  <div data-tooltip="margin-horizontal-auto" class="span-auto bg-j box ma-h-auto text-mono">ma-h-auto</div>
</div>
<div class="bg-0 pa_s ma-t_xs flex">
  <div class="box span-auto bg-a text-mono text-clip">no extra class</div>
  <div data-tooltip="margin-left-auto" class="span-auto bg-j box ma-l-auto text-mono">ma-l-auto</div>
</div>
<p class="ma-t_xs text_s">
  &uarr; Useful for horizontal navigations.
</p>

<h3 class="ma-t_m">Flexbox column</h3>
<div class="grid gap_s">
  <div class="span-6 bg-0 pa_s flex column height_xl">
    <div data-tooltip="margin-vertical-auto" class="span-auto bg-j box ma-v-auto text-mono text-center">ma-v-auto</div>
  </div>
  <div class="span-6 bg-0 pa_s flex column height_xl">
    <div class="box span-auto bg-a text-mono text-clip">no extra class</div>
    <div data-tooltip="margin-top-auto" class="span-auto bg-j box ma-t-auto text-mono text-center">ma-t-auto</div>
  </div>
</div>

Centered

→

Here is a two ways on how to perfectly center and element within another with Flexbox.

Vertically and horizontally centered 1

Hello

.justify-center.items-center

↑ Combines the justify-center items-center on the flex element.

Vertically and horizontally centered 2

.self-center.span-auto

↑ Combines span-auto and margin helpers on the element itself.

<h3 class="ma-t_m ma-b_xs">Vertically and horizontally centered 1</h3>
<div class="bg-0 pa_s flex justify-center items-center height_xl pos-rel">
  <div class="span-auto bg-a box">Hello</div>
  <div class="mini-info text-mono">.justify-center.items-center</div>
</div>
<p class="ma-t_xs text_s">
  &uarr; Combines the justify-center items-center on the flex element.
</p>

<h3 class="ma-t_m ma-b_xs">Vertically and horizontally centered 2</h3>
<div class="bg-0 pa_s flex height_xl text-mono">
  <div class="span-auto bg-j box ma-h-auto self-center">.self-center.span-auto</div>
</div>
<p class="ma-t_xs text_s">
  &uarr; Combines span-auto and <a href="#auto-margin">margin helpers</a> on the element itself.
</p>

Auto-height

→

Good to know: The highest grid child defines the height for all siblings in a row. But in reality you will likely not see this visially right away, as when using Flexbox with gaps, an additional positionig container is invisible.

SCSS: _flex.scss

iaculis eu non diam phasellus vestibulum lorem sed risus ultricies tristique nulla aliquet enim tortor at auctor urna nunc id cursus metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis orci a scelerisque purus semper eget duis at tellus at urna condimentum mattis pellentesque id nibh tortor id aliquet lectus proin nibh nisl condimentum id venenatis a condimentum vitae sapien pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas sed tempus urna et pharetra pharetra massa massa ultricies mi quis hendrerit dolor magna eget est lorem ipsum dolor sit amet consectetur adipiscing elit pellentesque habitant morbi

Si tacuisses, philosophus mansisses.

Alea iacta est.

Ave Caesar, morituri te salutant.

<div class="flex gap-no text-serif">
  <div class="span-half box bg-a text-hyphen">
    iaculis eu non diam phasellus vestibulum lorem sed risus ultricies tristique nulla aliquet enim tortor at auctor urna nunc id cursus metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis orci a scelerisque purus semper eget duis at tellus at urna condimentum mattis pellentesque id nibh tortor id aliquet lectus proin nibh nisl condimentum id venenatis a condimentum vitae sapien pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas sed tempus urna et pharetra pharetra massa massa ultricies mi quis hendrerit dolor magna eget est lorem ipsum dolor sit amet consectetur adipiscing elit pellentesque habitant morbi
  </div>
  <div class="span-half box bg-d text-hyphen">
    Si tacuisses, philosophus mansisses.
  </div>
  <div class="span-half box bg-j text-hyphen">
    Alea iacta est.
  </div>
  <div class="span-half box bg-o text-hyphen">
    Ave Caesar, morituri te salutant.
  </div>
</div>

Flexbox is for flexiblity

Rant tweet

Endorsement tweet

Solution tweet

Extra small gap .flex.gap_xs

Small gap .flex.gap_s

Medium gap .flex.gap_m

Large gap .flex.gap_l

No gutter .flex.gap-no

Horizontally smaller gap .flex.gap_xs.gap-h_s

Vertically smaller gap .flex.gap_s.gap-h_xs

Pricing Table

Basic

Pro

Enterprise

Wrap .flex

No wrap .flex.wrap-no

.items-stretch

.items-end

.items-center

.content-end

.content-center

.content-between

.content-around

.justify-end

.justify-center

.justify-between

.justify-around

Align self in flexbox row

Align self in flexbox column

Flexbox row

Flexbox column

Vertically and horizontally centered 1

Vertically and horizontally centered 2

Horizontally smaller gap

.flex.gap_xs.gap-h_s

Vertically smaller gap

.flex.gap_s.gap-h_xs