show & tell - flex in flux
TRANSCRIPT
flex in flux
The Flexbox Layout CSS module aims to provide a more efficient way to lay out, align and distribute space among items in a container, even when
their size is unknown and/or dynamic. - Chris Coyier
Flexible box layout model W3C working draft, 23 July 2009
Revised in 2012
Sounds pretty neat, huh?
What is flexbox?
OMG! Flexbox is coming.
RUN!
Flexbox is awesome. So why aren’t we all using it all the time?
Nobody puts flexi in the corner
- It’s pretty complex
- It’s fundamentally different (to how we’ve always done layout)
- It’s not that well supported by browsers
Firefox
Full support 40+
Edge
Full support
Chrome
Full support 43+
Android browser
Full support 4.4+Pre-4.4 supports ‘old style’
Internet Explorer
Full support 11+
Opera
Full support
Safari
Full support 8+
iOS Safari
Full support 9.1+Prefixed support from 8.4
1) Make a flexbox container
The basics
display: flex;
2) Add items inside the container
<div> <aside> <section>
The flexbox container
flex-direction: row | row-reverse | column | column-reverse;
row
row-reverse
column column-reverse
The flexbox container
#box-one #box-two #box-three
#box-four #box-five
The flexbox containerflex-wrap: nowrap | wrap | wrap-reverse;
Flexbox items
By default flex items are displayed by source order. We can change this.
#box-one #box-two #box-three
Flexbox itemsorder: x
#box-one order: 2;
#box-three order: 1;
#box-two order: 66;
Setting this to 1 (or more) allows the items to ‘grow’ to fit the container.
flex-grow: <number> /* Default: 0 */
flex-grow: 1; flex-grow: 1; flex-grow: 1;
flex-grow: 0; flex-grow: 0; flex-grow: 0;
Flexbox items
This allows an item to ‘shrink’ proportionally within the container if it needs to.
flex-shrink: <number> /* Default: 1 */
flex-grow: 1; width: 35%;
flex-grow: 1; width: 35%;
flex-shrink: 1;
Flexbox items
This defines the default size of an element before the remaining space is distributed. It can be a length (e.g. 20%, 5rem, etc.) or a keyword.
flex-basis: 50%; flex-basis: auto;
flex-basis: x
Flexbox items
Float, clear, vertical-align have no effect on a flex item.
There’s no combo, mix ’n’ match css here. You go 100% flexbox or you go home.
Beware, beware
! !!! !
We can nest flex containers. This opens up the potential for some pretty insane layouts.
How deep is your flex?
flex within flex within flex within flex within flex within flex within flex
Foundation 6 has an optional grid system built with flexbox. The old grid system remains.
However…
The W3C strongly suggest that Flexbox should be used to layout individual web components and not full page layouts.
We have the CSS grid layout for that. That’s another show & tell entirely.
Are we there yet?
Flexbox is finally ready for the big time. And we’re finally ready for flexbox.