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!
