show & tell - flex in flux

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.