My talk about Flexbox for Generate Conference 2013

1. FlexboxONE GIANT LEAP FOR WEB LAYOUT
STEPHEN HAY
GENERATECONF 2013

2. image: NASA

3. ~8years
image: NASA

4. https://en.wikipedia.org/wiki/File:First_Web_Server.jpg
~1year

5. CASCADING STYLE SHEETS, LEVEL 1
~2years

6. 17years
CSShasbeenaroundfor

7. aka“Flexbox”
and only now do we have “real” layout
in the form of Flexible Box Layout Module

8. “Layout is hard.”

9. image: NASA

10. “Layout solutions are an
interesting area in CSS to me.”
–TabAtkins

11. Twomajortypesof“real”weblayout

12. Before you get all excited…

13. http://www.xanthir.com/blog/b4580
Flexboxes aren’t ideal for page layout

14. AquickintroductiontoFlexbox
Terminology
Axes & Size
Flex
Alignment
Order

15. Leaveyourlayoutbaggage
atthedoor.

16. Terminology
Flex containers
Flex items
Main axis / size / dimension
Cross axis / size / dimension
Start / end

17. Hi,Bob.
#bob { display: flex; }
(Bob is a flex container)

18. Flexitems
Items in a flex container are, by default, flex items
(even anonymous block boxes)
I’m a flex item! Me too! Me three!

19. Mainaxis
+ main size, main dimension

20. Crossaxis
+ cross size, cross dimension

21. Start&End
depends on direction
CROSS START
CROSS END
MAIN ENDCENTERMAIN START

22. Start&End
depends on direction
MAIN START
MAIN END
CROSS ENDCENTERCROSS START

24. Direction
#bob { flex-flow: row wrap; }
#bob {
flex-direction: row | row-reverse |
column | column-reverse;
flex-wrap: no-wrap | wrap | wrap-reverse;
}
SHORTHAND:

25. Flex
.foo { flex: 0 1 100px; }
.flex-item {
flex: flex-grow flex-shrink flex-basis;
}
EXAMPLE:

26. Flex
.foo { flex: initial; }
.foo { flex: 0 1 auto;}
IS EQUIVALENT TO:
common values (1)
width:
150px
width:
150px
width:
150px

27. Flex
.foo { flex: auto; }
.foo { flex: 1 1 auto;}
IS EQUIVALENT TO:
common values (2)
width:
150px
width:
150px
width:
150px

28. Flex
.foo { flex: none; }
.foo { flex: 0 0 auto;}
IS EQUIVALENT TO:
common values (3)
width:
150px
width:
150px
width:
150px

29. Flex
.foo { flex: [n]; }
.foo { flex: [n] 1 0%;}
IS EQUIVALENT TO:
common values (4)
flex: 1 flex: 1 flex: 1

30. Flex flex: [n]
flex: 1 flex: 1 flex: 2

31. Flex flex: [n]
flex: 1 flex: 5 flex: 2

32. Alignment
auto-margins
margin-top: auto
no margin no margin
.foo { margin-top: auto; }

33. 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

34. http://dev.w3.org/csswg/css-flexbox/

35. Alignment
along the cross axis: align-items
(align-self can be applied to the flex items themselves)
ALIGN-ITEMS
#bob { align-items: flex-start |
flex-end | center | baseline | stretch }
in the case of flex-direction: row

36. Order
changes the visual order vs. the source order
3 1 2
.item:nth-child(3) { order: -1; }
.foo { order: [n]; }

37. Commonusecases
True centering (both axes)
Unknown menu items
Display order
Wrapping (menu items, boxes)
Tab groups
Form layout

38. Asmallexample

39. Structuredcontent

40. Basicstyles

41. display:flexoncontainer

42. flex-direction:column

43. margin-auto
oniconsand
form

44. flex:1
oninputfield

45. order
foravatardisplay

46. done.

47. Browsercompatibility
source: http://caniuse.com/#search=flexbox

48. havefun
keeplearning
THANK YOU! @stephenhay