Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589...
Transcript of Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589...
![Page 1: Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589 42% 1,172 1,500 700 40%. Be_er for users, not on inial page load, but when scrolling,](https://reader030.fdocuments.us/reader030/viewer/2022041106/5f0940237e708231d425f0ff/html5/thumbnails/1.jpg)
Flexbox for fun and profit
![Page 2: Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589 42% 1,172 1,500 700 40%. Be_er for users, not on inial page load, but when scrolling,](https://reader030.fdocuments.us/reader030/viewer/2022041106/5f0940237e708231d425f0ff/html5/thumbnails/2.jpg)
@charlieparkhi!
![Page 3: Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589 42% 1,172 1,500 700 40%. Be_er for users, not on inial page load, but when scrolling,](https://reader030.fdocuments.us/reader030/viewer/2022041106/5f0940237e708231d425f0ff/html5/thumbnails/3.jpg)
@charlieparkfront-end engineer
hi!
IFTTT
![Page 4: Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589 42% 1,172 1,500 700 40%. Be_er for users, not on inial page load, but when scrolling,](https://reader030.fdocuments.us/reader030/viewer/2022041106/5f0940237e708231d425f0ff/html5/thumbnails/4.jpg)
@charlieparkfront-end engineer
hi!
![Page 5: Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589 42% 1,172 1,500 700 40%. Be_er for users, not on inial page load, but when scrolling,](https://reader030.fdocuments.us/reader030/viewer/2022041106/5f0940237e708231d425f0ff/html5/thumbnails/5.jpg)
![Page 6: Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589 42% 1,172 1,500 700 40%. Be_er for users, not on inial page load, but when scrolling,](https://reader030.fdocuments.us/reader030/viewer/2022041106/5f0940237e708231d425f0ff/html5/thumbnails/6.jpg)
Flexbox
![Page 7: Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589 42% 1,172 1,500 700 40%. Be_er for users, not on inial page load, but when scrolling,](https://reader030.fdocuments.us/reader030/viewer/2022041106/5f0940237e708231d425f0ff/html5/thumbnails/7.jpg)
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!
![Page 8: Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589 42% 1,172 1,500 700 40%. Be_er for users, not on inial page load, but when scrolling,](https://reader030.fdocuments.us/reader030/viewer/2022041106/5f0940237e708231d425f0ff/html5/thumbnails/8.jpg)
![Page 9: Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589 42% 1,172 1,500 700 40%. Be_er for users, not on inial page load, but when scrolling,](https://reader030.fdocuments.us/reader030/viewer/2022041106/5f0940237e708231d425f0ff/html5/thumbnails/9.jpg)
What is flexbox?
![Page 10: Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589 42% 1,172 1,500 700 40%. Be_er for users, not on inial page load, but when scrolling,](https://reader030.fdocuments.us/reader030/viewer/2022041106/5f0940237e708231d425f0ff/html5/thumbnails/10.jpg)
display: flex;
![Page 11: Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589 42% 1,172 1,500 700 40%. Be_er for users, not on inial page load, but when scrolling,](https://reader030.fdocuments.us/reader030/viewer/2022041106/5f0940237e708231d425f0ff/html5/thumbnails/11.jpg)
![Page 12: Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589 42% 1,172 1,500 700 40%. Be_er for users, not on inial page load, but when scrolling,](https://reader030.fdocuments.us/reader030/viewer/2022041106/5f0940237e708231d425f0ff/html5/thumbnails/12.jpg)
![Page 13: Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589 42% 1,172 1,500 700 40%. Be_er for users, not on inial page load, but when scrolling,](https://reader030.fdocuments.us/reader030/viewer/2022041106/5f0940237e708231d425f0ff/html5/thumbnails/13.jpg)
![Page 14: Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589 42% 1,172 1,500 700 40%. Be_er for users, not on inial page load, but when scrolling,](https://reader030.fdocuments.us/reader030/viewer/2022041106/5f0940237e708231d425f0ff/html5/thumbnails/14.jpg)
1990
![Page 15: Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589 42% 1,172 1,500 700 40%. Be_er for users, not on inial page load, but when scrolling,](https://reader030.fdocuments.us/reader030/viewer/2022041106/5f0940237e708231d425f0ff/html5/thumbnails/15.jpg)
![Page 16: Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589 42% 1,172 1,500 700 40%. Be_er for users, not on inial page load, but when scrolling,](https://reader030.fdocuments.us/reader030/viewer/2022041106/5f0940237e708231d425f0ff/html5/thumbnails/16.jpg)
![Page 17: Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589 42% 1,172 1,500 700 40%. Be_er for users, not on inial page load, but when scrolling,](https://reader030.fdocuments.us/reader030/viewer/2022041106/5f0940237e708231d425f0ff/html5/thumbnails/17.jpg)
1994
![Page 18: Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589 42% 1,172 1,500 700 40%. Be_er for users, not on inial page load, but when scrolling,](https://reader030.fdocuments.us/reader030/viewer/2022041106/5f0940237e708231d425f0ff/html5/thumbnails/18.jpg)
![Page 19: Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589 42% 1,172 1,500 700 40%. Be_er for users, not on inial page load, but when scrolling,](https://reader030.fdocuments.us/reader030/viewer/2022041106/5f0940237e708231d425f0ff/html5/thumbnails/19.jpg)
![Page 20: Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589 42% 1,172 1,500 700 40%. Be_er for users, not on inial page load, but when scrolling,](https://reader030.fdocuments.us/reader030/viewer/2022041106/5f0940237e708231d425f0ff/html5/thumbnails/20.jpg)
But, Charlie, why do we care about this?
![Page 21: Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589 42% 1,172 1,500 700 40%. Be_er for users, not on inial page load, but when scrolling,](https://reader030.fdocuments.us/reader030/viewer/2022041106/5f0940237e708231d425f0ff/html5/thumbnails/21.jpg)
1999
2001
2003
![Page 22: Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589 42% 1,172 1,500 700 40%. Be_er for users, not on inial page load, but when scrolling,](https://reader030.fdocuments.us/reader030/viewer/2022041106/5f0940237e708231d425f0ff/html5/thumbnails/22.jpg)
![Page 23: Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589 42% 1,172 1,500 700 40%. Be_er for users, not on inial page load, but when scrolling,](https://reader030.fdocuments.us/reader030/viewer/2022041106/5f0940237e708231d425f0ff/html5/thumbnails/23.jpg)
Everything is unpredictable.
![Page 24: Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589 42% 1,172 1,500 700 40%. Be_er for users, not on inial page load, but when scrolling,](https://reader030.fdocuments.us/reader030/viewer/2022041106/5f0940237e708231d425f0ff/html5/thumbnails/24.jpg)
Everything is unpredictable.• content
![Page 25: Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589 42% 1,172 1,500 700 40%. Be_er for users, not on inial page load, but when scrolling,](https://reader030.fdocuments.us/reader030/viewer/2022041106/5f0940237e708231d425f0ff/html5/thumbnails/25.jpg)
Everything is unpredictable.• content• context
![Page 26: Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589 42% 1,172 1,500 700 40%. Be_er for users, not on inial page load, but when scrolling,](https://reader030.fdocuments.us/reader030/viewer/2022041106/5f0940237e708231d425f0ff/html5/thumbnails/26.jpg)
Flexbox to the rescue
![Page 27: Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589 42% 1,172 1,500 700 40%. Be_er for users, not on inial page load, but when scrolling,](https://reader030.fdocuments.us/reader030/viewer/2022041106/5f0940237e708231d425f0ff/html5/thumbnails/27.jpg)
![Page 28: Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589 42% 1,172 1,500 700 40%. Be_er for users, not on inial page load, but when scrolling,](https://reader030.fdocuments.us/reader030/viewer/2022041106/5f0940237e708231d425f0ff/html5/thumbnails/28.jpg)
![Page 29: Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589 42% 1,172 1,500 700 40%. Be_er for users, not on inial page load, but when scrolling,](https://reader030.fdocuments.us/reader030/viewer/2022041106/5f0940237e708231d425f0ff/html5/thumbnails/29.jpg)
![Page 30: Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589 42% 1,172 1,500 700 40%. Be_er for users, not on inial page load, but when scrolling,](https://reader030.fdocuments.us/reader030/viewer/2022041106/5f0940237e708231d425f0ff/html5/thumbnails/30.jpg)
![Page 31: Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589 42% 1,172 1,500 700 40%. Be_er for users, not on inial page load, but when scrolling,](https://reader030.fdocuments.us/reader030/viewer/2022041106/5f0940237e708231d425f0ff/html5/thumbnails/31.jpg)
![Page 32: Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589 42% 1,172 1,500 700 40%. Be_er for users, not on inial page load, but when scrolling,](https://reader030.fdocuments.us/reader030/viewer/2022041106/5f0940237e708231d425f0ff/html5/thumbnails/32.jpg)
![Page 33: Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589 42% 1,172 1,500 700 40%. Be_er for users, not on inial page load, but when scrolling,](https://reader030.fdocuments.us/reader030/viewer/2022041106/5f0940237e708231d425f0ff/html5/thumbnails/33.jpg)
![Page 34: Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589 42% 1,172 1,500 700 40%. Be_er for users, not on inial page load, but when scrolling,](https://reader030.fdocuments.us/reader030/viewer/2022041106/5f0940237e708231d425f0ff/html5/thumbnails/34.jpg)
![Page 35: Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589 42% 1,172 1,500 700 40%. Be_er for users, not on inial page load, but when scrolling,](https://reader030.fdocuments.us/reader030/viewer/2022041106/5f0940237e708231d425f0ff/html5/thumbnails/35.jpg)
![Page 36: Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589 42% 1,172 1,500 700 40%. Be_er for users, not on inial page load, but when scrolling,](https://reader030.fdocuments.us/reader030/viewer/2022041106/5f0940237e708231d425f0ff/html5/thumbnails/36.jpg)
![Page 37: Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589 42% 1,172 1,500 700 40%. Be_er for users, not on inial page load, but when scrolling,](https://reader030.fdocuments.us/reader030/viewer/2022041106/5f0940237e708231d425f0ff/html5/thumbnails/37.jpg)
![Page 38: Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589 42% 1,172 1,500 700 40%. Be_er for users, not on inial page load, but when scrolling,](https://reader030.fdocuments.us/reader030/viewer/2022041106/5f0940237e708231d425f0ff/html5/thumbnails/38.jpg)
![Page 39: Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589 42% 1,172 1,500 700 40%. Be_er for users, not on inial page load, but when scrolling,](https://reader030.fdocuments.us/reader030/viewer/2022041106/5f0940237e708231d425f0ff/html5/thumbnails/39.jpg)
![Page 40: Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589 42% 1,172 1,500 700 40%. Be_er for users, not on inial page load, but when scrolling,](https://reader030.fdocuments.us/reader030/viewer/2022041106/5f0940237e708231d425f0ff/html5/thumbnails/40.jpg)
![Page 41: Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589 42% 1,172 1,500 700 40%. Be_er for users, not on inial page load, but when scrolling,](https://reader030.fdocuments.us/reader030/viewer/2022041106/5f0940237e708231d425f0ff/html5/thumbnails/41.jpg)
![Page 42: Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589 42% 1,172 1,500 700 40%. Be_er for users, not on inial page load, but when scrolling,](https://reader030.fdocuments.us/reader030/viewer/2022041106/5f0940237e708231d425f0ff/html5/thumbnails/42.jpg)
Simple rules that the browser
intelligently interprets.
![Page 43: Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589 42% 1,172 1,500 700 40%. Be_er for users, not on inial page load, but when scrolling,](https://reader030.fdocuments.us/reader030/viewer/2022041106/5f0940237e708231d425f0ff/html5/thumbnails/43.jpg)
Container Children
Space
![Page 44: Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589 42% 1,172 1,500 700 40%. Be_er for users, not on inial page load, but when scrolling,](https://reader030.fdocuments.us/reader030/viewer/2022041106/5f0940237e708231d425f0ff/html5/thumbnails/44.jpg)
Direc<on Alignment
Order Flexibility
![Page 45: Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589 42% 1,172 1,500 700 40%. Be_er for users, not on inial page load, but when scrolling,](https://reader030.fdocuments.us/reader030/viewer/2022041106/5f0940237e708231d425f0ff/html5/thumbnails/45.jpg)
Direc<on
![Page 46: Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589 42% 1,172 1,500 700 40%. Be_er for users, not on inial page load, but when scrolling,](https://reader030.fdocuments.us/reader030/viewer/2022041106/5f0940237e708231d425f0ff/html5/thumbnails/46.jpg)
Alignment
![Page 47: Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589 42% 1,172 1,500 700 40%. Be_er for users, not on inial page load, but when scrolling,](https://reader030.fdocuments.us/reader030/viewer/2022041106/5f0940237e708231d425f0ff/html5/thumbnails/47.jpg)
Order
C
B
A
D
D
A
C
B
![Page 48: Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589 42% 1,172 1,500 700 40%. Be_er for users, not on inial page load, but when scrolling,](https://reader030.fdocuments.us/reader030/viewer/2022041106/5f0940237e708231d425f0ff/html5/thumbnails/48.jpg)
Flexibility
![Page 49: Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589 42% 1,172 1,500 700 40%. Be_er for users, not on inial page load, but when scrolling,](https://reader030.fdocuments.us/reader030/viewer/2022041106/5f0940237e708231d425f0ff/html5/thumbnails/49.jpg)
Examples soon!First, a few notes on migra<ng / support.
![Page 50: Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589 42% 1,172 1,500 700 40%. Be_er for users, not on inial page load, but when scrolling,](https://reader030.fdocuments.us/reader030/viewer/2022041106/5f0940237e708231d425f0ff/html5/thumbnails/50.jpg)
yes** `-webkit-` prefix for a bit longer * Autoprefixer, Modernizr
![Page 51: Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589 42% 1,172 1,500 700 40%. Be_er for users, not on inial page load, but when scrolling,](https://reader030.fdocuments.us/reader030/viewer/2022041106/5f0940237e708231d425f0ff/html5/thumbnails/51.jpg)
github.com/philipwalton/flexbugs
![Page 52: Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589 42% 1,172 1,500 700 40%. Be_er for users, not on inial page load, but when scrolling,](https://reader030.fdocuments.us/reader030/viewer/2022041106/5f0940237e708231d425f0ff/html5/thumbnails/52.jpg)
modernizr.com
![Page 53: Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589 42% 1,172 1,500 700 40%. Be_er for users, not on inial page load, but when scrolling,](https://reader030.fdocuments.us/reader030/viewer/2022041106/5f0940237e708231d425f0ff/html5/thumbnails/53.jpg)
autoprefixer.github.io/
![Page 54: Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589 42% 1,172 1,500 700 40%. Be_er for users, not on inial page load, but when scrolling,](https://reader030.fdocuments.us/reader030/viewer/2022041106/5f0940237e708231d425f0ff/html5/thumbnails/54.jpg)
![Page 55: Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589 42% 1,172 1,500 700 40%. Be_er for users, not on inial page load, but when scrolling,](https://reader030.fdocuments.us/reader030/viewer/2022041106/5f0940237e708231d425f0ff/html5/thumbnails/55.jpg)
Flexbox + Performance
![Page 56: Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589 42% 1,172 1,500 700 40%. Be_er for users, not on inial page load, but when scrolling,](https://reader030.fdocuments.us/reader030/viewer/2022041106/5f0940237e708231d425f0ff/html5/thumbnails/56.jpg)
![Page 57: Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589 42% 1,172 1,500 700 40%. Be_er for users, not on inial page load, but when scrolling,](https://reader030.fdocuments.us/reader030/viewer/2022041106/5f0940237e708231d425f0ff/html5/thumbnails/57.jpg)
FlexboxFloat
1,458 1,121
23%
![Page 58: Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589 42% 1,172 1,500 700 40%. Be_er for users, not on inial page load, but when scrolling,](https://reader030.fdocuments.us/reader030/viewer/2022041106/5f0940237e708231d425f0ff/html5/thumbnails/58.jpg)
Flexbox
Float
2,589
42%
1,172
1,500 700
40%
![Page 59: Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589 42% 1,172 1,500 700 40%. Be_er for users, not on inial page load, but when scrolling,](https://reader030.fdocuments.us/reader030/viewer/2022041106/5f0940237e708231d425f0ff/html5/thumbnails/59.jpg)
![Page 60: Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589 42% 1,172 1,500 700 40%. Be_er for users, not on inial page load, but when scrolling,](https://reader030.fdocuments.us/reader030/viewer/2022041106/5f0940237e708231d425f0ff/html5/thumbnails/60.jpg)
Be_er for users, not on ini<al page load, but when scrolling, resizing the page, and loading remote content.
![Page 61: Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589 42% 1,172 1,500 700 40%. Be_er for users, not on inial page load, but when scrolling,](https://reader030.fdocuments.us/reader030/viewer/2022041106/5f0940237e708231d425f0ff/html5/thumbnails/61.jpg)
Example <me!
![Page 62: Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589 42% 1,172 1,500 700 40%. Be_er for users, not on inial page load, but when scrolling,](https://reader030.fdocuments.us/reader030/viewer/2022041106/5f0940237e708231d425f0ff/html5/thumbnails/62.jpg)
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)
![Page 63: Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589 42% 1,172 1,500 700 40%. Be_er for users, not on inial page load, but when scrolling,](https://reader030.fdocuments.us/reader030/viewer/2022041106/5f0940237e708231d425f0ff/html5/thumbnails/63.jpg)
Mnemonics!jus<fy-content vs. align-items
???
![Page 64: Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589 42% 1,172 1,500 700 40%. Be_er for users, not on inial page load, but when scrolling,](https://reader030.fdocuments.us/reader030/viewer/2022041106/5f0940237e708231d425f0ff/html5/thumbnails/64.jpg)
flex-direc<on: row
main-axis: lec to right cross-axis: top to bo_om
![Page 65: Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589 42% 1,172 1,500 700 40%. Be_er for users, not on inial page load, but when scrolling,](https://reader030.fdocuments.us/reader030/viewer/2022041106/5f0940237e708231d425f0ff/html5/thumbnails/65.jpg)
flex-direc<on: column
main-axis: top to bo_om cross-axis: lec to right
![Page 66: Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589 42% 1,172 1,500 700 40%. Be_er for users, not on inial page load, but when scrolling,](https://reader030.fdocuments.us/reader030/viewer/2022041106/5f0940237e708231d425f0ff/html5/thumbnails/66.jpg)
![Page 67: Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589 42% 1,172 1,500 700 40%. Be_er for users, not on inial page load, but when scrolling,](https://reader030.fdocuments.us/reader030/viewer/2022041106/5f0940237e708231d425f0ff/html5/thumbnails/67.jpg)
![Page 68: Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589 42% 1,172 1,500 700 40%. Be_er for users, not on inial page load, but when scrolling,](https://reader030.fdocuments.us/reader030/viewer/2022041106/5f0940237e708231d425f0ff/html5/thumbnails/68.jpg)
![Page 69: Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589 42% 1,172 1,500 700 40%. Be_er for users, not on inial page load, but when scrolling,](https://reader030.fdocuments.us/reader030/viewer/2022041106/5f0940237e708231d425f0ff/html5/thumbnails/69.jpg)
main-axis = jus<fy-content
![Page 70: Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589 42% 1,172 1,500 700 40%. Be_er for users, not on inial page load, but when scrolling,](https://reader030.fdocuments.us/reader030/viewer/2022041106/5f0940237e708231d425f0ff/html5/thumbnails/70.jpg)
Resources for more
Solved by Flexbox (Philip Walton)
CSS Tricks
Joni Trythall
Zoe Gillenwater
Wes Bos
![Page 71: Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589 42% 1,172 1,500 700 40%. Be_er for users, not on inial page load, but when scrolling,](https://reader030.fdocuments.us/reader030/viewer/2022041106/5f0940237e708231d425f0ff/html5/thumbnails/71.jpg)
Thank you!
![Page 72: Flexbox for fun and profitenvironmentsforhumans.com/2015/css-dev-conf/... · Flexbox Float 2,589 42% 1,172 1,500 700 40%. Be_er for users, not on inial page load, but when scrolling,](https://reader030.fdocuments.us/reader030/viewer/2022041106/5f0940237e708231d425f0ff/html5/thumbnails/72.jpg)
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