Zoe Mickley Gillenwater: Leveling Up With Flexbox

Zoe Mickley Gillenwater (@zomigi) was speaking at Smashing Conference about flexbox, these are my notes from her talk.

Allowing things to look different in different browsers is now accepted.

IE acceptance cycle:  Denial, Anger, Bargaining, Depression, Acceptance.

Flexbox is ready to use now as an enhancement for small page components.  CSS syntax has been stable for over six months, only missing IE9 and earlier on desktop - most current mobile browsers.  Let preprocessors add in older syntaxes if you want to use them.

1. create container using display:flex
2. set its flex-direction
3. set its flex-wrap to control direction to wrap

Limited control of breaks without support for break-before/break-after.

Demo site:  http://www.smoresday.us/

li disply inline-block => display: flex; flex-direction: row

All links on same line, flush left and right, equal space.  Use justify-content.  Inline block is a fallback for non-flexbox browsers, it's just not quite as well justified.

align-items defaults to aligning things in the cross axis which lets us do vertical alignment.   Combine with table-cell and floats to support older browsers.

Sometimes flexbox and non-flexbox versions can conflict, use something like modernizr to add a class hook to isolate.

Equally spaced items across full width or height.

Setting flex property is the foundation of flexbox but can be confusing.  Can affect dimension in main axis. 

• flex-grow  Will it grow if space available
• flex-shrink Will it shrink if no space avilable
• flex-basis Minim size (like min-width)

Flex basis in shortcut syntax defaults to 0 - be careful, this is probably not what you want.  Check the shortcut syntax to make sure it's what you want.

Layout changes can be done with flexbox without hard-coding into media queries.

Flexbox takes care of margins, borders and paddings.  Will also take care of dynamically changing the DOM.

Very useful for hybrid layouts that mix different units.  For example combining em and % for width. 

Can let siblings have proportional sizing to each other, e.g. 1:1:2.  This may not end up as you expect if flex-basis isn't 0. 

Top auto margin will work with flexbox.  Margins in the same axis as the flex can be auto - get all the free space left.  Can use this to 'stick' items to the bottom of equal height items (which can be done with stretch).  Flex can strectch to full height, unlike height: 100%.

align-items: stretch can allow things to be the same height, align-self: center can align an item within a stretched container.

flex: 1 1 auto lets items shrink to fit after other items have set their width (e.g. via content).  Useful for cleaning up full width forms.

order property can set things in the layout order regardless of the source order.  Combine with flex-wrap for visual re-ordering and justification.  Focus order may not match visual order but, if you do it right, then you can put things in correct source order regardless or visual layout requirements.  Tab order matches the HTML order, except in Firefox which moves the tab order to match the visual order - other browsers might follow suit?

Support for order is better on mobile so you might want to put your HTML in desktop order and then re-order for mobile.  Need to make sure that reading order matches visual order.  Good example of use would be to move an image from the content to the head of the layout for mobile.  Don't move things that affect tabbing or meaning - it's an enhancement.

• Eually spaced full width/height
• Pinned
• full width forms
• Re-order content blocks

If used right it is a good enhancement.

http://www.zomigi.com/blog/leveling-up-with-flexbox