flexbox: one giant leap for web layout (breaking development 2013)
DESCRIPTION
My talk on Flexbox for Breaking Development 2013 in NashvilleTRANSCRIPT
![Page 1: Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)](https://reader034.vdocuments.mx/reader034/viewer/2022051400/54c77b594a79590f5b8b462c/html5/thumbnails/1.jpg)
FlexboxONE GIANT LEAP FOR WEB LAYOUT
STEPHEN HAYBDCONF, NASHVILLE 2013
![Page 2: Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)](https://reader034.vdocuments.mx/reader034/viewer/2022051400/54c77b594a79590f5b8b462c/html5/thumbnails/2.jpg)
The design-in-the-browser hamburger
![Page 3: Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)](https://reader034.vdocuments.mx/reader034/viewer/2022051400/54c77b594a79590f5b8b462c/html5/thumbnails/3.jpg)
DESIGNER
The design-in-the-browser hamburger
![Page 4: Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)](https://reader034.vdocuments.mx/reader034/viewer/2022051400/54c77b594a79590f5b8b462c/html5/thumbnails/4.jpg)
DESIGNER
The design-in-the-browser hamburger
CODE
(the stuff that’s really happening)
![Page 5: Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)](https://reader034.vdocuments.mx/reader034/viewer/2022051400/54c77b594a79590f5b8b462c/html5/thumbnails/5.jpg)
DESIGNER
The design-in-the-browser hamburger
MAGIC
CODE
(the stuff that’s really happening)
![Page 6: Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)](https://reader034.vdocuments.mx/reader034/viewer/2022051400/54c77b594a79590f5b8b462c/html5/thumbnails/6.jpg)
DESIGNER
The design-in-the-browser hamburger
MAGIC
CODE
(the stuff that’s really happening)
![Page 7: Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)](https://reader034.vdocuments.mx/reader034/viewer/2022051400/54c77b594a79590f5b8b462c/html5/thumbnails/7.jpg)
DESIGNER
The design-in-the-browser hamburger
MAGIC
CODE
(the stuff that’s really happening)
![Page 8: Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)](https://reader034.vdocuments.mx/reader034/viewer/2022051400/54c77b594a79590f5b8b462c/html5/thumbnails/8.jpg)
DESIGNER
The design-in-the-browser hamburger
MAGIC
CODE
![Page 9: Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)](https://reader034.vdocuments.mx/reader034/viewer/2022051400/54c77b594a79590f5b8b462c/html5/thumbnails/9.jpg)
Designers aren’t stupid.
![Page 10: Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)](https://reader034.vdocuments.mx/reader034/viewer/2022051400/54c77b594a79590f5b8b462c/html5/thumbnails/10.jpg)
Designers aren’t stupid.Many designers are willing to explore web tech as a design tool, but we have to make the right things easier.
Flexbox is a step in the right direction.
![Page 13: Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)](https://reader034.vdocuments.mx/reader034/viewer/2022051400/54c77b594a79590f5b8b462c/html5/thumbnails/13.jpg)
https://en.wikipedia.org/wiki/File:First_Web_Server.jpg
~1 year
![Page 14: Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)](https://reader034.vdocuments.mx/reader034/viewer/2022051400/54c77b594a79590f5b8b462c/html5/thumbnails/14.jpg)
CASCADING STYLE SHEETS, LEVEL 1
~2 years
![Page 15: Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)](https://reader034.vdocuments.mx/reader034/viewer/2022051400/54c77b594a79590f5b8b462c/html5/thumbnails/15.jpg)
17 yearsCSS has been around for
![Page 16: Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)](https://reader034.vdocuments.mx/reader034/viewer/2022051400/54c77b594a79590f5b8b462c/html5/thumbnails/16.jpg)
aka “Flexbox”
and we finally have “real” layoutin the form of Flexible Box Layout Module
![Page 17: Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)](https://reader034.vdocuments.mx/reader034/viewer/2022051400/54c77b594a79590f5b8b462c/html5/thumbnails/17.jpg)
“Layout is hard.”
![Page 19: Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)](https://reader034.vdocuments.mx/reader034/viewer/2022051400/54c77b594a79590f5b8b462c/html5/thumbnails/19.jpg)
“Layout solutions are an interesting area in CSS to me.”
– Tab Atkins
![Page 20: Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)](https://reader034.vdocuments.mx/reader034/viewer/2022051400/54c77b594a79590f5b8b462c/html5/thumbnails/20.jpg)
http://dev.w3.org/csswg/css-flexbox/
We’re talking about this version
![Page 21: Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)](https://reader034.vdocuments.mx/reader034/viewer/2022051400/54c77b594a79590f5b8b462c/html5/thumbnails/21.jpg)
Two major types of “real” web layout
![Page 22: Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)](https://reader034.vdocuments.mx/reader034/viewer/2022051400/54c77b594a79590f5b8b462c/html5/thumbnails/22.jpg)
Two major types of “real” web layout
![Page 23: Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)](https://reader034.vdocuments.mx/reader034/viewer/2022051400/54c77b594a79590f5b8b462c/html5/thumbnails/23.jpg)
Available spaceFlexbox helps us deal with
even when we don’t know what that will be
![Page 24: Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)](https://reader034.vdocuments.mx/reader034/viewer/2022051400/54c77b594a79590f5b8b462c/html5/thumbnails/24.jpg)
alignment
Flexbox helps us with
both
hor
izon
tally
and
ver
tical
ly
![Page 25: Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)](https://reader034.vdocuments.mx/reader034/viewer/2022051400/54c77b594a79590f5b8b462c/html5/thumbnails/25.jpg)
ordreFlexbox helps us with
display
![Page 26: Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)](https://reader034.vdocuments.mx/reader034/viewer/2022051400/54c77b594a79590f5b8b462c/html5/thumbnails/26.jpg)
A quick introduction to Flexbox
Terminology
Axes & Size
Flex
Alignment
Order
![Page 27: Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)](https://reader034.vdocuments.mx/reader034/viewer/2022051400/54c77b594a79590f5b8b462c/html5/thumbnails/27.jpg)
Leave your layout baggageat the door.
![Page 28: Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)](https://reader034.vdocuments.mx/reader034/viewer/2022051400/54c77b594a79590f5b8b462c/html5/thumbnails/28.jpg)
Terminology
Flex containers
Flex items
Main axis / size / dimension
Cross axis / size / dimension
Start / end
![Page 29: Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)](https://reader034.vdocuments.mx/reader034/viewer/2022051400/54c77b594a79590f5b8b462c/html5/thumbnails/29.jpg)
CODEhttp://www.flickr.com/photos/evdaimon/337754011/
![Page 30: Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)](https://reader034.vdocuments.mx/reader034/viewer/2022051400/54c77b594a79590f5b8b462c/html5/thumbnails/30.jpg)
![Page 31: Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)](https://reader034.vdocuments.mx/reader034/viewer/2022051400/54c77b594a79590f5b8b462c/html5/thumbnails/31.jpg)
display: flex | inline-flex
![Page 32: Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)](https://reader034.vdocuments.mx/reader034/viewer/2022051400/54c77b594a79590f5b8b462c/html5/thumbnails/32.jpg)
Hi, Bob.
#bob { display: flex; }
(Bob is a flex container)
display: flex | inline-flex
![Page 33: Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)](https://reader034.vdocuments.mx/reader034/viewer/2022051400/54c77b594a79590f5b8b462c/html5/thumbnails/33.jpg)
Flex itemsItems in a flex container are, by default, flex items(even anonymous block boxes)
I’m a flex item! Me too! Me three!
![Page 34: Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)](https://reader034.vdocuments.mx/reader034/viewer/2022051400/54c77b594a79590f5b8b462c/html5/thumbnails/34.jpg)
Direction
#bob { flex-flow: row wrap; }
#bob { flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: no-wrap | wrap | wrap-reverse;}
SHORTHAND:
![Page 35: Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)](https://reader034.vdocuments.mx/reader034/viewer/2022051400/54c77b594a79590f5b8b462c/html5/thumbnails/35.jpg)
Main axis+ main size, main dimension
in the case of flex-direction: row
![Page 36: Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)](https://reader034.vdocuments.mx/reader034/viewer/2022051400/54c77b594a79590f5b8b462c/html5/thumbnails/36.jpg)
Cross axis+ cross size, cross dimension
in the case of flex-direction: row
![Page 37: Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)](https://reader034.vdocuments.mx/reader034/viewer/2022051400/54c77b594a79590f5b8b462c/html5/thumbnails/37.jpg)
Start & Enddepends on direction
CROSS START
CROSS END
MAIN ENDCENTERMAIN START
in the case of flex-direction: row
![Page 38: Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)](https://reader034.vdocuments.mx/reader034/viewer/2022051400/54c77b594a79590f5b8b462c/html5/thumbnails/38.jpg)
Start & Enddepends on direction
MAIN START
MAIN END
CROSS ENDCENTERCROSS START
in the case of flex-direction: column
![Page 39: Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)](https://reader034.vdocuments.mx/reader034/viewer/2022051400/54c77b594a79590f5b8b462c/html5/thumbnails/39.jpg)
![Page 40: Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)](https://reader034.vdocuments.mx/reader034/viewer/2022051400/54c77b594a79590f5b8b462c/html5/thumbnails/40.jpg)
Flex
.foo { flex: 0 1 150px; }
.flex-item { flex: flex-grow flex-shrink flex-basis;}
EXAMPLE:
![Page 41: Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)](https://reader034.vdocuments.mx/reader034/viewer/2022051400/54c77b594a79590f5b8b462c/html5/thumbnails/41.jpg)
Flex
.foo { flex: 0 1 150px; }
.flex-item { flex: flex-grow flex-shrink flex-basis;}
EXAMPLE:
![Page 42: Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)](https://reader034.vdocuments.mx/reader034/viewer/2022051400/54c77b594a79590f5b8b462c/html5/thumbnails/42.jpg)
Flex
.foo { flex: initial; }
.foo { flex: 0 1 auto;}
IS EQUIVALENT TO:
common values (1)
width: 150px
width: 150px
width: 150px
![Page 43: Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)](https://reader034.vdocuments.mx/reader034/viewer/2022051400/54c77b594a79590f5b8b462c/html5/thumbnails/43.jpg)
Flex
.foo { flex: auto; }
.foo { flex: 1 1 auto;}
IS EQUIVALENT TO:
common values (2)
width: 150px
width: 150px
width: 150px
![Page 44: Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)](https://reader034.vdocuments.mx/reader034/viewer/2022051400/54c77b594a79590f5b8b462c/html5/thumbnails/44.jpg)
Flex
.foo { flex: none; }
.foo { flex: 0 0 auto;}
IS EQUIVALENT TO:
common values (3)
width: 150px
width: 150px
width: 150px
![Page 45: Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)](https://reader034.vdocuments.mx/reader034/viewer/2022051400/54c77b594a79590f5b8b462c/html5/thumbnails/45.jpg)
Flex
.foo { flex: [n]; }
.foo { flex: [n] 1 0%;}
IS EQUIVALENT TO:
common values (4)
flex: 1 flex: 1 flex: 1
![Page 46: Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)](https://reader034.vdocuments.mx/reader034/viewer/2022051400/54c77b594a79590f5b8b462c/html5/thumbnails/46.jpg)
Flex flex: [n]
flex: 1 flex: 1 flex: 2
![Page 47: Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)](https://reader034.vdocuments.mx/reader034/viewer/2022051400/54c77b594a79590f5b8b462c/html5/thumbnails/47.jpg)
Flex flex: [n]
flex: 1 flex: 5 flex: 2
![Page 48: Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)](https://reader034.vdocuments.mx/reader034/viewer/2022051400/54c77b594a79590f5b8b462c/html5/thumbnails/48.jpg)
Alignmentauto-margins
margin-top: auto
no margin no margin
.foo { margin-top: auto; }
![Page 49: Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)](https://reader034.vdocuments.mx/reader034/viewer/2022051400/54c77b594a79590f5b8b462c/html5/thumbnails/49.jpg)
Alignmentalong the main axis: justify-content(align-content for multiple lines along cross axis)
JUSTIFY-CONTENT
#bob { justify-content: flex-start | flex-end | center | space-between | space-around }
in the case of flex-direction: row
![Page 50: Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)](https://reader034.vdocuments.mx/reader034/viewer/2022051400/54c77b594a79590f5b8b462c/html5/thumbnails/50.jpg)
http://dev.w3.org/csswg/css-flexbox/
![Page 51: Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)](https://reader034.vdocuments.mx/reader034/viewer/2022051400/54c77b594a79590f5b8b462c/html5/thumbnails/51.jpg)
http://dev.w3.org/csswg/css-flexbox/
![Page 52: Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)](https://reader034.vdocuments.mx/reader034/viewer/2022051400/54c77b594a79590f5b8b462c/html5/thumbnails/52.jpg)
Alignmentalong the cross axis: align-items(align-self can be applied to the flex items themselves/individually)
ALIGN-ITEMS
#bob { align-items: flex-start | flex-end | center | baseline | stretch }
in the case of flex-direction: row
![Page 53: Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)](https://reader034.vdocuments.mx/reader034/viewer/2022051400/54c77b594a79590f5b8b462c/html5/thumbnails/53.jpg)
http://dev.w3.org/csswg/css-flexbox/
![Page 54: Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)](https://reader034.vdocuments.mx/reader034/viewer/2022051400/54c77b594a79590f5b8b462c/html5/thumbnails/54.jpg)
Orderchanges the visual order vs. the source order
3 1 2
.item:nth-child(3) { order: -1; }
.foo { order: [n]; }
![Page 55: Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)](https://reader034.vdocuments.mx/reader034/viewer/2022051400/54c77b594a79590f5b8b462c/html5/thumbnails/55.jpg)
Common use cases
True centering (both axes)
Multi-box layouts (products, teasers)
Unknown menu items
Display order
Wrapping (menu items, boxes)
Tab groups
Form layout
![Page 56: Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)](https://reader034.vdocuments.mx/reader034/viewer/2022051400/54c77b594a79590f5b8b462c/html5/thumbnails/56.jpg)
A small example
![Page 57: Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)](https://reader034.vdocuments.mx/reader034/viewer/2022051400/54c77b594a79590f5b8b462c/html5/thumbnails/57.jpg)
Structured content
![Page 58: Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)](https://reader034.vdocuments.mx/reader034/viewer/2022051400/54c77b594a79590f5b8b462c/html5/thumbnails/58.jpg)
Basic styles
![Page 59: Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)](https://reader034.vdocuments.mx/reader034/viewer/2022051400/54c77b594a79590f5b8b462c/html5/thumbnails/59.jpg)
display:flex on container
![Page 60: Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)](https://reader034.vdocuments.mx/reader034/viewer/2022051400/54c77b594a79590f5b8b462c/html5/thumbnails/60.jpg)
flex-direction:column
![Page 61: Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)](https://reader034.vdocuments.mx/reader034/viewer/2022051400/54c77b594a79590f5b8b462c/html5/thumbnails/61.jpg)
margin-auto on icons and form
![Page 62: Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)](https://reader034.vdocuments.mx/reader034/viewer/2022051400/54c77b594a79590f5b8b462c/html5/thumbnails/62.jpg)
flex:1 on input field
![Page 63: Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)](https://reader034.vdocuments.mx/reader034/viewer/2022051400/54c77b594a79590f5b8b462c/html5/thumbnails/63.jpg)
order for avatar display
![Page 64: Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)](https://reader034.vdocuments.mx/reader034/viewer/2022051400/54c77b594a79590f5b8b462c/html5/thumbnails/64.jpg)
done.
![Page 65: Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)](https://reader034.vdocuments.mx/reader034/viewer/2022051400/54c77b594a79590f5b8b462c/html5/thumbnails/65.jpg)
Browser compatibilitysource: http://beta.caniuse.com/#search=flexbox
![Page 66: Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)](https://reader034.vdocuments.mx/reader034/viewer/2022051400/54c77b594a79590f5b8b462c/html5/thumbnails/66.jpg)
Don’t sweat the prefixeshttp://leaverou.github.io/prefixfree/
![Page 67: Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)](https://reader034.vdocuments.mx/reader034/viewer/2022051400/54c77b594a79590f5b8b462c/html5/thumbnails/67.jpg)
meh.
source: http://coding.smashingmagazine.com/2013/05/22/centering-elements-with-flexbox/
(but go ahead if you really want to)
![Page 68: Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)](https://reader034.vdocuments.mx/reader034/viewer/2022051400/54c77b594a79590f5b8b462c/html5/thumbnails/68.jpg)
http://coding.smashingmagazine.com/2013/05/22/centering-elements-with-flexbox/
Syntax variations
![Page 69: Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)](https://reader034.vdocuments.mx/reader034/viewer/2022051400/54c77b594a79590f5b8b462c/html5/thumbnails/69.jpg)
Before you get all excited…
![Page 70: Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)](https://reader034.vdocuments.mx/reader034/viewer/2022051400/54c77b594a79590f5b8b462c/html5/thumbnails/70.jpg)
http://www.xanthir.com/blog/b4580
Flexboxes aren’t ideal for page layout
![Page 71: Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)](https://reader034.vdocuments.mx/reader034/viewer/2022051400/54c77b594a79590f5b8b462c/html5/thumbnails/71.jpg)
Flexbox is ideal for components
http://pattern-lab.info/
![Page 72: Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)](https://reader034.vdocuments.mx/reader034/viewer/2022051400/54c77b594a79590f5b8b462c/html5/thumbnails/72.jpg)
Flexbox is ideal for components
http://pattern-lab.info/
![Page 73: Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)](https://reader034.vdocuments.mx/reader034/viewer/2022051400/54c77b594a79590f5b8b462c/html5/thumbnails/73.jpg)
The hardest thing to learn about new toolsis not how to use them, but when to use them.
![Page 74: Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)](https://reader034.vdocuments.mx/reader034/viewer/2022051400/54c77b594a79590f5b8b462c/html5/thumbnails/74.jpg)
have funkeep learning
THANK YOU!
@stephenhay