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’ css, 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.


Show your support

Clapping shows how much you appreciated Distinction’s story.