Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)

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

802,000+ properties
42 languages
54 currencies

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

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 ﬂoats, same percentage widths

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

Use the ﬂex 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

Form ﬁelds are a pain in the butt
The ﬁelds 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
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

Smarter sizing
Non-ﬂexbox
Flexbox enhanced

Content-driven breakpoints
aren’t perfect.

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

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

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

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

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

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)

Breaking down the ﬂex property
flex: 1 0 40%;
width: 43%;
float: left;
margin-right: 10px;
padding: 8px 10px;
}
flex-basis = 40%
start ﬁeld 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

In other words…
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 ﬁll its line
Enough space for 2 per line, which
both stretch equally as needed to ﬁll

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?

Problem: the gap
is not always big
enough to hold a
sentence of text

Solution: use
ﬂexbox to place
text beside price
when space
allows; otherwise,
it can wrap below
price

Non-ﬂexbox Flexbox enhanced

Improved wrapping
Non-ﬂexbox Flexbox enhanced

Flexbox with ﬂoat 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
ﬂoating automatically
in supporting browsers
Floating gets used by
old browsers

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

Improved wrapping in RWD layout
With ﬂoat or text-align With ﬂex or justify-content

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

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

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

Spacing with table-layout:ﬁxed

Starter centered nav bar
Without ﬂexbox:
.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; }

Enhanced to be full-width
.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; }

Combine with inline-block
Non-ﬂexbox
fallback version
Flexbox version

Improve the wide layout
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>
<html class="flexbox">
Supporting browsers:
<html class="no-flexbox">
Non-supporting browsers:

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

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

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

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)

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

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

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)

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

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

Fallback alignment options
Top-aligned (ﬂoat) Centered (table-cell)

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

Flexbox can also enhance
visual ordering.

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

order
integer to specify ﬂow order of ﬂex 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

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)

Use order property to move logo
2.  Split extra space on line to center logo:
.logo {

margin-left: auto;
}
.link-party {

margin-left: auto;
}

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>

Demo: moving a photo on mobile

Desktop: HTML order (no ﬂexbox)Mobile: reordered

Use ﬂexbox 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-ﬂexbox-for-better-css-patterns--cms-19449

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

Flexbox enhanced Non-ﬂexbox

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

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
nothing
or

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

Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)

More Related Content

What's hot

Viewers also liked

Similar to Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)

More from Zoe Gillenwater

Recently uploaded

Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)