This document discusses the benefits of using Flexbox for web layout. It begins with an overview of Flexbox terminology including flex containers, items, main/cross axes. It then covers Flexbox properties like flex-direction, justify-content, align-items and order. Common use cases like centering, multi-item layouts and reordering content are demonstrated. Browser support and syntax variations are noted. While Flexbox is well-suited for components, it has limitations for full page layouts. Designers should learn when different tools like Flexbox are best applied.

1. S T E P H E N H AY
BDCONF, NASHVILLE 2013
Flexbox
O N E G I A N T L E A P F O R W E B L AY O U T

2. The design-in-the-browser hamburger

3. The design-in-the-browser hamburger
DESIGNER

4. The design-in-the-browser hamburger
DESIGNER
CODE
(the stuff that’s really happening)

5. The design-in-the-browser hamburger
DESIGNER
MAGIC
CODE
(the stuff that’s really happening)

6. The design-in-the-browser hamburger
DESIGNER
MAGIC
CODE
(the stuff that’s really happening)

7. The design-in-the-browser hamburger
DESIGNER
MAGIC
CODE
(the stuff that’s really happening)

8. The design-in-the-browser hamburger
DESIGNER
MAGIC
CODE

9. Designers aren’t stupid.

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

11. image: NASA

12. ~8 years
image: NASA

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

14. CASCADING STYLE SHEETS, LEVEL 1
~2 years

15. CSS has been around for
17 years

16. and we finally have “real” layout
in the form of Flexible Box Layout Module
aka “Flexbox”

17. “Layout is hard.”

18. image: NASA

19. “Layout solutions are an
interesting area in CSS to me.”
– Tab Atkins

20. We’re talking about this version
http://dev.w3.org/csswg/css-flexbox/

21. Two major types of “real” web layout

22. Two major types of “real” web layout

23. Flexbox helps us deal with
Available
space
even when we don’t know what that will be

24. alignment
both horizontally and vertically
Flexbox helps us with

25. Flexbox helps us with
ordre
display

26. A quick introduction to Flexbox
Terminology
Axes & Size
Flex
Alignment
Order

27. Leave your layout baggage
at the door.

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

29. CODE
http://www.flickr.com/photos/evdaimon/337754011/

31. display: flex | inline-flex

32. Hi, Bob.
(Bob is a flex container)
#bob { display: flex; }
display: flex | inline-flex

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

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

35. Main axis
+ main size, main dimension
in the case of flex-direction: row

36. Cross axis
+ cross size, cross dimension
in the case of flex-direction: row

37. Start & End
depends on direction
C R O S S S TA R T
M A I N S TA R T
CENTER
MAIN END
CROSS END
in the case of flex-direction: row

38. Start & End
depends on direction
M A I N S TA R T
C R O S S S TA R T
CENTER
CROSS END
MAIN END
in the case of flex-direction: column

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

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

42. Flex common values (1)
.foo { flex: initial; }
I S E Q U I VA L E N T T O :
.foo { flex: 0 1 auto;}
width:
150px
width:
150px
width:
150px

43. Flex common values (2)
.foo { flex: auto; }
I S E Q U I VA L E N T T O :
.foo { flex: 1 1 auto;}
width:
150px
width:
150px
width:
150px

44. Flex common values (3)
.foo { flex: none; }
I S E Q U I VA L E N T T O :
.foo { flex: 0 0 auto;}
width:
150px
width:
150px
width:
150px

45. Flex common values (4)
.foo { flex: [n]; }
I S E Q U I VA L E N T T O :
.foo { flex: [n] 1 0%;}
flex: 1
flex: 1
flex: 1

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

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

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

49. Alignment
along the main axis: justify-content
(align-content for multiple lines along cross axis)
#bob { justify-content: flex-start |
flex-end | center | space-between |
space-around }
JUSTIFY-CONTENT
in the case of flex-direction: row

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

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

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

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

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

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

56. A small example

57. Structured content

58. Basic styles

59. display:flex on container

60. flex-direction:column

61. margin-auto
on icons and
form

62. flex:1
on input field

63. order
for avatar display

64. done.

65. Browser compatibility
source: http://beta.caniuse.com/#search=flexbox

66. Don’t sweat the prefixes
http://leaverou.github.io/prefixfree/

67. meh. (but go ahead if you really want to)
source: http://coding.smashingmagazine.com/2013/05/22/centering-elements-with-flexbox/

68. Syntax variations
http://coding.smashingmagazine.com/2013/05/22/centering-elements-with-flexbox/

69. Before you get all excited…

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

71. Flexbox is ideal for components
http://pattern-lab.info/

72. Flexbox is ideal for components
http://pattern-lab.info/

73. The hardest thing to learn about new tools
is not how to use them, but when to use them.

74. have fun
keep learning
THANK YOU!
@stephenhay