Flex
Simple grid system based on Flexbox.
Install
Download
- CSS
css/flex.min.css
minified, orcss/flex.css
un-minified
Usage
General
.flex
.flex
defines a flex container. It enables a flex context for all its direct children, which are called flex items.
.flex__*
Different column sizes can be defined by using .flex__*
.
<div class="container">
<div class="flex flex--column">
<div class="flex__20"></div>
<div class="flex__25"></div>
<div class="flex__33"></div>
<div class="flex__50"></div>
<div class="flex__66"></div>
<div class="flex__75"></div>
<div class="flex__80"></div>
<div class="flex__100"></div>
</div>
</div>
.flex__auto
.flex__auto
creates a column that will take up however much space is left.
<div class="container">
<div class="flex">
<div class="flex__auto"></div>
<div class="flex__auto"></div>
</div>
</div>
.flex--offset-*
Offset a column by adding an offset class.
<div class="container">
<div class="flex flex--column">
<div class="flex--offset-20"></div>
<div class="flex--offset-25"></div>
<div class="flex--offset-33"></div>
<div class="flex--offset-50"></div>
<div class="flex--offset-66"></div>
<div class="flex--offset-75"></div>
<div class="flex--offset-80"></div>
</div>
</div>
Responsive layouts
The grid system lets you create responsive layouts easily by giving you the option to define different column widths for each viewport. The viewports are determined by 4 different breakpoints:
Small
Viewport >= 500px
.flex__sm-*
.flex--offset-sm-*
Medium
Viewport >= 700px
.flex__md-*
.flex--offset-md-*
Large
Viewport >= 1000px
.flex__lg-*
.flex--offset-lg-*
Viewport >= 1200px
.flex__xl-*
.flex--offset-xl-*
<div class="container">
<div class="flex">
<div class="flex__md-50 flex__lg-25"></div>
<div class="flex__md-50 flex__lg-25"></div>
<div class="flex__md-50 flex__lg-25"></div>
<div class="flex__md-50 flex__lg-25"></div>
</div>
</div>
Gutters
The flex items have horizontal padding to create the gutters between individual flex items. You can remove the margin from the flex container and the padding from the flex items with .flex--no-gutters
.
<div class="container">
<div class="flex flex--no-gutters">
<div class="flex__50"></div>
<div class="flex__50"></div>
</div>
</div>
Nesting
To nest your content with the default grid, add a new .flex
and set of .flex__*
columns within an existing .flex__*
column.
<div class="container">
<div class="flex">
<div class="flex__33"></div>
<div class="flex__66">
<div class="flex">
<div class="flex__33"></div>
<div class="flex__33"></div>
<div class="flex__33"></div>
</div>
</div>
</div>
</div>
Flex direction
flex-direction
defines the direction in which the flex items are placed in the flex container.
.flex--row
This is the default value. Left to right in ltr
and right to left in rtl
.
<div class="container">
<div class="flex flex--row">
<div class="flex__33"></div>
<div class="flex__66"></div>
</div>
</div>
.flex--row-reverse
Setting the direction to row-reverse. Right to left in ltr
and left to right in rtl
.
<div class="container">
<div class="flex flex--row-reverse">
<div class="flex__33"></div>
<div class="flex__66"></div>
</div>
</div>
.flex--column
.flex--column
behaves the same way as .flex--row
but top to bottom.
<div class="container">
<div class="flex flex--column">
<div class="flex__33"></div>
<div class="flex__66"></div>
</div>
</div>
.flex--column-reverse
.flex--column-reverse
behaves the same way as .flex--row-reverse
but bottom to top.
<div class="container">
<div class="flex flex--column-reverse">
<div class="flex__33"></div>
<div class="flex__66"></div>
</div>
</div>
Flex wrap
flex-wrap
defines whether the flex items are forced in a single line or can be wraped into multiple lines.
.flex--nowrap
This is the default value, the flex items will not wrap.
<div class="container">
<div class="flex flex--nowrap">
<div class="flex__50"></div>
<div class="flex__66"></div>
</div>
</div>
.flex--wrap
The flex items will wrap if necessary.
<div class="container">
<div class="flex flex--wrap">
<div class="flex__50"></div>
<div class="flex__66"></div>
</div>
</div>
.flex--wrap-reverse
The flex items will wrap if necessary but in reverse order.
<div class="container">
<div class="flex flex--wrap-reverse">
<div class="flex__50"></div>
<div class="flex__66"></div>
</div>
</div>
Horizontal alignment: justify-content
justify-content
defines how flex items are aligned along the main axis. It helps distribute extra space between the items when they don't reached their maximum size.
.flex--left
This is the default value, the flex items are positioned at the beginning of the container.
<div class="container">
<div class="flex flex--left">
<div class="flex__25"></div>
<div class="flex__25"></div>
<div class="flex__25"></div>
</div>
</div>
.flex--right
The flex items are positioned at the end of the container.
<div class="container">
<div class="flex flex--right">
<div class="flex__25"></div>
<div class="flex__25"></div>
<div class="flex__25"></div>
</div>
</div>
.flex--center
The flex items are positioned at the center of the container.
<div class="container">
<div class="flex flex--center">
<div class="flex__25"></div>
<div class="flex__25"></div>
<div class="flex__25"></div>
</div>
</div>
.flex--space-between
The flex items are evenly spread horizontally, the first item is at the beginning of the container, the last item on the end of the container. The space gets distributed between the flex items.
<div class="container">
<div class="flex flex--space-between">
<div class="flex__25"></div>
<div class="flex__25"></div>
<div class="flex__25"></div>
</div>
</div>
.flex--space-around
The flex items are positioned with equal space before, between and after them.
<div class="container">
<div class="flex flex--space-around">
<div class="flex__25"></div>
<div class="flex__25"></div>
<div class="flex__25"></div>
</div>
</div>
Vertical alignment: align-items
align-items
defines how flex items are aligned along the cross axis when they don't reached their maximum size. It is the justify-content
version for the cross axis.
.flex--stretch
This is the default value, it stretches the height of the flex items to fill the container but still respects min-width
and max-width
.
<div class="container">
<div class="flex flex--stretch">
<div class="flex__33"></div>
<div class="flex__33"></div>
<div class="flex__33"></div>
</div>
</div>
.flex--top
The flex items are positioned at the top of the container.
<div class="container">
<div class="flex flex--top">
<div class="flex__33"></div>
<div class="flex__33"></div>
<div class="flex__33"></div>
</div>
</div>
.flex--bottom
The flex items are positioned at the bottom of the container.
<div class="container">
<div class="flex flex--bottom">
<div class="flex__33"></div>
<div class="flex__33"></div>
<div class="flex__33"></div>
</div>
</div>
.flex--middle
The flex items are positioned at the vertical center of the container.
<div class="container">
<div class="flex flex--middle">
<div class="flex__33"></div>
<div class="flex__33"></div>
<div class="flex__33"></div>
</div>
</div>
Vertical alignment: aling-self
align-self
accepts the same values as align-items
, with the difference that you apply it to individual flex items in order to overwrite align-items
.
.flex--stretch
This is the default value, it stretches the height of the flex item to fill the container but still respects min-width
and max-width
.
<div class="container">
<div class="flex flex--top">
<div class="flex__33 flex--stretch"></div>
<div class="flex__33"></div>
<div class="flex__33"></div>
</div>
</div>
.flex--top
The flex item gets positioned at the top of the container.
<div class="container">
<div class="flex">
<div class="flex__33 flex--top"></div>
<div class="flex__33"></div>
<div class="flex__33"></div>
</div>
</div>
.flex--bottom
The flex item gets positioned at the bottom of the container.
<div class="container">
<div class="flex">
<div class="flex__33 flex--bottom"></div>
<div class="flex__33"></div>
<div class="flex__33"></div>
</div>
</div>
.flex--middle
The flex item gets positioned at the vertical center of the container.
<div class="container">
<div class="flex">
<div class="flex__33 flex--middle"></div>
<div class="flex__33"></div>
<div class="flex__33"></div>
</div>
</div>