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.
- create container using
- set its
- set its
flex-wrapto control direction to wrap
Limited control of breaks without support for
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.
flex property is the foundation of flexbox but can be confusing. Can affect dimension in main axis.
flex-growWill it grow if space available
flex-shrinkWill it shrink if no space avilable
flex-basisMinim size (like
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
% 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
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?
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
- full width forms
- Re-order content blocks
If used right it is a good enhancement.