Upload
others
View
6
Download
0
Embed Size (px)
Citation preview
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