Flexbox
ONE GIANT LEAP FOR WEB LAYOUT
STEPHEN HAY
BDCONF, NASHVILLE 2013
Slide 2
Slide 2 text
The design-in-the-browser hamburger
Slide 3
Slide 3 text
DESIGNER
The design-in-the-browser hamburger
Slide 4
Slide 4 text
DESIGNER
The design-in-the-browser hamburger
CODE
(the stuff that’s really happening)
Slide 5
Slide 5 text
DESIGNER
The design-in-the-browser hamburger
MAGIC
CODE
(the stuff that’s really happening)
Slide 6
Slide 6 text
DESIGNER
The design-in-the-browser hamburger
MAGIC
CODE
(the stuff that’s really happening)
Slide 7
Slide 7 text
DESIGNER
The design-in-the-browser hamburger
MAGIC
CODE
(the stuff that’s really happening)
Slide 8
Slide 8 text
DESIGNER
The design-in-the-browser hamburger
MAGIC
CODE
Slide 9
Slide 9 text
Designers aren’t stupid.
Slide 10
Slide 10 text
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.
Slide 11
Slide 11 text
image: NASA
Slide 12
Slide 12 text
~8 years
image: NASA
Slide 13
Slide 13 text
https://en.wikipedia.org/wiki/File:First_Web_Server.jpg
~1 year
Slide 14
Slide 14 text
CASCADING STYLE SHEETS, LEVEL 1
~2 years
Slide 15
Slide 15 text
17 years
CSS has been around for
Slide 16
Slide 16 text
aka “Flexbox”
and we finally have “real” layout
in the form of Flexible Box Layout Module
Slide 17
Slide 17 text
“Layout is hard.”
Slide 18
Slide 18 text
image: NASA
Slide 19
Slide 19 text
“Layout solutions are an
interesting area in CSS to me.”
– Tab Atkins
Slide 20
Slide 20 text
http://dev.w3.org/csswg/css-flexbox/
We’re talking about this version
Slide 21
Slide 21 text
Two major types of “real” web layout
Slide 22
Slide 22 text
Two major types of “real” web layout
Slide 23
Slide 23 text
Available
space
Flexbox helps us deal with
even when we don’t know what that will be
Slide 24
Slide 24 text
alignment
Flexbox helps us with
both horizontally and vertically
Slide 25
Slide 25 text
ordre
Flexbox helps us with
display
Slide 26
Slide 26 text
A quick introduction to Flexbox
Terminology
Axes & Size
Flex
Alignment
Order
Slide 27
Slide 27 text
Leave your layout baggage
at the door.
Slide 28
Slide 28 text
Terminology
Flex containers
Flex items
Main axis / size / dimension
Cross axis / size / dimension
Start / end
Flex
.foo { flex: initial; }
.foo { flex: 0 1 auto;}
IS EQUIVALENT TO:
common values (1)
width:
150px
width:
150px
width:
150px
Slide 43
Slide 43 text
Flex
.foo { flex: auto; }
.foo { flex: 1 1 auto;}
IS EQUIVALENT TO:
common values (2)
width:
150px
width:
150px
width:
150px
Slide 44
Slide 44 text
Flex
.foo { flex: none; }
.foo { flex: 0 0 auto;}
IS EQUIVALENT TO:
common values (3)
width:
150px
width:
150px
width:
150px
Slide 45
Slide 45 text
Flex
.foo { flex: [n]; }
.foo { flex: [n] 1 0%;}
IS EQUIVALENT TO:
common values (4)
flex: 1 flex: 1 flex: 1
Slide 46
Slide 46 text
Flex flex: [n]
flex: 1 flex: 1 flex: 2
Slide 47
Slide 47 text
Flex flex: [n]
flex: 1 flex: 5 flex: 2
Slide 48
Slide 48 text
Alignment
auto-margins
margin-top: auto
no margin no margin
.foo { margin-top: auto; }
Slide 49
Slide 49 text
Alignment
along 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
Slide 50
Slide 50 text
http://dev.w3.org/csswg/css-flexbox/
Slide 51
Slide 51 text
http://dev.w3.org/csswg/css-flexbox/
Slide 52
Slide 52 text
Alignment
along 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
Slide 53
Slide 53 text
http://dev.w3.org/csswg/css-flexbox/
Slide 54
Slide 54 text
Order
changes the visual order vs. the source order
3 1 2
.item:nth-child(3) { order: -1; }
.foo { order: [n]; }
Slide 55
Slide 55 text
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