CSS Flexible box layout module - part 1 - Introduction

Long long time ago...

Maybe not so long, but some years ago all layouts used tables as a base. It was nice time and almost everything was possible using table cells. But document structure and semantic were completely unreadable and layouts were not flexible. So we got “CSS box model” which we still use today. It is semantic way (especially if use HTML5 tags) to create layout. But it still generates problems. Especially related to calculation of width/height of elements. Setting width of element on 10% and adding border and padding increases element width from 10% to 10% + border + padding.



Flexbox

Flexible box layout is like an answer for all those troubles. It is flexible, semantic and uses available space without specific units. Sounds great, but what exactly does it mean?

Imagine you have a DOM element like section, inside it you want to position n children elements, and you want every of those children to have the same width. As long as you don't know number of children elements it is hard to code. But flexbox gives a possibility to do this without any calculation. How? It is quite simple, but first we need to know how flexbox works.