Flexbox for fun and profit

@charlieparkhi!

@charlieparkfront-end engineer

hi!

IFTTT

@charlieparkfront-end engineer

hi!

Flexbox

Today

• what is flexbox? • a brief history of <me layout on the web • right, so, what is flexbox, really? - syntax - mnemonics for tricky bits - browser support? - performance benefits • what can flexbox do? examples plz? • ques<ons!

What is flexbox?

display: flex;

1990

1994

But, Charlie, why do we care about this?

1999

2001

2003

Everything is unpredictable.

Everything is unpredictable.• content

Everything is unpredictable.• content• context

Flexbox to the rescue

Simple rules that the browser

intelligently interprets.

Container Children

Space

Direc<on Alignment

Order Flexibility

Direc<on

Alignment

Order

C

B

A

D

D

A

C

B

Flexibility

Examples soon!First, a few notes on migra<ng / support.

yes** `-webkit-` prefix for a bit longer * Autoprefixer, Modernizr

github.com/philipwalton/flexbugs

modernizr.com

autoprefixer.github.io/

Flexbox + Performance

FlexboxFloat

1,458 1,121

23%

Flexbox

Float

2,589

42%

1,172

1,500 700

40%

Be_er for users, not on ini<al page load, but when scrolling, resizing the page, and loading remote content.

Example <me!

Syntax

display: flex flex-direc<on (row)

jus<fy-content (flex-start) align-items (stretch) flex-wrap (nowrap)

flex-grow (0) flex-shrink (1)

flex-basis (auto) order (1)

Mnemonics!jus<fy-content vs. align-items

???

flex-direc<on: row

main-axis: lec to right cross-axis: top to bo_om

flex-direc<on: column

main-axis: top to bo_om cross-axis: lec to right

main-axis = jus<fy-content

Resources for more

Solved by Flexbox (Philip Walton)

CSS Tricks

Joni Trythall

Zoe Gillenwater

Wes Bos

Thank you!

h_ps://www.flickr.com/photos/grabka/530562572/

h_ps://www.flickr.com/photos/kanriah/5147558884

h_ps://www.flickr.com/photos/soldiersmediacenter/3614744146

h_ps://www.flickr.com/photos/lionya/7879468818

h_ps://www.flickr.com/photos/davidstanleytravel/14437232405