Simple example to align content in a row using Flexbox

I guess that most frontenders tried to solve a task similar to this one: Content in equal width boxes aligned horizontally.

In the really old days one would solve this using tables. Later on the CSS property Flow was used. I also solved it using display: table; for the parent and display: table-cell; for the children which made it easy to align the boxes properly.

Unless you are designing a website that has to support older browsers you should try using Flexbox (IE11 needs some extra properties. Check caniuse for support). Flexbox makes it easy to control the elements with only very few lines of CSS (or LESS/SASS), and it is easy to make the solution fit all screen sizes. My example is very basic, just to give you an idea of how powerfull Flexbox is. Check out this Fiddle:

Easy right?

Happy coding!