This tutorial explains the most important features of CSS Flexboxes. This is useful, especially, when you are dealing with responsive webdesign.

In the first part of the tutorial I will show you, how to built a typically html template. It will contain a wrapper DIV and four DIV containers inside it. We will use good old CSS floating to keep them horizontally.

Finally we will use the CSS Flexbox model for the same template. You will see, that just a few lines of code will be sufficient, to do the same task without floating.

If you are not familiar with the concept of floating and clearing in CSS yet, check out my tutorial and click here.

At the end of the tutorial I will show you some possibilities of using flexbox ratio.

For further informations on the flexbox model, have a look at CSS- Tricks: http://css-tricks.com/snippets/css/a-…

As always, I used JSBin for this tutorial.

http://jsbin.com/

I am looking forward for your comments,

Your web.studio