Base Reset Base Typography Base Forms Base Buttons Base Tables Utility Layout Utility Typography Utility White Space Utility Responsive States UI Utility Button Sizes UI Utility Groups UI Utility Disclosure States Positions Grid Table Object Color Base Color Forms Color Forms Dark Color Tables Color Buttons Colors Color Borders Flex Object Utility Headings Background Images

# flex-object v1.0.4 Optional

# Flex Object

NPM Github

CSS layout module using flexbox

jxnblk.com/flex-object

The flex-object is a powerful suite of utilities based on the flexible box layout module. These utilities can replace the need for a grid system in many instances, but can also be combined with the Basscss grid for even more possibilities.

Note: browser support for the flexible box layout module is limited. See http://caniuse.com/#feat=flexbox

## .flex

To begin, add the `.flex` class to a parent element. This sets the element to `display: flex` and enables a flex context for all direct child elements.

Link Link

    <div class="flex">
      <a href="#" class="button">Link</a>
      <a href="#" class="button">Link</a>
    </div>

## .flex-wrap

To wrap elements, use the `.flex-wrap` utility.

Home Nav Item Nav Item Nav Item Nav Item Nav Item Nav Item Nav Item

    <div class="flex flex-wrap">
      <a href="#" class="button">Home</a>
      <a href="#" class="button">Nav Item</a>
      <a href="#" class="button">Nav Item</a>
      <a href="#" class="button">Nav Item</a>
      <a href="#" class="button">Nav Item</a>
      <a href="#" class="button">Nav Item</a>
      <a href="#" class="button">Nav Item</a>
      <a href="#" class="button">Nav Item</a>
    </div>

## .flex-column

To arrange items vertically, use the `.flex-column` utility.

Row
Row
Row

    <div class="flex flex-column">
      <div class="p1 blue border">Row</div>
      <div class="p1 blue border">Row</div>
      <div class="p1 blue border">Row</div>
    </div>

## Alignment

Use these utilities to control vertical alignment of child elements.

### .flex-center

To vertically center child elements, add the `.flex-center` class to the parent element.

# Big

Small

    <div class="flex flex-center">
      <div class="flex-auto px2 py4 blue border">
        <h1 class="m0">Big</h1>
      </div>
      <div class="px2 blue border">Small</div>
    </div>

### .flex-stretch

To stretch all elements to fill the height of the parent, use the `.flex-stretch` utility.

# Big

Small

    <div class="flex flex-stretch">
      <div class="flex-auto px2 py4 blue border">
        <h1 class="m0">Big</h1>
      </div>
      <div class="px2 blue border">Small</div>
    </div>

### .flex-stretch with nested content

To ensure nested elements stretch as well, add the `.flex` class to relevant elements.

# Big

Small

    <div class="flex flex-stretch">
      <div class="flex-auto px2 py4 blue border">
        <h1 class="m0">Big</h1>
      </div>
      <div class="flex blue border">
        <div class="px2 white bg-blue">
          Small
        </div>
      </div>
    </div>

### .flex-baseline

To align child elements to their baseline, use the `.flex-baseline` utility.

# Big

Small

    <div class="flex flex-baseline blue border-bottom">
      <div class="flex-auto px2">
        <h1 class="m0">Big</h1>
      </div>
      <div class="px2">Small</div>
    </div>

### .flex-start

To align child elements to the top, use the `.flex-start` utility.

# Big

Small

    <div class="flex flex-start blue border-top">
      <div class="flex-auto px2">
        <h1 class="m0">Big</h1>
      </div>
      <div class="px2">Small</div>
    </div>

### .flex-end

To align child elements to the bottom, use the `.flex-end` utility.

# Big

Small

    <div class="flex flex-end blue border-bottom">
      <div class="flex-auto px2">
        <h1 class="m0">Big</h1>
      </div>
      <div class="px2">Small</div>
    </div>

## Responsive Utilities

To set display flex only at certain breakpoints and up, use the breakpoint-prefixed versions of `.flex`. All other utilities will only work at the set breakpoint.

## .sm-flex

Div
Div

## .md-flex

Div
Div

## .lg-flex

Div
Div

    <div class="sm-flex flex-center mb2 blue">
      <div class="border">
        <h2 class="m0">.sm-flex</h2>
      </div>
      <div class="flex-auto border">Div</div>
      <div class="border">Div</div>
    </div>
    <div class="md-flex flex-center mb2 blue">
      <div class="border">
        <h2 class="m0">.md-flex</h2>
      </div>
      <div class="flex-auto border">Div</div>
      <div class="border">Div</div>
    </div>
    <div class="lg-flex flex-center mb2 blue">
      <div class="border">
        <h2 class="m0">.lg-flex</h2>
      </div>
      <div class="flex-auto border">Div</div>
      <div class="border">Div</div>
    </div>

## Child elements

To control the size and behavior of child elements, use these utilities.

### .flex-auto

To make an element grow or shrink as needed, use the `.flex-auto` utility.

Nav Item Nav Item
Nav Item

    <div class="flex">
      <a href="#" class="button button-nav-light">Nav Item</a>
      <a href="#" class="button button-nav-light">Nav Item</a>
      <div class="flex-auto blue border"></div>
      <a href="#" class="button button-nav-light">Nav Item</a>
    </div>

### .flex-grow

To make an element grow, but not shrink, use the `.flex-grow` utility.

Nav Item Nav Item
Nav Item

    <div class="flex">
      <a href="#" class="button button-nav-light">Nav Item</a>
      <a href="#" class="button button-nav-light">Nav Item</a>
      <div class="flex-grow blue border"></div>
      <a href="#" class="button button-nav-light">Nav Item</a>
    </div>

### .flex-none

To prevent an element from growing or shrinking, use the `.flex-none` utility.

Nav Item Nav Item Nav Item

    <div class="flex">
      <a href="#" class="flex-auto m1 button button-blue">Nav Item</a>
      <a href="#" class="flex-auto m1 button button-blue">Nav Item</a>
      <a href="#" class="flex-none m1 button button-blue">Nav Item</a>
    </div>

## Ordering

To change the order of child elements, use the `.flex-first` and `.flex-last` utilities.

### .flex-first

Nav Item Nav Item First Nav Item

    <div class="flex">
      <a href="#" class="button button-blue">Nav Item</a>
      <a href="#" class="flex-first button button-blue">Nav Item First</a>
      <a href="#" class="button button-blue">Nav Item</a>
    </div>

### .flex-last

Nav Item Nav Item Last Nav Item

    <div class="flex">
      <a href="#" class="button button-blue">Nav Item</a>
      <a href="#" class="flex-last button button-blue">Nav Item Last</a>
      <a href="#" class="button button-blue">Nav Item</a>
    </div>

## Parent Element Utilities

    .flex { display: flex }
    .flex-column  { flex-direction: column }
    .flex-wrap    { flex-wrap: wrap }
    .flex-center   { align-items: center }
    .flex-baseline { align-items: baseline }
    .flex-stretch  { align-items: stretch }
    .flex-start    { align-items: flex-start }
    .flex-end      { align-items: flex-end }

## Child Element Utilities

    .flex-first { order: -1 }
    .flex-last  { order: 1024 }
    .flex-auto { flex: 1 1 auto }
    .flex-grow { flex: 1 0 auto }
    .flex-none { flex: none }

## Custom Media Queries

Adjust these custom media query values to change the breakpoints.

    @custom-media --breakpoint-sm (min-width: 40em);
    @custom-media --breakpoint-md (min-width: 52em);
    @custom-media --breakpoint-lg (min-width: 64em);