Home

Flexbox Framework is still very young and for now it is a grid system only. It will soon be much more.

To use this grid system, follow the examples:

Basic:

Start by adding an element of class row. This is your block to contain elements. Add elements with specific classes to define screen size and amount of columns to use. Like this: small-#, medium-#, large-#, xlarge-#, xxlarge-#. Replace # for the number of columns you would like to use.

Flexbox Framework is mobile first. Code for small screens first and larger devices will inherit those styles. Customize as necessary.

HTML

<div class="row">
	<div class="small-2 large-4">small-2 large-4</div>
	<div class="small-4 large-4">small-4 large-4</div>
	<div class="small-6 large-4">small-6 large-4</div>
</div>
<div class="row">
	<div class="small-12 large-3">large-3</div>
	<div class="small-12 large-6">large-6</div>
	<div class="small-12 large-3">large-3</div>
</div>
<div class="row">
	<div class="small-6 large-2">small-6 large-2</div>
	<div class="small-6 large-8">small-6 large-8</div>
	<div class="small-12 large-2">small-12 large-2</div>
</div>
<div class="row">
	<div class="small-3">small-3</div>
	<div class="small-9">small-9</div>
</div>
<div class="row">
	<div class="small-12 large-4">large-4</div>
	<div class="small-12 large-8">large-8</div>
</div>
<div class="row">
	<div class="small-6 large-5">small-6 large-5</div>
	<div class="small-6 large-7">small-6 large-7</div>
</div>
<div class="row">
	<div class="small-12 large-6">large-6</div>
	<div class="small-12 large-6">large-6</div>
</div>

OUTPUT: http://fclaussen.github.io/Flexbox-Framework/#basic

Small Grids

Small grids expand to large screens easier than large grids cram into small screens.

<div class="row">
	<div class="small-2">2 columns</div>
	<div class="small-10">10 columns</div>
</div>
<div class="row">
	<div class="small-3">3 columns</div>
	<div class="small-9">9 columns</div>
</div>

OUTPUT: http://fclaussen.github.io/Flexbox-Framework/#small-grids

Medium Grids

Medium sized screens will inherit styles from small, unless you specify a different layout, using the medium grid classes.

<div class="row">
	<div class="small-12 medium-2">2 columns</div>
	<div class="small-12 medium-10">10 columns</div>
</div>
<div class="row">
	<div class="small-12 medium-3">3 columns</div>
	<div class="small-12 medium-9">9 columns</div>
</div>

OUTPUT: http://fclaussen.github.io/Flexbox-Framework/#medium-grids

Offsets

Move blocks up to 11 columns to the right by using classes like .large-offset-1 and .small-offset-3.

<div class="row">
	<div class="small-12 medium-1">1</div>
	<div class="small-12 medium-11">11</div>
</div>
<div class="row">
	<div class="small-12 medium-1">1</div>
	<div class="small-12 medium-10 medium-offset-1">10, offset 1</div>
</div>
<div class="row">
	<div class="small-12 medium-1">1</div>
	<div class="small-12 medium-9 medium-offset-2">9, offset 2</div>
</div>
<div class="row">
	<div class="small-12 medium-1">1</div>
	<div class="small-12 medium-8 medium-offset-3">8, offset 3</div>
</div>

OUTPUT: http://fclaussen.github.io/Flexbox-Framework/#offsets

Incomplete Rows

Flexbox framework will NOT float the last element to the right. If you want the last element to be aligned to the right you should offset the necessary amount to achieve that.

<div class="row display-end">
	<div class="small-3">3</div>
	<div class="small-3">3</div>
	<div class="small-3 small-offset-3">3</div>
</div>
<div class="row display-end">
	<div class="small-3">3</div>
	<div class="small-3">3</div>
	<div class="small-3">3</div>
</div>

OUTPUT: http://fclaussen.github.io/Flexbox-Framework/#incomplete-rows

Reordering

Flexbox allows us to define the order of our elements regardless of the order they appear on your code. Use the order classes to manipulate your elements.

NOTICE: You cannot set only one element to a number. If you order one element you need to order all elements inside that row. If you fail to do so, the ordered element will take the last or the first positions depending on the value you choose.

<div class="row display-end">
	<div class="small-2 small-order-5">1</div>
	<div class="small-2 small-last medium-first">2</div>
	<div class="small-2 small-order-3">3</div>
	<div class="small-2 small-first medium-last">4</div>
	<div class="small-2 small-order-4">5</div>
	<div class="small-2 small-order-2">6</div>
</div>

OUTPUT: http://fclaussen.github.io/Flexbox-Framework/#reordering