How to use CSS Flex

Are you working with CSS?

Ever heard of CSS Flex?

Here is a compact overview for Flexbox and how to use it!

What is CSS Flex?

Flex or Flexbox is a mordern CSS3 method that allows to layout dynamic divs and content boxes.

Flex derives from the word flexibility:
A flex container is able to automatically change the size dependent on the content – but not only for itself, it affects all elements in the flex container.

This is great, because in responsive design it’s not always perfect to give elements an exact size.
Flex can be used like rows or columns and extend the possibilites of CSS styling!

An easy way to use CSS Flex

Flex always needs a parent and a child element to work correctly.

As you can see, the 4 inner boxes have the same height, even though the content length differs:

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat ipsum.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
View Source

CSS Flexbox Browser Support

A few years ago it was risky using flex, but since 2014 I would recommend using flex for desktop as well as for mobile in your projects!

Here is a screenshot of CANIUSE:

What do you think about flex? In my opinion it is awesome.
It takes sometime to deal with it, but then flex gives real benefit!