Flexy, Your friendly flexbox grid system

Responsive

Media query defaults to xs, sm, md, lg, xlg, similar to Bootstrap's media query breakpoints. However, these breakpoints are customiziable with the $grid-settings variable in Stylus.

The columns are percentage based widths which allows for fluid resizing in between each media query breakpoints.

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-md-6 col-lg-3">This is responsive.</div>
  </div>
</div>

Column offsets

This moves columns to the right.

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-md-8 col-md-offset-4">Offsets can be responsive.</div>
  </div>
</div>

Automatic columns

Without specify the number of columns to span, just add columns and it will automatically space columns evenly.

<div class="container">
  <div class="row">
    <div class="col-auto">Now sure how many columns you'll need.</div>
    <div class="col-auto">Add another and they'll be evenly distributed.</div>
  </div>
</div>

Column distribution

Around

<div class="container">
  <div class="row around-xs">
    <div class="col-xs-4">Put spaces around each</div>
    <div class="col-xs-4">column</div>
    <div class="col-xs-4">evenly and responsively.</div>
  </div>
</div>

Between

<div class="container">
  <div class="row between-xs">
    <div class="col-xs-4">Put spaces between each</div>
    <div class="col-xs-4">column</div>
    <div class="col-xs-4">evenly, and responsively.</div>
  </div>
</div>

Gridception

Nesting grids inside of grids.

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-4">
      <div class="row">
        <div class="col-xs-6"></div>
        <div class="col-xs-6"></div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-8">
      <div class="row">
        <div class="col-xs-8">
            <div class="row">
              <div class="col-xs-6"></div>
              <div class="col-xs-6"></div>
            </div>
          </div>
        </div>
        <div class="col-xs-4"></div>
      </div>
    </div>
  </div>
</div>

Vertical alignments

Top

<div class="container">
  <div class="row top-xs">
    <div class="col-xs-6"></div>
    <div class="col-xs-6"></div>
  </div>
</div>

Middle

<div class="container">
  <div class="row middle-xs">
    <div class="col-xs-6"></div>
    <div class="col-xs-6"></div>
  </div>
</div>

Bottom

<div class="container">
  <div class="row bottom-xs">
    <div class="col-xs-6"></div>
    <div class="col-xs-6"></div>
  </div>
</div>

Horizontal alignments

Start

<div class="container">
  <div class="row start-xs">
    <div class="col-xs-4"></div>
  </div>
</div>

Center

<div class="container">
  <div class="row center-xs">
    <div class="col-xs-4"></div>
  </div>
</div>

End

<div class="container">
  <div class="row end-xs">
    <div class="col-xs-4"></div>
  </div>
</div>

Column (re)order

First

<div class="container">
  <div class="row">
    <div class="col-xs-2">1</div>
    <div class="col-xs-2">2</div>
    <div class="col-xs-2">3</div>
    <div class="col-xs-2">4</div>
    <div class="col-xs-2 first-xs">5</div>
    <div class="col-xs-2">6</div>
  </div>
</div>

Last

<div class="container">
  <div class="row">
    <div class="col-xs-2">1</div>
    <div class="col-xs-2 last-xs">2</div>
    <div class="col-xs-2">3</div>
    <div class="col-xs-2">4</div>
    <div class="col-xs-2">5</div>
    <div class="col-xs-2">6</div>
  </div>
</div>

Reverse order

<div class="container">
  <div class="row reverse">
    <div class="col-xs-2">1</div>
    <div class="col-xs-2">2</div>
    <div class="col-xs-2">3</div>
    <div class="col-xs-2">4</div>
    <div class="col-xs-2">5</div>
    <div class="col-xs-2">6</div>
  </div>
</div>

Have some fun.