Flexgrid

Overview

By default the flex-boxs is fluid and it consists of 12 columns with a specified maximum width of 940px. If the screen width is less than 768px, the elements of the grid are stretched to the whole width and are placed vertically.

Class names are very simple and speak for themselves. For example, .flex_1 has the shortest width, and .flex_12 - the longest. However, remember that in this flex-box one line can not contain more than 12 one-column elements.

For example, you want to create 3 blocks of text, following one another, then you need to assign class .flex_4 to those blocks that will give the total result 12 (4+4+4).

Attention! To make it work all of your units should be placed within a parent container under the class .flex-row.

.flex_1

.flex_2

.flex_3

.flex_4

.flex_5

.flex_6

.flex_7

.flex_8

.flex_9

.flex_10

.flex_11

.flex_12

How it's look by default

Some text

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet autem culpa, dicta doloribus ducimus eligendi ex fuga illo nemo nisi obcaecati odit quia sapiente vitae voluptate voluptatibus. Blanditiis, minus?

Some text

.f-middle for parent

Some text

.f-bottom for parent

Some text

.f-self-middle for second child

Some text

.f-self-bottom for second child

Some text

.f-prefix_3 .flex_3

Some text

.f-stretch for parent

Some text

.f-self-stretch for first child

Some text

.f-end for parent

Some text

.f-center for parent

Some text

.f-alpha .f-omega for first child

Some text