Flexbox the future of responsive design

HTML5 and CSS 3 offer web developers new semantic tags, native animation tools, server-side fonts and much more, but that’s not the end of the story. In fact, for developers slogging away in the web design trenches, one of the most promising parts of CSS 3 is still just over the horizon — true page layout tools.

While it’s possible to create amazingly complex layouts using tools like CSS floats, positioning rules and the odd bit of JavaScript, none of those tools were actually created explicitly for laying out content, which is why it’s amazingly complex to get them working the way you want across browsers.

In CSS, float and clear serve for layout much the same way as the tables they replaced: As stand-ins that work well enough. But they’re still limited. One proposed solution is called the CSS Flexible Box Layout Module, commonly called the Flexbox.

Flexbox is a recommendation in CSS3 that enables designers to control the arrangement of elements on a page with more finesse than contemporary CSS approaches which have become common because we didn’t have a better solution.

True, we still don’t: Flexbox support is limited. But when Flexbox-savvy browsers become widespread, flexible layouts coupled with media queries will change the way designers approach web layout.

So what is Flexbox?

Flexbox has been floating around for a little while now. There wasn’t much popularity for it due to its lack of compatibility, but with increasing support in modern browsers, it seems that Flexbox will be here to stay and potentially pave the way in how we layout web content in the future. Flexbox has been in the mix from 2009, its form has since changed from box-, flexbox, and now to the current flex.

Flexbox works on an x and y axis grid system, setting a container to be the flexbox, and arranging the items that will become flex items, inside, within the space provided. This works remarkably well for responsive sites, as the items can increase and decrease naturally when the space is increased or decreased.

The main properties of flexbox:

display: flex will turn the block element into flexbox and the elements within that container into flex items. This will then allow you to then set how you would like the items to take up the space.

flex-direction: allows the equal spacing of flex items to be vertical or horizontal. This is a great improvement as in the past, when it was somewhat hard to vertically align elements, or space them equally apart – especially when it came to building responsively.

justify-content: allows you to choose from different options on how to have the flex items spaced:

flex-grow: will allow a flex item to be proportionally bigger than the other flex items. For example, if a flex item is set to flex-grow: 2; then the item would take up double the amount of free space.

order: allows you to change the order in which the flex items are displayed.

So why haven’t we all started using flexbox?

As great as flexbox is, it seems people are reluctant to use it. It is good to use sparingly within your site, but not as the main structure.

There is currently next to no support for legacy browsers. IE8 and IE9 are not supported, and IE10 uses an older syntax of flexbox. Although the latest browsers support flexbox, vendor prefixes are required for older ones.

One way around for the vendor prefixes is to use a mixin created by Compass for flexbox, or use Autoprefixer, a great tool that automatically adds all the required vendor prefixes to your site. But until there is a decent polyfill out there, IE8 and 9 support is not looking good.

So what’s good about flexbox?

• It allows you to create even box formatting for your content a lot quicker
• Allows consistent height for flex items, which in the past has been a real struggle
• Responsiveness is more intuitive and easier
• You can, if required, move flex items without changing the markup
• There are lots of spacing options for flex items within the flexbox, both horizontally and vertically
• Semantic HTML
• Shorter code – for both HTML and CSS

What’s not so good about flexbox

• No support in IE8 or IE9
• No decent polyfill for the above browsers
• It can be quite complex for beginners
• Can get complicated if other block elements are added after properties have been set

Credit:

• https://www.zingdesign.com/the-future-of-app-development-getting-started-with-flexbox/
• https://blog.teamtreehouse.com/responsive-design-of-the-future-with-flexbox