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.
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.
<divclass="flex">
<divclass="p1 border">Hamburger</div>
<divclass="p1 border">Hamburger</div>
</div>
.flex-wrap
To wrap elements, use the .flex-wrap utility.
<divclass="flex flex-wrap">
<divclass="p1 border">Hamburger</div>
<divclass="p1 border">Hamburger</div>
<divclass="p1 border">Hamburger</div>
<divclass="p1 border">Hamburger</div>
<divclass="p1 border">Hamburger</div>
<divclass="p1 border">Hamburger</div>
<divclass="p1 border">Hamburger</div>
<divclass="p1 border">Hamburger</div>
<divclass="p1 border">Hamburger</div>
<divclass="p1 border">Hamburger</div>
<divclass="p1 border">Hamburger</div>
<divclass="p1 border">Hamburger</div>
</div>
.flex-column
To arrange items vertically, use the .flex-column utility.
<divclass="flex flex-column">
<divclass="p1 border">Hamburger</div>
<divclass="p1 border">Hamburger</div>
<divclass="p1 border">Hamburger</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.
<divclass="flex flex-center">
<divclass="flex-auto px2 py4 blue border">
<h1class="m0">Hamburger</h1>
</div>
<divclass="px2 blue border">Hot dog</div>
</div>
.flex-stretch
To stretch all elements to fill the height of the parent, use the .flex-stretch utility.
<divclass="flex flex-stretch">
<divclass="flex-auto px2 py4 blue border">
<h1class="m0">Hamburger</h1>
</div>
<divclass="px2 blue border">Hot dog</div>
</div>
.flex-stretch with nested content
To ensure nested elements stretch as well, add the .flex class to relevant elements.
<divclass="flex flex-stretch">
<divclass="flex-auto px2 py4 blue border">
<h1class="m0">Hamburger</h1>
</div>
<divclass="flex blue border">
<divclass="px2 white bg-blue">
Hot dog
</div>
</div>
</div>
.flex-baseline
To align child elements to their baseline, use the .flex-baseline utility.
<divclass="flex flex-baseline blue border-bottom">
<divclass="flex-auto px2">
<h1class="m0">Hamburger</h1>
</div>
<divclass="px2">Hot dog</div>
</div>
.flex-start
To align child elements to the top, use the .flex-start utility.
<divclass="flex flex-start blue border-top">
<divclass="flex-auto px2">
<h1class="m0">Hamburger</h1>
</div>
<divclass="px2">Hot dog</div>
</div>
.flex-end
To align child elements to the bottom, use the .flex-end utility.
<divclass="flex flex-end blue border-bottom">
<divclass="flex-auto px2">
<h1class="m0">Hamburger</h1>
</div>
<divclass="px2">Hot dog</div>
</div>
Justify
To automatically fill the space between child elements, use .flex-justify.
<divclass="flex flex-justify">
<divclass="p1 border">Burger</div>
<divclass="p1 border">Burger</div>
<divclass="p1 py1 border">Burger</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.
<divclass="sm-flex flex-center mb2 blue">
<divclass="p1 border">
<h2class="m0">.sm-flex</h2>
</div>
<divclass="flex-auto p1 border">Hamburger</div>
<divclass="p1 border">Hamburger</div>
</div>
<divclass="md-flex flex-center mb2 blue">
<divclass="p1 border">
<h2class="m0">.md-flex</h2>
</div>
<divclass="flex-auto p1 border">Hamburger</div>
<divclass="p1 border">Hamburger</div>
</div>
<divclass="lg-flex flex-center mb2 blue">
<divclass="p1 border">
<h2class="m0">.lg-flex</h2>
</div>
<divclass="flex-auto p1 border">Hamburger</div>
<divclass="p1 border">Hamburger</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.
<divclass="flex">
<divclass="px2 py1 border">Hamburger</div>
<divclass="px2 py1 border">Hamburger</div>
<divclass="flex-auto blue border"></div>
<divclass="px2 py1 border">Hamburger</div>
</div>
.flex-grow
To make an element grow, but not shrink, use the .flex-grow utility.
<divclass="flex">
<divclass="px2 py1 border">Hamburger</div>
<divclass="px2 py1 border">Hamburger</div>
<divclass="flex-grow blue border"></div>
<divclass="px2 py1 border">Hamburger</div>
</div>
.flex-none
To prevent an element from growing or shrinking, use the .flex-none utility.