3 pro tips for using flexbox

In advance of her Generate Sydney talk, Zoe Gillenwater shares three tips for using flexbox in your work.

If you're not using flexbox yet then it's time to start adding it to  your workflow; it's been around for a while but with spec now solidified  and support from all modern browsers, it's a must for all frontend  developers who want the best way to do responsive web design.

Zoe Gillenwater will be at Generate Sydney on 5 September, where she'll discuss the when, what and how of using flexbox today:  when it's a great choice use flexbox (and when not to), what UI and UX  problems it can help you solve, and how to add it to your layouts in a  robust way that doesn't harm non-supporting browsers or accessibility.  You'll learn a step-by-step process for deciding on and deploying  flexbox, with lots of examples of flexbox in the wild along the way.

If you want to stay ahead then book now; in the meantime here are three useful tips from Zoe on using flexbox.

01. Using flex-basis

The value for your flex-basis property is your starter width or height. If you have flex-grow or flex-shrink set to a nonzero value, your boxes can get bigger or smaller than the flex-basis value in order to fit the space. If you have flex-wrap on, you can think of flex-basis like a minimum width (or height, if using column orientation), because as the items can wrap when they run out of space, they never have any reason to shrink smaller than the flex-basis value. If you have flex-grow off and flex-shrink on, flex-basis becomes more like a maximum width, because you're telling the browser items that aren't allowed to grow bigger than the flex-basis value.

02. Fallback solutions

One of the great things about flexbox is that it automatically overrides  most other layout CSS in browsers that support it. So, for your flexbox  fallback you can use whatever CSS you normally would to create your  layout (including floats, inline-block or table-cell  ), and add flexbox on top as an enhancement to optimise the use of  space. If you're using flexbox to visually reorder content, there's no  fallback for this. However, you should only be using reordering as a  progressive enhancement anyway; the flexbox order property  doesn't change screen reader or tabbing order, so it should only be  used for cosmetic reordering that doesn't affect the meaning of your  content. If you stick to this rule, it won't matter if a few users see  the non-reordered content.

03. Flexbox isn't a grid system

Flexbox is all about making the best use of space on the current row  or column. When your flex items wrap to a new row or column, they don't  care about lining up with items in the surrounding rows or columns. This  doesn't mean you can't use flexbox for grid-like layouts, but to do so  you'll have to assign explicit widths to your boxes, which negates one  of the main reasons to use flexbox to begin with.

Don't miss Zoe Gillenwater's session on using flexbox today at Generate Sydney. Also, Vlad Magdalin will discuss the incredible power of flexbox at Generate London, and Jen Simmons will be talking about real art direction on the web. Find out more at the Generate site. This article originally appeared in net magazine issue 283; buy it here!

ABOUT THE AUTHOR

Jim McCauley is a writer, editor and occasional podcaster, and is available for space parties.