Flexbox and responsive web design go great together, like peanut butter and jelly! Flexbox gives you more control over the things you care about in a responsive layout and lets you create much morecomplex and reliable layouts than you can with floats, table display, or inline-block. All with far less CSS. In this talk, you’ll learn what flexbox features are particularly suited to responsive layouts and how you can harness them by applying flexbox as a progressive enhancement. We’ll look at examples of responsive page components and patterns that you can enhance further by layering flexbox on top of other layout methods, ensuring all users get a good experience.

1. Flexbox
Zoe Mickley Gillenwater @zomigiCSS Conf EU
September 2015
Enhancing
WITH
Responsiveness

2. I work for

6. 802,000+ properties
42 languages
54 currencies

7. Content extremes on Booking.com
Shortest property name: 2 characters
Longest property name: 109 characters

8. How big do I make this thing?

9. %
em/rem
vw/vh

10. Relative units of measurement
are your best guess at the
ideal, but they’re still a guess.

11. Flexbox gets us closer to the
ideal, because it lets us design
without units.

12. Example: a responsive form
from http://jobs.theguardian.com/

13. My copy of that form
Same floats, same percentage widths

14. The trouble with explicit sizing
Since the select and button are sized by a
percentage, not sized automatically by their
content, this can happen:
Box too small for its content Box too big for its content

15. Use the flex property instead
Tells browser starting size (including content
size) and whether item can grow or shrink
width: 33.333%
flex: auto
Fill up remaining space
width: 16.666%
flex: none
Size to content exactly

16. Form fields are a pain in the butt
The fields and button don’t all match each
other exactly in height

17. Fix alignment with flexbox
Turn each field wrapper into flex container so
field inside will stretch to match height of its
line:
.flexbox .jobs-form_field-wrapper {
display: flex;
align-items: stretch; /* default */
width: auto;
}
Fields misaligned without flexbox Fields match height due to align-items

18. Smarter sizing
Non-flexbox
Flexbox enhanced

19. Content-driven breakpoints
aren’t perfect.

20. Automatic breakpoint with flexbox
Booking’s responsive customer service form
doesn’t use any media queries
http://www.booking.com/content/cs.html

21. All of the CSS for those 2 layouts
form.cs-message {
display: flex;
flex-flow: row wrap;
margin-right: -10px;
}
input.cs-message__text {
flex: 1 0 40%;
width: 43%; /* fallback */
float: left; /* fallback */
margin-right: 10px;
padding: 8px 10px;
}
1 property creates
2 responsive layouts,
both always full width

22. Layout change without media query
1. Let the fields wrap when needed:
form.cs-message {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-right: -10px;
}
/* default */

23. Layout change without media query
2. Size the fields to control their wrapping
point:
input.cs-message__text {
flex: 1 0 40%;
width: 43%; /* fallback */
float: left; /* fallback */
margin-right: 10px;
padding: 8px 10px;
}

24. Defining the flex property
Makes flex items change their main size
(width or height) to fit available space

25. Defining the flex property
flex-grow
how much flex
item will grow
relative to
other items if
extra space is
available
(proportion
of extra space
that it gets)
flex-shrink
how much item
will shrink
relative to others
if there is not
enough space
(proportion of
overflow that
gets shaved off)
flex-basis
the initial
starting size
before free
space is
distributed
(any standard
width/height
value, including
auto)

26. Breaking down the flex property
input.cs-message__text {
flex: 1 0 40%;
width: 43%;
float: left;
margin-right: 10px;
padding: 8px 10px;
}
flex-basis = 40%
start field at 40% wide
flex-shrink = 0
don’t shrink smaller
than starting width
flex-grow = 1
give it 1 share of any
extra width on its line

27. In other words…
input.cs-message__text {
flex: 1 0 40%;
width: 43%;
float: left;
margin-right: 10px;
padding: 8px 10px;
}
Not enough space for 2
40% wide items plus
their pixel margin and
padding, so only 1
allowed per line, which
then stretches wider
than 40% to fill its line
Enough space for 2 per line, which
both stretch equally as needed to fill

28. 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?

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

30. Taking advantage of variable space
Solution: use
flexbox to place
text beside price
when space
allows; otherwise,
it can wrap below
price

31. Taking advantage of variable space
Non-flexbox Flexbox enhanced

32. Improved wrapping
Non-flexbox Flexbox enhanced

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

34. Improved wrapping in RWD layout
34
flex: 1 1 auto
align-content:
space-between

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

36. Flexbox is great for aligning
stuff, especially shifting
content in RWD.

37. Demo: full-width nav bar
¨ All links on same line
¨ First link flush left, last link flush right
¨ Equal spaces between all links

38. Trying display:table-cell
J All links on same line
J First link flush left, last link flush right
L Equal spaces between all links

