Enhancing Responsiveness With Flexbox (CSS Day)

Flexbox
Zoe Mickley Gillenwater @zomigiCSS Day
June 2015
Enhancing
WITH
Responsiveness

I used to make fixed-width sites…2

I even wrote a
book about it
in 2008.
Then I got into CSS “liquid” layout4

Problems with CSS 2 layout
 Float containment
 Wrapping hard to control
 Difficulty making boxes equal height
 Difficulty doing vertical centering
 Difficulty mixing units of measurement
 Visual location still tied to HTML order
5

Flexbox solves a lot of those issues
 Make boxes automatically grow to fill
space or shrink to avoid overflow
 Give boxes proportional measurements
 Lay out boxes in any direction
 Align boxes on any side
 Place boxes out of order from HTML
6

Use flexbox now on UI components as
progressive enhancement.
You can use flexbox now8

“Easy for you to say.
I have to support IE 8.”
– You, maybe

“I work for Booking.com,
and we support IE 7,
and I use flexbox.”
– Me

Progressive enhancement possibilities
 Align items in new ways
 Fill up the gaps in your layout
 Reorder decorative content
 Increase responsiveness
11

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

Flexbox and RWD
Make better use of the space
at all screen sizes
Reorder content at different
screen sizes
13
Space
Placement

Demo: horizontal navigation
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;
}
15

1. Turn <ul> into flex container:
.list-nav {
display: flex;
flex-direction: row; /* default */
...
}
2. Children <li> become flex items laid out on
single horizontal line
16

Non-flexbox
fallback version
Flexbox version
17

Making it full-width
 All links on same line
 First link flush left, last link flush right
 Equal spaces between all links
18

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

Spacing with table-layout:fixed20

Making it full-width
.list-nav {
display: flex;
justify-content: space-between;
margin: 0;
padding: 0;
list-style: none;
}
.list-nav li {
text-align: center;
}
21

justify-content22
aligns flex items along
main axis
space-around
flex-endcenter
flex-start
(default)
space-between
(flow direction set by flex-direction)

Combine with inline-block
.list-nav {
display: flex;
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; }
23

Combine with inline-block
Non-flexbox
fallback version
Flexbox version
24

Improve the wide layout25
Wide: too stretched out
A more responsive enhancement

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>
26
<html class="flexbox">
Supporting browsers:
<html class="no-flexbox">
Non-supporting browsers:

Add Modernizr as needed with flexbox
 Flexbox and fallback styles can often co-
exist, but sometimes need (or want) to
isolate them
 Modernizr can add flexbox, no-flexbox,
and flexboxlegacy classes to do this
27

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

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; }
29
(margin)

Content blocks’ height varies in RWD,
and flexbox can also help you make
better use of varying vertical space
This works vertically too31

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

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

align-items34
aligns flex items in
cross axis
flex-start flex-end
center baseline
stretch
(default)
foo foo foo
(justify-content aligned in main axis)

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

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

3. Equally space the 3 icons along the vertical
main axis:
.icons {
display: flex;
flex-direction: column;
}
37

Demo: full-height stacked icons38

Combine with table-cell
.wrapper {
display: table; /* fallback */
display: flex;
}
.icons {
display: table-cell; /* fallback */
vertical-align: middle; /* fallback */
display: flex;
}
.content {
display: table-cell; /* fallback */
vertical-align: top; /* fallback */
flex: 1 0 0px;
}
39

Combine with float
.wrapper {
display: flex;
}
.icons {
float: left; /* fallback */
position: relative; /* fix for old WebKit bug w/ floated flex items */
width: 40px;
display: flex;
}
.content {
flex: 1 0 0px;
}
.no-flexbox .content {
margin-left: 60px; /* fallback */
}
40

Fallback alignment options41
Top-aligned (float) Centered (table-cell)

Combining units of measurement across
a line can make RWD tricky.
ems + % + px + [blank] = ???42

Demo: responsive form43
Inspired by http://jobs.theguardian.com/,
which uses floats and percentage widths

But it would be nicer if…44
 The drop-down and button were sized
automatically by their content, so this
doesn’t happen:
 The fields and button all matched each
other exactly in height

Enhance form with flexbox45
1. Let the fields wrap when needed:
.jobs-form {
display: flex;
flex-wrap: wrap;
}

2. Override the % widths and use flex instead:
/* hide from non-flex browsers */
.flexbox .jobs-form_field-wrapper {
width: auto;
flex: 1 1 100%;
}

3. When wider, let fields size to their content:
@media (min-width:40em) {
.jobs-form_keywords, /* the 2 text fields */
.jobs-form_location {
flex: 1 1 auto;
}
.jobs-form_distance, /* select and button */
.jobs-form_submit {
flex: 0 0 auto;
}
}

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

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)
49

Breaking down the flex property50
.jobs-form_keywords,
flex: 1 1 auto;
}
.jobs-form_distance,
.jobs-form_submit {
flex: 0 0 auto;
}
}
flex-basis = auto
start field at “main
size” value (in this
case, width) or
natural content size if
main size not set

flex: 1 1 auto;
}
.jobs-form_submit {
flex: 0 0 auto;
}
}
flex-shrink = 1
it’s ok to shrink smaller
than starting width if
there’s not enough space
flex-shrink = 0
don’t shrink smaller
than starting width

flex: 1 1 auto;
}
.jobs-form_submit {
flex: 0 0 auto;
}
}
flex-grow = 1
give it 1 share of
any extra width on
its line
flex-grow = 0
don’t grow bigger
than starting width

