With solidified syntax and great browser support, flexbox, the CSS layout module that can make your layouts more flexible and responsive with ease, is finally ready to be used in your real-world work. We’ll talk about the when, what, and how of using flexbox today: when it’s a great choice use flexbox (and when not to), what UI and UX problems it can help you solve, and how to add it to your layouts in a robust way that doesn’t harm non-supporting browsers or accessibility. You’ll learn a step-by-step process for deciding on and deploying flexbox, with lots of examples along the way of flexbox in the wild.

1. Flexbox
Zoe Mickley Gillenwater @zomigiFrontier Conf
November 2016
TODAY
USING

2. I work for
Psst…you can too: www.workingatbooking.com

3. My portfolio site from 2000

4. My portfolio site from 2000

5. tables
positioning
floats
inline-block
table-cell
flexbox
grid
multi-column
exclusions
shapes
regions
flexbox

6. when
what
flexbox
how

7. Deciding when to use and not use flexbox
WHEN
1.

8. What browsers do I need to
support?
Don’t ask yourself this—it’s irrelevant here
(IMO)

9. Flexbox has 97% coverage worldwide
We support IE 8 and 9 at Booking, but still use flexbox
as progressive enhancement.

10. Do I want to create a layout in
1 dimension (row OR column)
or 2 dimensions?
Hat-tip to Rachel Andrew:
https://rachelandrew.co.uk/archives/2016/03/30/should-i-use-grid-or-flexbox/

11. Flexbox is not a grid
¨ Not meant for or great at whole page layout
¨ Flex items only care about space in their
own row/column
¨ They don’t care about lining up in the other
dimension

12. Demo by Rachel Andrew: http://codepen.io/rachelandrew/pen/YqqdXL

13. Flexbox is best for:
¨ UI components
¨ Simple whole page layouts (not grid-based)
¨ Enhancing a complex layout’s alignment,
spacing, etc. (not controlling placement)

15. Do I need my content to
dictate sizing and placement,
or do I need to control these?

16. Content determines
boxes’ size and
placement
(Mega-useful when
content is unknown and
variable, or readability is
a top priority.)
Structure determines
content’s size and
placement
(P.S. Flexbox can do this
too, if you want. It’s just
the reverse that doesn’t
work so well.)
Flexbox Grids

17. Does flexbox offer me anything
I can’t already get
from an existing layout method?

18. New things flexbox offers
¨ Content-driven, unit-less sizes
¨ Content-driven, media-query-less layout changes
¨ Mixed-unit layouts
¨ Equal-height columns
¨ Vertical centering and other alignments
¨ Spacing out or stretching items to fill unknown width/height
¨ Combining content wrapping and block wrapping
¨ Pinning items without overlaps
¨ Visual order different than HTML/reading order

19. Components flexbox can enhance and
UI/UX problems it can help you solve
WHAT
2.

20. content-driven, unit-less sizes

21. How big do I make this thing?

22. %
em/rem
vw/vh
calc()

23. When none of those will cut it,
go unit-free with flexbox.

24. Content-driven sizing on Booking.com
Last year’s sidebar searchbox design, with
fixed-width select fields

25. Content-driven sizing on Booking.com
Non-flexbox Flexbox enhanced

26. Content-driven sizing on Booking.com
.sb-dates {
display: flex;
}
.sb-dates__icon {
flex: 0 0 23px;
}
.sb-dates__select-day {
flex: 1 0 auto;
margin: 0 6px;
}
.sb-dates__select-month {
flex: 1 1 auto;
}
flex container
main axis
flex items

27. Translating the flex property
.sb-dates {
display: flex;
}
.sb-dates__icon {
flex: 0 0 23px;
}
.sb-dates__select-day {
flex: 1 0 auto;
margin: 0 6px;
}
.sb-dates__select-month {
flex: 1 1 auto;
}
Start out 23px wide, and don’t grow
or shrink further
Start out sized to your content, then
grow with 1 share of any extra space
available, but don’t ever shrink
Start out sized to your content, then
grow with 1 share of extra space, but
if there’s an overflow shrink

28. Mixed-unit layout is easier with
calc(), but not even it can do:
calc(100% - 23px - the width of
the day field in Greek)

29. Taking advantage of variable space
Task: add a
message about
low availability
of the room
price shown:
“We have only X
left on our site!”
How about right here
in this lovely big gap?

30. Taking advantage of variable space
Problem: the gap
is not always big
enough to hold a
sentence of text

31. Taking advantage of variable space
Solution: use flexbox to place text beside
price when space allows; otherwise, it can
wrap below price and stretch
Not possible with floats, inline-block
Not possible with table-cell

32. Progressive enhancement
Non-flexbox Flexbox enhanced

33. RWD content-driven layout change
Narrow: 1 column Wide: 2 columns

