Zoe Mickley Gillenwater: Fexbox

Orde Saunders' avatarPublished: by Orde Saunders

Zoe Mickley Gillenwater was talking about Flexbox at Responsive Conf, these are my notes from her talk.

How do we cope with a title that can be anywhere from 2-150 characters?  How big should it be to cope with this?  Relative units of measurements are best guess of what will work for the majority.  Flexbox gets us closer to the ideal becuase it lets the browser make the decisions for us.  We give it guidelines and it works within those.

Flexbox is good for elements that are explicitly sized but the content doens't fit - too big or too small.  Font size and text length can both change.  Flexbox does the maths for us - can be added as an enhancement to widths and floats.

Content driven breakpoints aren't perfect as you can't necessarily predict the content.  Flexbox can smooth out the rough edges between breakpoints.  In some cases it can achieve the same effect as media queries. 

Flexbox can let us take advantage of variable space - when there isn't enough space it can place items in a different alignment.  Wrapping text is a great example of this, it produces nicer results than floats.

Things don't look wrong without Flexbox - they look better with it.

Flexbox is great for micro layout, not for macro grid layouts.

Flexbox can let you visually re-order components independent of source order.  Use this as an enhancement - keep the source order logical and use Flexbox to re-arrange visually without changing the meaning of the content.  Tab order can be confusing so make sure you test.

Flexbox requires a mental shift in how you think about and approach layout.  You can do things you couldn't (easily or at all) do before.  You can add more responsiveness to your content.

Flexbox is not all-or-nothing.  Start adding it to solve specific problems.