In other words...53
flex: 1 1 auto;
}
.jobs-form_submit {
flex: 0 0 auto;
}
}
Text fields:
You guys adjust to the space
available to fill the line.
Select and button:
You guys just stay at your
content width.

The flexbox form so far54
flex-basis: 100%
flex-basis: auto

4. Refine keywords field’s flex-basis values
to improve the layout:
.jobs-form_keywords { flex: 1 1 100%; }
.jobs-form_location { flex: 1 1 auto; }
.jobs-form_submit { flex: 0 0 auto; }
}
.jobs-form_keywords { flex-basis: auto; }
}

5. 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; /* sets align-items:stretch */
width: auto;
flex: 1 1 100%;
}
Fields misaligned without flexbox Fields match height due to align-items

Smarter sizing57
Non-flexbox
Flexbox enhanced

Content-driven breakpoints
aren’t perfect.

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

Automatic orientation switch60
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

Demo: responsive article header
 No media query
 display: block
 50em media query
 display: table-cell
61
Narrow starting styles Wide starting styles

Enhance header with flexbox62
.article-header
.article-header-image
.article-header-text

1. Make photo and text block automatically sit side-
by-side when they can fit (300px + 20em):
.article-header {
display: flex;
flex-wrap: wrap;
margin-left: -20px;
}
.article-header-image {
flex: 1 1 300px;
padding: 0 0 20px 20px;
}
.article-header-text {
flex: 1 1 20em;
}

2. Enhance alignment of text within the text block:
...
.article-header-text {
display: flex;
flex-wrap: wrap;
align-items: baseline;
align-content: space-between;
flex: 1 1 20em;
}
.article-title {
flex: 1 1 100%;
}
.article-category {
flex: 1 1 auto;
}

Demo: responsive article header65
flex: 1 1 auto
align-content:
space-between

Improved wrapping66
With float or text-align With flex or justify-content

A real-world wrapping example
Without flexbox (IE 9) With flexbox (Chrome)
67

Flexbox with float fallback
.iw_mini_details_wrapper {
display: flex;
flex-wrap: wrap;
align-items: baseline;
}
.iw_mini_review_score_wrapper {
float: left;
}
.iw_mini_price_wrapper {
float: right;
}
68

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; }
70
Nav overlaps logo’s line,
so link text could overlap
logo if viewport too
narrow or text too big

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 */
}
71
(margin)

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

Order only works on siblings73
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>

Accessibility implications
Pro
Can keep content in
logical order in HTML
instead of structuring
HTML just to achieve a
visual layout.
Cons
If HTML order is illogical,
screen reader users still
hear it.
Focus/tab order won’t
always match expected
order, may jump around
seemingly randomly.
74

If you’re using it for progressive
enhancement, the content should make
sense in both the HTML and visual order.
Use the order property sparingly75

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
order property only on
mobile, since browser
support is great there
Problem Solution
76

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

Use flexbox order in mobile styles
.recipe {
display: flex;
}
.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
78

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

Demo: moving a photo on mobile
Flexbox version Non-flexbox version
80

The Guardian: opposite approach81
Stacking order you
see when narrow
is the HTML order,
unchanged
1
2
3
4
5
6

The Guardian: opposite approach82
Reordered when
wide, but not
using order 12 3
4 56
flex-direction: row-reverse
flex-direction: row-reverse

v.10+
2009 syntax
(display:box)
2011 syntax
(display:flexbox)
Current syntax
(display:flex)
v.10
Pick which versions you’ll use
* with -webkit- prefix
† with -ms- prefix
v.6+
*
†
*
v.3+
*
v.4.4v.11
*
v.7+
*
84

I recommend you skip the ‘09 syntax85
 It’s slower to render than current syntax*
 Doesn’t support wrapping
 Its browsers have tiny market share
 You should be using flexbox in progressive
enhancement sort of way regardless, so its
browsers will just get same fallback you
provide to non-supporting browsers
* http://updates.html5rocks.com/2013/10/Flexbox-layout-isn-t-slow

Set up your tools
 Let Autoprefixer, Sass, or LESS add the
browser variants for you:
 https://github.com/ai/autoprefixer
 https://github.com/mastastealth/sass-flex-mixin
 https://gist.github.com/cimmanon/4461470
 https://github.com/thoughtbot/bourbon/blob/mas
ter/app/assets/stylesheets/css3/_flex-box.scss
 https://github.com/annebosman/FlexboxLess
 Keep Modernizr on hand to help feed
different styles to different browsers:
http://modernizr.com/download/
86

Adding Modernizr classes with Sass87
@mixin supports-flexbox($support) {
@if $support == yes {
.flexbox & { @content }
}
@if $support == no {
.no-flexbox & { @content }
}
}

.container {
display: flex;
}
.sidebar {
float: left;
width: 300px;
}
.main-content {
margin-left: 320px;
@include supports-flexbox(yes) {
margin-left: 20px;
}
}

.container {
display: flex;
}
.sidebar {
float: left;
width: 300px;
}
.main-content {
margin-left: 320px;
}
.flexbox .main-content {
margin-left: 20px;
}

Pick your starter/fallback layout CSS
 Floats
 table-cell
 inline-block
 Absolute positioning
90
Flexbox will override: Flexbox will not override:
No single right/best answer. Use whatever
you normally would.

Learn more92
Download slides and get links at
www.zomigi.com/blog/rwd-flexbox
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.

Enhancing Responsiveness With Flexbox (CSS Day)

More Related Content

What's hot

Similar to Enhancing Responsiveness With Flexbox (CSS Day)

More from Zoe Gillenwater

Recently uploaded

Enhancing Responsiveness With Flexbox (CSS Day)