Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Flexbox 
Zoe Mickley Gillenwater @zomigi
Responsive Day Out
June 2015
Inspiration
Responsive
I work for
674,000+ properties
42 languages
54 currencies
Content extremes on Booking.com
Shortest property name: 2 characters
Longest property name: 109 characters
How big do I make this thing?
%
em/rem
vw/vh
Relative units of measurement
are your best guess at the
ideal, but they’re still a guess.
Flexbox gets us closer to the
ideal, because it lets us design
without units.
Example: a responsive form
from http://jobs.theguardian.com/
My copy of that form
Same floats, same percentage widths
The trouble with explicit sizing
Since the select and button are sized by a
percentage, not sized automatically by their
c...
Use the flex property instead
Tells browser starting size (including content
size) and whether item can grow or shrink
widt...
Form fields are a pain in the butt
The fields and button don’t all match each
other exactly in height
Fix alignment with flexbox
Turn each field wrapper into flex container so
field inside will stretch to match height of its
lin...
Smarter sizing
Non-flexbox
Flexbox enhanced
Content-driven breakpoints
aren’t perfect.
Automatic breakpoint with flexbox
Booking’s responsive customer service form
doesn’t use any media queries
http://www.booki...
All of the CSS for those 2 layouts
form.cs-message {
display: flex;
flex-flow: row wrap;
margin-right: -10px;
}
input.cs-m...
Taking advantage of variable space
Task: add a
message about
low availability
of the room
price shown:
“We have only X
lef...
Taking advantage of variable space
Problem: the gap
is not always big
enough to hold a
sentence of text
Taking advantage of variable space
Solution: use
flexbox to place
text beside price
when space
allows; otherwise,
it can wr...
Taking advantage of variable space
Non-flexbox Flexbox enhanced
Improved wrapping
Non-flexbox Flexbox enhanced
Flexbox with float fallback
.iw_mini_details_wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
alig...
Improved wrapping in RWD layout
Improved wrapping in RWD layout
With float or text-align With flex or justify-content
These examples don’t look wrong
or broken without flexbox.
Flexbox just enhances their sizing
and spacing to look better.
Flexbox can also enhance
visual ordering.
Reordering mobile content
In RWD, narrow-view
(mobile) stacking order
doesn’t always match
needed HTML order for
wide-view...
Example: moving a photo on mobile
Example: moving a photo on mobile
Flexbox enhanced Non-flexbox
Reorder for good, not evil.
Reordering on The Guardian
Stacking order you
see when narrow
is the HTML order,
unchanged
1
2
3
4
5
6
Reordering on The Guardian
Reordered using
flexbox when wide
12 3
4 56
flex-direction: row-reverse
flex-direction: row-reve...
Flexbox requires a mental shift
in how you think about and
approach layout.
RWD is not binary.
Responsiveness is a continuum.
Flexbox can help make your site
more responsive.
Flexbox is not
ALL
 or NOTHING
Thanks!
Zoe Mickley Gillenwater
@zomigi
design@zomigi.com
zomigi.com | stunningcss3.com | flexiblewebbook.com
Photo credits...
Responsive Flexbox Inspiration (Responsive Day Out)
Responsive Flexbox Inspiration (Responsive Day Out)
Responsive Flexbox Inspiration (Responsive Day Out)
Responsive Flexbox Inspiration (Responsive Day Out)
Upcoming SlideShare
Loading in …5
×

Responsive Flexbox Inspiration (Responsive Day Out)

1,356 views

Published on

I think the biggest obstacle to getting started with flexbox is not being able to picture how to use it, because you’re stuck thinking in terms of what was possible with floats and other old layout methods. It was the same when we switched from tables to CSS layout, and from fixed to fluid layout—you had to make a mental shift to start thinking in terms of the new possibilities and approaches to old problems.

Flexbox lets you do lots of things you haven’t been able to do before, and some things you could do before but now in a simpler way. Once you see what flexbox can do in the real world, you can start picturing how to use it in your own work to solve real RWD problems today. Flexbox can be tricky to wrap your head around at first, but once you’ve learned it, it’s an incredibly quick, cheap way for you to add more responsiveness to your components.

Published in: Design

Responsive Flexbox Inspiration (Responsive Day Out)

  1. 1. Flexbox Zoe Mickley Gillenwater @zomigi Responsive Day Out June 2015 Inspiration Responsive
  2. 2. I work for
  3. 3. 674,000+ properties 42 languages 54 currencies
  4. 4. Content extremes on Booking.com Shortest property name: 2 characters Longest property name: 109 characters
  5. 5. How big do I make this thing?
  6. 6. % em/rem vw/vh
  7. 7. Relative units of measurement are your best guess at the ideal, but they’re still a guess.
  8. 8. Flexbox gets us closer to the ideal, because it lets us design without units.
  9. 9. Example: a responsive form from http://jobs.theguardian.com/
  10. 10. My copy of that form Same floats, same percentage widths
  11. 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. 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. 13. Form fields are a pain in the butt The fields and button don’t all match each other exactly in height
  14. 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. 15. Smarter sizing Non-flexbox Flexbox enhanced
  16. 16. Content-driven breakpoints aren’t perfect.
  17. 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. 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. 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. 20. Taking advantage of variable space Problem: the gap is not always big enough to hold a sentence of text
  21. 21. Taking advantage of variable space Solution: use flexbox to place text beside price when space allows; otherwise, it can wrap below price
  22. 22. Taking advantage of variable space Non-flexbox Flexbox enhanced
  23. 23. Improved wrapping Non-flexbox Flexbox enhanced
  24. 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. 25. Improved wrapping in RWD layout
  26. 26. Improved wrapping in RWD layout With float or text-align With flex or justify-content
  27. 27. These examples don’t look wrong or broken without flexbox. Flexbox just enhances their sizing and spacing to look better.
  28. 28. Flexbox can also enhance visual ordering.
  29. 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. 30. Example: moving a photo on mobile
  31. 31. Example: moving a photo on mobile Flexbox enhanced Non-flexbox
  32. 32. Reorder for good, not evil.
  33. 33. Reordering on The Guardian Stacking order you see when narrow is the HTML order, unchanged 1 2 3 4 5 6
  34. 34. Reordering on The Guardian Reordered using flexbox when wide 12 3 4 56 flex-direction: row-reverse flex-direction: row-reverse
  35. 35. Flexbox requires a mental shift in how you think about and approach layout.
  36. 36. RWD is not binary. Responsiveness is a continuum. Flexbox can help make your site more responsive.
  37. 37. Flexbox is not ALL or NOTHING
  38. 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.

×