Fractionflex is based on css flexboxes. It's a small stylesheet with a lot of potential.

A common practice occuring on the internet is the use of flex with percentages. Believe me, thatâ€™s the hard way. Why would you describe 5/12 as 41.66666667%, (with all rounding and margin problems), when you only need one integer?

Flex is brilliant because it works with integers. I found out you only need 25 integers to make all fraction-classes shown here.

This makes fractionflex small, fast and uses less resources.

Fractionflex has 66 fraction classes. You only have to count to 1.

Fractionflex works with al possible fractions you will find in the times tables up to twelve adding up to 1.

For example times table five: 1/5 + 4/5 = 1.

So, Fractionflex has the following classes for this times table:

.fr1-5 .fr2-5 .fr3-5 .fr4-5

For times table five you don't need more classes in order to count to 1.

All Fractionflex fractions-classes represent an integer. All calculations of fractions are done by browsers in the same way.

It's accurate, so you don't have to worry about the rounding of numbers, margins and floats by browsers anymore. That's why you can nest columns endlessly in fractionflex without breaking the concept.

You can fill the whole screen with ease. Even when there's no content in it.

There are eight different classes to place content in different ways. Nine positions in one column. And 2 x 6 ways to place items individually, either horizontal or vertical. (see How to)

Fractionflex is so small that it even fits spelled out in the head section. For example, this whole page is only 18.3 kb and loads in less than 180 ms. Test it here!

Fractionflex is mostly based on the first specifications of flexbox(with -prefixes-). It has overcome know issues and has a global support of 97,3%

Chrome 21

2012

Firefox 8

2011

Explorer 10

2012

Safari 6.1

2012

Opera 12.1

2012

Android 3

2011