Using display: flex-box on a regular basis.
The display: flex-box is providing you a more efficient way to lay out, align and distribute items
and the space among them in a wrapping element. Especially when it comes to responsive Layouts you
really get to see the power of display: flex-box. Compared to display: block and
display: inline, display: flex-box is more flexiable and thus it got its name. The idea behind
display: flex-box is, to give the wrapping element the ability to alter its children width, height
and order to fill the available space most appropiate. It expands or shrinks it children and the wrapping space.
Browser support is great these days as of caniuse.com.
To read more about it and have a good overview when you want to use it refer to css-tricks.
If you want to use it in our frontend, please use our mixins.
See the Pen Flexbox playground by Gabi (@enxaneta) on CodePen.
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>See the Pen A Better Responsive Image Gallery With Flexbox by Dudley Storey (@dudleystorey) on CodePen.
See the Pen Flexbox Madness by Joe Beason (@jbeason) on CodePen.
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>