5 Reasons We ♡ Flexbox
Flexbox is a powerful, well supported tool for Front End web developers to use when developing websites. Here’s why we use it.
Despite HTML5 and CSS3 making significant strides forwards in modernising web standards, from providing more sufficient support for media and improving cross browser support for styling, there is still a reliance on using legacy techniques for aligning and moving content around the screen. However the emergence of Flexbox within these specifications has significantly improved the way in which we can design and build websites. Here are 5 reasons why you should start using Flexbox in your web projects.
1. Widely supported across desktop and mobile browsers
One of the most important factors when building a website is making sure that the web properties you choose to use are widely supported across multiple browsers. Here at Distinction we use Can I Use to check support for HTML and CSS properties.
As of the time of writing there is over 95% browser support for Flexbox, which is far superior to other modern nascent CSS properties such as CSS Grid. Obviously there is a slight weakness when choosing to use Flexbox; a full lack of support for IE8 & IE9.
Despite Flexbox being incompatible with older browsers such as IE 8 & 9, Microsoft’s announcement that it would stop supporting all versions of IE prior to IE11 earlier this year, coupled with a continued decline in IE’s market share, is rendering legacy IE support less important year on year. However, if you find that it is sufficiently important that you support IE9 and below then Flexbox probably isn’t for you.
However, Flexbox’s relatively ubiquitous support means that there are very few headaches to encounter when designing websites across multiple browsers. As noted, this is currently Flexbox’s main strength in comparison to other emerging CSS properties (97% support vs 8% for CSS Grid).
2. Creating repeatable elements is quick and easy
Creating repeatable elements with Flexbox is extremely powerful, especially when coupled with the nth child selector. This allows us to create strong, repeatable design patterns without substantially increasing development time.
Consider that, without Flexbox, a pattern like the one below would be extremely time consuming to produce considering its relative simplicity. The advantages in using Flexbox is that it minimises the code needed to create an alternating pattern significantly, particularly through the use of the ‘order’ property. This allows developers to reorder the display of content on the screen using one or two lines of code. Have a look at the example below and see how the order property can be used.
For common use cases, such as landing pages or news and events pages, this can allow us as developers to create simple pages quickly and efficiently, freeing up our time to solve more complex bugs and cross browser issues.
3. Combining Flexbox with media queries
The marriage between Flexbox and media queries can allow us to create flexible, mobile friendly web elements. Consider the below example. Despite this being relatively simple to achieve using ‘regular’ C, we can cut down the amount of code needed to responsively shift our design from columns to rows by using 5 lines of code.
.flex-contain {
flex-direction:column;
}
.blue,.red {
width:100%;
height:50vh;
}The power of Flexbox once again is demonstrated in its ease, with the property ‘flex-direction’ allowing us to shift the flow of our elements on the page. Despite it seeming over zealous to claim that Flexbox can change the way in which you develop, its ease of use can make developing for mobile and desktop asynchronous in nature, and minimise the number of concerns when developing tailor-made solutions for different sized screens.
4. Centering elements is finally easy
You only need to Google ‘CSS centering’ to find numerous blogs on how to achieve what should be a relatively simple task, highlighting just how difficult it is to achieve without modern features. However, with Flexbox the light at the end of the tunnel seems to be nearing. Quite simply, Flexbox is an absolute dream to center elements in comparison to the usual CSS techniques. The two properties that make this Flexbox magic happen are justify-content, and align-items. Both of these properties can be used to align items in a multiple manner of ways (see this great article from CSS Tricks for a full run down of what you can do). Justify content is particularly useful when wanting to center elements within a page which may be dynamically created by a form in Kentico. For example, we may have a pricing table which can have, at any one time, 3–5 options. Flexbox requires only three lines for us to be able to center our content within the viewport;
display:flex;
justify-content: center;
flex-wrap:wrap;That’s it! No matter how many extra price points we add, our content aligns exactly how we want it too. This is particularly useful as we can adjust the widths of the items and our content will always align within its parent. Furthermore, this is true of both vertical and horizontal centering, which is a huge step forward from a world in which aligning items horizontally and vertically required a multitude of CSS tricks and hacks. When building sites that will display dynamic data, this tool becomes extremely powerful, especially when coupled with a CMS such as Kentico.
5. Flexbox is the future of grid design.
As we have mentioned, Flexbox used for one or two elements in a page can be extremely powerful in isolation. However once you begin to nest flex elements, the power of Flexbox increases ten fold. Using a combination of Flexbox, media queries and nth child selectors, we can dynamically target screen sizes to reorder and highlight items quickly and easily. This can make scaffolding out ideas and designs much faster than common legacy CSS properties ever allowed.
In my view, it is as close to a ‘baked in’ framework (such as Bootstrap) as base CSS has come. As such several popular frameworks are adopting Flexbox for their future releases, with Bootstrap 4 and Foundation 6 both including a Flexbox grid framework. This future is ridiculously exciting for front end developers, as it means we can concentrate on creating exciting and expansive designs which naturally adapt to screen sizes with minimal effort, rather than having to concentrate our efforts on centering and changing DOM elements using Javascript or jQuery.
Other useful Resources
- A Complete Guide to Flexbox (CSS Tricks)