34. Layout change without media query
1. Let the blocks wrap and stack when needed:
.article-header {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
/* default */

35. Switching between columns and rows
flex-direction: column
or
flex-direction: row
flex-wrap: wrap
(or the shorthand
flex-flow: row wrap)
@media min-width...
flex-direction: row
1 column when narrow Multiple rows when wide
Same, no change needed

36. Layout change without media query
2. Size the blocks to control their wrapping
point:
.article-header-image {
flex: 1 1 320px;
padding-left: 20px;
}
.article-header-text {
flex: 1 1 20em;
padding-left: 20px;
}
< 100% = 1 row, 2 columns
> 100% = wrap to 2 rows

37. Stretching to fill unknown width/height
flex: 1 1 auto
align-content:
space-between

38. Improved wrapping in RWD layout
With float or text-align With flex or justify-content

39. Flexbox is great for spacing
and aligning stuff, especially
shifting content in RWD.

40. full width
full height
equally spaced

41. Full-width nav bar with equal spacing
Non-flexbox
fallback version
Flexbox version
http://codepen.io/zomigi/pen/vKjbbY/

42. Full-width nav bar with equal spacing
.menu-list {
display: flex;
justify-content: space-between;
margin: 0;
padding: 0;
list-style: none;
text-align: center; /* fallback */
}
.menu-list-item {
display: inline-block; /* fallback */
padding: 0 .5em; /* fallback */
}
Equally spaces items
across main axis
(width in this case)

43. Full-height menu with equal spacing

44. Full-height menu with equal spacing
.menu-list {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.menu-list-item {
height: 100%;
display: flex;
align-items: center;
}
.menu-list {
display: flex;
flex-direction: column;
}
.menu-list-item {
flex: 1 0 auto;
display: flex;
align-items: center;
}
justify-content version flex version

45. Full-height menu with equal spacing
.menu-list {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.menu-list-item {
height: 100%;
display: flex;
align-items: center;
}
.menu-list {
display: flex;
flex-direction: column;
}
.menu-list-item {
flex: 1 0 auto;
display: flex;
align-items: center;
}
justify-content version flex version

46. Flexbox can also enhance
visual ordering.

47. order
integer to specify flow order of flex items
0
0
0
default source order 0
0
1
0
0
re-ordered 0
0
0
0
-1
re-ordered 0
0
2
1
0
re-ordered 1
0

48. Reorder for good, not evil.

49. Demo: moving a photo on mobile

50. Demo: moving a photo on mobile
Desktop: HTML order (no flexbox)Mobile: reordered

51. Use flexbox order in mobile styles
.recipe {
display: flex;
flex-direction: column;
}
.recipe figure {
order: -1; /* before all items with default order: 0 */
}
.recipe figure img {
width: 100%;
}

52. Turn off flexbox in desktop styles
@media screen and (min-width:800px) {
.recipe {
display: block; /* turn off flexbox */
}
.recipe figure {
float: right;
width: 55%;
}
}

53. Demo: moving a photo on mobile
Flexbox enhanced Non-flexbox

54. These examples don’t look wrong
or broken without flexbox.
Flexbox just enhances their sizing
and spacing to look better.

55. Step-by-step process for adding flexbox
to your UI components effectively
HOW
3.

56. Don’t freak out

57. Decide whether flexbox is the
right tool for the job

58. Decide which versions of
flexbox to support
standard, 2011/2012, and/or 2009
http://caniuse.com/#feat=flexbox

59. I recommend you skip the ‘09 syntax
¨ Slower to render than current syntax*
¨ Doesn’t support wrapping
¨ Small market share
¨ Its browsers can get same fallback you give
to non-supporting browsers
* http://updates.html5rocks.com/2013/10/Flexbox-layout-isn-t-slow

60. Let tools add browser variants for you
Which variants do you want? Best tool to handle that
All the things! Autoprefixer
Bourbon (Sass)
Only the standard syntax,
with and without prefixes
Compass (Sass)
Some other combination
(such as everything except 2009)
Sass or LESS mixins, such as
https://github.com/mastastealth/
sass-flex-mixin

61. Add Modernizr as needed with flexbox
Flexbox and fallback styles can often co-
exist, but sometimes need to isolate them
http://zomigi.com/blog/using-modernizr-with-flexbox/

62. Or use @supports
.gallery-item {
display: inline-block;
}
@supports (flex-wrap: wrap) {
.gallery {
display: flex;
flex-wrap: wrap;
}
}
https://developer.mozilla.org/en-US/docs/Web/CSS/@supports
But IE 10-11, which do
support flexbox but
don’t support
@supports, won’t get
these styles

63. Choose and add appropriate
starter/fallback layout CSS

64. Things to consider
Do I need content blocks to wrap? not table-cell
Do I want to prevent blocks from wrapping? floats, inline-block, but
table-cell best
Do I need content-driven sizes? floats, but table-cell or
inline-block best
Do I need vertical alignment? inline-block, table-cell
Do I need horizontal alignment? floats, table-cell, inline-
block only with preset
sizes

65. Pick your starter layout CSS
¨ Floats
¨ table-cell
¨ inline-block
¨ Absolute positioning
Flexbox will override: Flexbox will not override:
Just use whatever you normally would;
flexbox plays nicely with most of them.

66. A real example of this process

67. Split left-right layout
Task: lay out review score
and price, on opposite
sides of same line
Needs:
¨ content-driven sizing
¨ horizontal alignment
¨ wrapping
score price or
“sold out”

68. Adding the starter CSS
.iw_mini_review_score_wrapper {
float: left;
}
.iw_mini_price_wrapper {
float: right;
}

69. Start adding flexbox!

70. Decide whether entire
component needs to be
block or inline-block
display:flex or inline-flex

71. Creating the block flex container
.iw_mini_details_wrapper {
display: flex;
}
.iw_mini_review_score_wrapper {
float: left;
}
.iw_mini_price_wrapper {
float: right;
}
Flex container sits
on a new row below,
like a block element

72. Decide flow of flex items

73. Things to consider
Lay out horizontally or vertically? flex-direction:row or
column
Allow boxes to wrap? flex-wrap:wrap,
wrap-reverse or nowrap
Order different than source? order values;
flex-direction:
row-reverse or
column-reverse

74. Allowing wrapping
.iw_mini_details_wrapper {
display: flex;
flex-wrap: wrap;
}
.iw_mini_review_score_wrapper {
float: left;
}
.iw_mini_price_wrapper {
float: right;
}
Allows second block to
wrap down if needed

75. Decide which items can
grow to fill space,
shrink to avoid overflow,
or must stay at a certain size

76. Tips for setting flex values
¨ Avoid single-digit and keyword values
¤ flex: 1 1 0% instead of flex: 1
¤ Hidden default values can lead to mistakes
¤ Avoids IE 10-11 bugs
¨ Think about it backwards
¤ First decide flex-basis
¤ Then decide flex–shrink and flex-grow

77. Tips for setting flex-basis values
¨ Acts like min-width when wrapping on
¨ Acts like max-width when flex-shrink
on and flex-grow off
¨ Be careful with flex-basis:0 when
wrapping
¨ Use flex-basis:auto whenever possible

78. Setting flex-shrink
¨ Always have at least 1 item per line that
can shrink (or wrap, or both)
¨ Yes, always

79. Setting flex-grow
¨ Decide what to do with extra space
¤ Fill it up? (flex-grow: 1, 2, etc.)
¤ Leave it? (flex-grow: 0)

80. Setting flex values
.iw_mini_details_wrapper {
display: flex;
flex-wrap: wrap;
}
.iw_mini_review_score_wrapper {
float: left;
flex: 0 1 auto;
}
.iw_mini_price_wrapper {
float: right;
flex: 0 1 auto;
}
Size to content, shrink
smaller if you have to,
don’t grow bigger
(default value)

81. Decide how to align flex items
justify-content • align-items
align-self • align-content

82. Controlling alignment
.iw_mini_details_wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: baseline;
}
.iw_mini_review_score_wrapper {
float: left;
}
.iw_mini_price_wrapper {
float: right;
}
Moves first item to left,
last item to right

83. Improved wrapping
Non-flexbox Flexbox enhanced

84. Flexbox with float fallback
.iw_mini_details_wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: baseline;
}
.iw_mini_review_score_wrapper {
float: left;
}
.iw_mini_price_wrapper {
float: right;
}
Flexbox properties on
container override
floating automatically
in supporting browsers
Floating gets used by
old browsers

85. Test

86. Testing your flexbox
¨ If using Modernizr: Too Flexy bookmarklet
for toggling Modernizr flexbox classes:
http://chriswrightdesign.github.io/tooflexy/
¨ If reordering: check tabbing and screen
reading order to make sure it’s still logical

87. Fix bugs

88. Fixing browsers’ flexbox bugs
¨ Read explanations and workarounds by
Philip Walton:
https://github.com/philipwalton/flexbugs
¨ Let PostCSS fix some for you:
https://github.com/luisrudge/postcss-flexbugs-fixes

89. Summing up the process
1. Decide which browser versions of flexbox to use
2. Choose and add starter layout CSS
3. Choose and add flexbox CSS
1. Block or inline-block container
2. Flow
3. Flex to control sizing
4. Alignment
4. Test and fix bugs

90. Flexbox is not for the future.
You can use flexbox today.

91. Thanks!
Zoe Mickley Gillenwater
@zomigi
design@zomigi.com
zomigi.com