1.
Flexbox
Zoe Mickley Gillenwater @zomigi
Responsive Day Out
June 2015
Inspiration
Responsive

2.
I work for

3.
674,000+ properties
42 languages
54 currencies

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

5.
How big do I make this thing?

6.
%
em/rem
vw/vh

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

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

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

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

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

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

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

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

15.
Smarter sizing
Non-flexbox
Flexbox enhanced

16.
Content-driven breakpoints
aren’t perfect.

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

18.
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%;
float: left;
margin-right: 10px;
padding: 8px 10px;
}
1 property creates
2 responsive layouts,
both always full width

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

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

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

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

23.
Improved wrapping
Non-flexbox Flexbox enhanced

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

25.
Improved wrapping in RWD layout

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

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

28.
Flexbox can also enhance
visual ordering.

29.
Reordering mobile content
In RWD, narrow-view
(mobile) stacking order
doesn’t always match
needed HTML order for
wide-view (desktop)
layout
Keep HTML order needed
for desktop and use
flexbox order property
only on mobile, since
browser support is better
and layout is simpler
there
Problem Solution

30.
Example: moving a photo on mobile

31.
Example: moving a photo on mobile
Flexbox enhanced Non-flexbox

32.
Reorder for good, not evil.

33.
Reordering on The Guardian
Stacking order you
see when narrow
is the HTML order,
unchanged
1
2
3
4
5
6

34.
Reordering on The Guardian
Reordered using
flexbox when wide
12 3
4 56
flex-direction: row-reverse
flex-direction: row-reverse

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

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

37.
Flexbox is not
ALL
or NOTHING

38.
Thanks!
Zoe Mickley Gillenwater
@zomigi
design@zomigi.com
zomigi.com | stunningcss3.com | flexiblewebbook.com
Photo credits: “oh.my.goshk” by Abulic Monkey and “A Cone Undone” by patersor on Flickr.