Flexxed

A CSS grid system based on the lastest Flexbox standards. It's the last grid you'll ever need.

installation

Find flexxed on your favorite package manager.

Bower

bower install --save flexxed

NPM

npm install --save flexxed

syntax

Row. Column. Content. That's it.


                    

Look at me!

responsive

Target specific screen sizes with responsive modifiers. All flexed classes have responsive siblings.


                          

fluid

Percent based widths enable smooth and dynamic resizing.


                          

offsets

Push columns


                          

automatic

Add any number of generic columns to a row and let the grid do the math for you.


                          

nesting

Nest all the grids you want.


                          

alignment

Vertical and horizontal alignment has never been easier.

.justify-start-*


                          

.justify-center-xs-*


                          

.justify-end-*


                          

Here is an example of using the modifiers in conjunction to acheive different alignment at different viewport sizes.


                          

.align-top-*


                          

.align-center-*


                          

.align-bottom-*


                          

distribution

Easily give your elements some room to breathe.

.space-around-*


                          

.space-between-*


                          

You can also push elements to the opposite edge by using a filler .col


                          

reordering

Mix 'em up.

.first-*

1
2
3
4
5
6

                          
1
2
3
4
5
6

.last-*

1
2
3
4
5
6

                          
1
2
3
4
5
6

Or you can reverse all elements within the row.

.row.reverse-*

1
2
3
4
5
6

                          
1
2
3
4
5
6

stacking

By default, rows layout columns horizontally. However, many layouts call for a mix of the two.

.vertical-*


                          

spacing

Give 'em some room to breathe.

Margins

.m-<screen>-<size>

.m-b-sm

                          
.m-b-sm

Padding

.p-<screen>-<size>

.p-xl
.p-t-sm

                          
.p-xl
.p-t-sm

The End

Rewritten by Kyle Alwyn & inspired by Flexbox Grid