The CSS Flexible box module level 3, called flexbox for short, enables you to arrange elements inside a container based on the available space. The flexbox module gives you the power to build dynamic and responsive layouts easily, without the need to use floats. The flexbox layouts will likely play an important role in modern web design in the future, but currently, the support for different browsers varies. The module has only a recommendation status now, and the flexbox syntax has been changed globally three times over the last few years. As an impact of these changes, you should adapt your Less code to support older browsers, too. More information of this change can be found at http://css-tricks.com/old-flexbox-and-new-flexbox/.
In this recipe, you will learn how to build the flexbox layouts with the Less Hat library. The Less Hat flexbox mixins offer cross-browser support, but do not support older syntaxes. Leveraging the Less Hat library...