Automagical CSS layouts with Flexboxes

If you asked me for one CSS technology I like most at the moment my answer would certainly be: “Flexbox!”. Flexboxes are simply awesome! They solve the problem every other grid library (including Bootstrap) tries to solve. But Flexboxes can better! Here's why.

First, they have a property called ”align-items” which you'll love if you ever tried to make to columns take equal height or to center them vertically. It’s as easy as setting this property to “center” or ”stretch” and there we go. This image from CSS-Tricks illustrates this pretty well:



Another thing I personally like about them are possibilities to combine wrap features with shrink. With Flexboxes I only seldom use fixed widths like “50%” but instead use “flex-grow: 1;”. If you use two elements with this property they will automatically take up 50%. And if you had an third element which should take up twice as much space as the other two do, you could simply use “flex-grow: 2;” and voila. Flexboxes like this also try to handle cases when there’s too less space available.

One third property I’d like to highlight is “justify-content”. It's incredibly useful if you have for instance an unknown amount of columns and you need to distribute the available space somehow. Again, here's an image from CSS-Tricks:



I can just recommend you to try Flexboxes yourself and also checkout this great guide on CSS-Tricks. 

And of course, we also heavily use Flexboxes here at Leitfaden. Just as an example take the tab bar from the feed:
Impossible without Flexboxes!

Read more

Welcome to a world of experience.

Leitfaden allows you to share experience and stories to enrich and better your life and help you grow and become a model to others. Learn more.

Sign Up

It’s free and just takes a minute.