39. Spacing with table-layout:fixed

40. Starter centered nav bar
Without flexbox:
.list-nav {
margin: 0;
padding: 0;
list-style: none;
text-align: center;
}
.list-nav li {
display: inline-block;
padding: 0 .5em;
text-align: center;
}
.list-nav li:first-child { padding-left: 0; }
.list-nav li:last-child { padding-right: 0; }

41. Enhanced to be full-width
.list-nav {
display: flex;
justify-content: space-between;
margin: 0;
padding: 0;
list-style: none;
text-align: center; /* fallback */
}
.list-nav li {
display: inline-block; /* fallback */
padding: 0 .5em; /* fallback */
text-align: center;
}
.list-nav li:first-child { padding-left: 0; }
.list-nav li:last-child { padding-right: 0; }

42. Combine with inline-block
Non-flexbox
fallback version
Flexbox version

43. Improve the wide layout
Wide: too stretched out
A more responsive enhancement

44. Wide variation: two-piece main nav
1. Add media query for wide width:
@media (min-width:860px) {
}
2. Add link to Modernizr:
<script src="js/modernizr.js"></script>
<html class="flexbox">
Supporting browsers:
<html class="no-flexbox">
Non-supporting browsers:

45. 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/

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

47. Wide variation: two-piece main nav
3. Move nav bar up to overlap logo’s line:
@media (min-width:860px) {
.flexbox .list-nav {
position: relative;
top: -70px;
}
}

48. Wide variation: two-piece main nav
4. Add margins to control extra space in line:
.flexbox .link-party {
margin-left: auto;
}
.flexbox .link-home { margin-right: 15px; }
.flexbox .link-tumblr { margin-left: 15px; }
(margin)

49. A more responsive nav bar

50. This works vertically too.

51. Demo: full-height stacked icons
.wrapper
.icons
.content

52. Demo: full-height stacked icons
1. Turn children .icons and .content into
side-by-side, equal-height flex items
.wrapper {
display: flex;
align-items: stretch; /* default */
}

53. Only children become flex items
So these 2 children are the flex items
This is the flex container
These 3 grandchildren aren’t flex items (yet)

54. Demo: full-height stacked icons
2. Turn .icons into flex container with
vertically stacked children (the 3 icons):
.icons {
display: flex;
flex-direction: column; /* main axis */
}

55. Demo: full-height stacked icons
3. Equally space the 3 icons along the vertical
main axis:
.icons {
display: flex;
flex-direction: column;
justify-content: space-between;
}

56. Demo: full-height stacked icons

57. Fallback alignment options
Top-aligned (float) Centered (table-cell)

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

59. Flexbox can also enhance
visual ordering.

60. Remember this?
.flexbox .list-nav {
position: relative;
top: -70px;
}
.flexbox .link-party {
margin-left: auto;
}
.flexbox .link-home { margin-right: 15px; }
.flexbox .link-tumblr { margin-left: 15px; }
Nav overlaps logo’s line,
so link text could overlap
logo if viewport too
narrow or text too big

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

62. Use order property to move logo
1. Divide nav bar into order groups:
.link-home, .link-builder {
order: 0; /* default, and first here */
}
.logo {
order: 1; /* second */
}
.link-party, .link-tumblr {
order: 2; /* last */
}
(margin)

63. Use order property to move logo
2. Split extra space on line to center logo:
.logo {
margin-left: auto;
}
.link-party {
margin-left: auto;
}

64. Order only works on siblings
To move logo to middle of list, it needs to be
part of list
<div class="logo"><img src="images/logo.png"></div>
<ul class="list-nav">
<li class="logo"><img src="images/logo.png"></li>
<li class="link-home"><a>home</a></li>
<li class="link-builder"><a>s'mores builder</a></li>
<li class="link-party"><a>throw a party</a></li>
<li class="link-tumblr"><a>tumblr</a></li>
</ul>

65. Reorder for good, not evil.

66. Demo: moving a photo on mobile

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

68. 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%;
}
Inspired by Jonathan Cutrell’s example at http://webdesign.tutsplus.com/
tutorials/tricks-with-flexbox-for-better-css-patterns--cms-19449

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

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

71. Reordering on The Guardian
12 3
4 56
flex-direction: row-reverse
flex-direction: row-reverse
1
2
3
4
5
6

72. Flexbox requires a mental shift
in how you think about and
approach layout.

73. RWD is not binary.
Responsiveness is a continuum.
Flexbox can help make your site
more responsive.

74. Flexbox is not
all
nothing
or

75. Thanks!
Zoe Mickley Gillenwater
@zomigi
design@zomigi.com
zomigi.com | stunningcss3.com | flexiblewebbook.com
Photo credits: “Currywurst mit Pommes” by Jessica Spengler and “lecker war’s” by Mike Herbst on Flickr.