The future of app development – getting started with Flexbox

Tags: , , , , , , , &


Zurb Foundation has recently released it’s latest update of Foundation 5. There are exciting updates, including new switches, the icon bar and vertical range sliders. At Zing Design we’re excited about the add-on called Foundation for apps, which is yet to be released. ZURB have given us a little bit of an idea on what to expect: Flexbox.

What’s next for Foundation?

Foundation are renaming their products to be part of  their new Foundation family:

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.

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

space-around  space-between  flex-end  flex-startcenter

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.

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

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.

browser support for flexbox

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 whats 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

Future of flexbox and mobile apps

It will be interesting to see how Foundation for apps works once released. There are some great features of Flexbox that will make building web apps more simple, and how the layout is responsive makes it an attractive option. As Zurb Foundation was the first for creating responsive grids and using the mobile first approach, it will be interesting to see if other frameworks follow suit.

If you’re itching to give flexbox a go, Flexplorer is a great site to give you a visual guide

People who have viewed this post also viewed

Leave a comment

* Required fields


Please enter the CAPTCHA text