Everything you need to know about flexbox

It seems like flexbox will be the next big thing in web design community. Chris Wright and his awesome interaction design experiments generated a lot of buzz around flexbox and its practical use on web.

What is flexbox? It’s a CSS property allowing you to create intelligent boxes that are stretchable and capable of changing visual order. The main idea behind the flex layout is to give the container the ability to adjust the width/height and order of its items to fill ideally the available space (and look properly on different screen sizes and devices). It’s probably the best friend of responsive web design. A flex container expands or shrinks items in order to fill the free space or prevent overflow.

The Flexbox Layout (Flexible Box) module aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word “flex”).

A little history of flexbox: maybe you didn’t know but flexbox has been around since 2009. An increased support made it popular these days and more professionals are adopting it to create complex layouts and web apps.

The syntax of flexbox has been changing during the years. There are 3 versions of flexbox, differentiated by syntax: display: box (the old one), display: -ms-flexbox (the tweener one) and display: flex (the new one).

Each version of browser supports a certain syntax, you can view the whole compatibility list here:

Some examples:

Here are some nice examples with flexbox including code snippets and comments.

See the Pen flexbox nav item by designhooks (@designhooks) on CodePen.

See the Pen flexbox width by designhooks (@designhooks) on CodePen.

See the Pen flexbox layout by designhooks (@designhooks) on CodePen.

See the Pen flex wrap by designhooks (@designhooks) on CodePen.

Want to learn more about flexbox? Read this:

Here is a complete list of in-depth articles about flexbox. If you read them all you will probably become an expert in this area:

Flexbox adventures by Chris Wright – an interesting experiment explaining flexbox, listing the calculations and showing the source code with detailed comments.

Using flexbox today by Chris Wright – another masterpiece on this topic with even more awesome experiments pushing the limits of flexbox. You will find out how flexbox can give current layouts extra powers that either couldn’t be achieved, or were difficult to achieve before.

Harnessing flexbox for today’s web apps by Karen Menezes – a detailed explanation of flexbox and how to use it for today’s web apps + a lot of practical examples applied to real projects and some predictions for the future of flexbox.

Flexbox in 5 minutes by Devin Bryce – an interactive tour of all the major features of the new CSS property: flexbox.

A complete guide to flexbox by Chris Coyier – a must read guide if you’re interested about flexbox. Detailed description, terminology, code snippets and examples included.

Flexbox by Sara Soueidan – if you want to dive into all the properties of flexbox, this comprehensive guide will help you out.

Using CSS flexible boxes by Mozilla Developer Network – a comprehensive guide on flexbox properties, vocabulary, items and some nice examples.

Solved by flexbox by Philip Walton – the purpose of this project is to showcase problems once hard or impossible to solve with CSS alone, now made trivially easy with flexbox.

The ultimate flexbox cheatsheet by Sean Fioritto – a step by step guide and instructions on how to work with flexbox.

Levelling up with flexbox by Zoe Gillenwater – the complete flexbox presentation from Smashing Conference.

Understanding flexbox by Mike Riethmuller – instead of covering all properties of flexbox, this article focuses on understanding how flexbox calculates the width of items.

Flexbox tester by Mike Riethmuller – a nice tool that will help you understand how to calculate the width of flex items.

Are We Ready to Use Flexbox? by Nick Salloum – a deep look at flexbox and the answer to his own question.

Flexbugs: a community-curated list of flexbox issues and cross-browser workarounds for them.