Using Flexbox Today (CSS Summit 2016)

Flexbox
Zoe Mickley Gillenwater @zomigiCSS Summit
July 2016
TODAY
USING

I work for
Psst…you can too: www.workingatbooking.com

tables
positioning
floats
inline-block
table-cell
flexbox
grid
multi-column
exclusions
shapes
regions
flexbox

Deciding when to use and not use ﬂexbox
WHEN
¨ 1.

What browsers do I need to
support?
Don’t ask yourself this—it’s irrelevant here
(IMO)

Flexbox has 96.8% coverage worldwide
We support IE 7-9 at Booking, but still use ﬂexbox as
progressive enhancement.

Do I want to create a layout in
1 dimension (row OR column)
or 2 dimensions?
Hat-tip to Rachel Andrew:
https://rachelandrew.co.uk/archives/2016/03/30/should-i-use-grid-or-ﬂexbox/

Flexbox is not a grid
¨  Not meant for or great at whole page layout
¨  Flex items only care about space in their
own row/column
¨  They don’t care about lining up in the other
dimension

Demo by Rachel Andrew: http://codepen.io/rachelandrew/pen/YqqdXL

Flexbox is best for:
¨  UI components
¨  Simple whole page layouts (not grid-based)
¨  Enhancing a complex layout’s alignment,
spacing, etc. (not controlling placement)

Do I need my content to
dictate sizing and placement,
or do I need to control these?

Content determines
boxes’ size and
placement
(Mega-useful when
content is unknown and
variable, or readability is
a top priority.)
Structure determines
content’s size and
placement
(P.S. Flexbox can do this
too, if you want. It’s just
the reverse that doesn’t
work so well.)
Flexbox Grids

Does ﬂexbox offer me anything
I can’t already get
from an existing layout method?

New things ﬂexbox offers
¨  Content-driven, unit-less sizes
¨  Content-driven, media-query-less layout changes
¨  Mixed-unit layouts
¨  Equal-height columns
¨  Vertical centering and other alignments
¨  Spacing out or stretching items to ﬁll unknown width/height
¨  Combining content wrapping and block wrapping
¨  Pinning items without overlaps
¨  Visual order different than HTML/reading order

Components ﬂexbox can enhance and
UI/UX problems it can help you solve
WHAT
¨ 2.

content-driven, unit-less sizes

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 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 sizing on Booking.com
Last year’s sidebar searchbox design, with
ﬁxed-width select ﬁelds

Non-ﬂexbox Flexbox enhanced

.sb-dates {
display: flex;
}
.sb-dates__icon {
flex: 0 0 23px;
}
.sb-dates__select-day {
flex: 1 0 auto;
margin: 0 6px;
}
.sb-dates__select-month {
flex: 1 1 auto;
}
ﬂex container
main axis
ﬂex items

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)

Translating the ﬂex property
.sb-dates {
display: flex;
}
.sb-dates__icon {
flex: 0 0 23px;
}
.sb-dates__select-day {
flex: 1 0 auto;
margin: 0 6px;
}
.sb-dates__select-month {
flex: 1 1 auto;
}
Start out 23px wide, and don’t grow
or shrink further
Start out sized to your content, then
grow with 1 share of any extra space
available, but don’t ever shrink
Start out sized to your content, then
grow with 1 share of extra space, but
if there’s an overﬂow shrink

Mixed-unit layout is easier with
calc(), but not even it can do:
calc(100% - 23px - the width of
the day field in Greek)

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

Progressive enhancement

Content-driven layout change
2 columns 3 columns

RWD content-driven layout change
Narrow: 1 column Wide: 2 columns

RWD content-driven layout change
.article-header {
display: flex;
flex-flow: row wrap;
margin-left: -20px;
}
.article-header-image {
flex: 1 1 320px;
padding-left: 20px;
}
When 320px + 20em can ﬁt together, layout shifts
to 1 row/2 columns
.article-header-text {
flex: 1 1 20em;
padding-left: 20px;
}

Layout change without media query
1.  Let the blocks wrap and stack when needed:
.article-header {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
/* default */

Layout change without media query
2.  Size the blocks to control their wrapping
point:
.article-header-image {
flex: 1 1 320px;
padding-left: 20px;
}
.article-header-text {
flex: 1 1 20em;
padding-left: 20px;
}

Stretching to ﬁll unknown width/height
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 spacing
and 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, no ﬂexbox
.menu-list {
margin: 0;
padding: 0;
list-style: none;
text-align: center;
}
http://codepen.io/zomigi/pen/vKjbbY/
.menu-list-item {
display: inline-block;
padding: 16px 32px;
}

Enhanced to full-width with ﬂexbox
.menu-list {
display: flex;
justify-content: space-between; /* equally spaces items across width */
margin: 0;
padding: 0;
list-style: none;
text-align: center; /* fallback */
}
.menu-list-item {
display: inline-block; /* fallback */
padding: 0 .5em; /* fallback */
}

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

Demo: full-height menu
.menu-list {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.menu-list-item {
height: 100%;
display: flex;
align-items: center;
}
.menu-list {
display: flex;
}
.menu-list-item {
flex: 1 0 auto;
display: flex;
align-items: center;
}
justify-content version ﬂex version

Flexbox can also enhance
visual ordering.

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

Demo: moving a photo on mobile

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

Use ﬂexbox order in mobile styles
.recipe {
display: flex;
}
.recipe figure {
order: -1; /* before all items with default order: 0 */
}
.recipe figure img {
width: 100%;
}

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

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

Step-by-step process for adding ﬂexbox
to your UI components effectively
HOW
¨ 3.

Decide whether ﬂexbox is the
right tool for the job

Decide which versions of
ﬂexbox to support
standard, 2011/2012, and/or 2009

Browser support approaches to choose
¨  Use only the non-prefixed, standard syntax
¨  … plus browser-prefixed versions of
standard syntax
¨  … plus -ms- prefixed 2011/2012 syntax
¨  … plus -webkit- prefixed 2009 syntax
http://caniuse.com/#feat=flexbox

I recommend you skip the ‘09 syntax
¨  It’s slower to render than current syntax*
¨  Doesn’t support wrapping
¨  Its browsers have small market share
¨  If using ﬂexbox for progressive
enhancement, its browsers can get same
fallback given to non-supporting browsers
* http://updates.html5rocks.com/2013/10/Flexbox-layout-isn-t-slow

Let tools add browser variants for you
Which variants do you want? Best tool to handle that
All the things! Autoprefixer
Bourbon (Sass)
Only the standard syntax,
with and without prefixes
Compass (Sass)
Some other combination
(such as everything except 2009)
Sass or LESS mixins, such as
https://github.com/mastastealth/
sass-flex-mixin

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
But IE 10-11, which do
support ﬂexbox but
don’t support
@supports, won’t get
these styles

Choose and add appropriate
starter/fallback layout CSS

Things to consider
Do I need content blocks to wrap? not table-cell
Do I want to prevent blocks from wrapping? floats, inline-block, but
table-cell best
Do I need content-driven sizes? floats, but table-cell or
inline-block best
Do I need vertical alignment? inline-block, table-cell
Do I need horizontal alignment? floats, table-cell, inline-
block only with preset
sizes

Pick your starter layout CSS
¨  Floats
¨  table-cell
¨  inline-block
¨  Absolute positioning
Flexbox will override: Flexbox will not override:
Just use whatever you normally would;
ﬂexbox plays nicely with most of them.

A real example of this process

Split left-right layout
Task: lay out review score
and price, on opposite
sides of same line
Needs:
¨  content-driven sizing
¨  horizontal alignment
¨  wrapping
score price or
“sold out”

Adding the starter CSS
.iw_mini_review_score_wrapper {
float: left;
}
.iw_mini_price_wrapper {
float: right;
}

Decide whether entire
component needs to be
block or inline-block
display:flex or inline-flex

Creating the block ﬂex container
.iw_mini_details_wrapper {
display: flex;
}
float: left;
}
float: right;
}
Flex container sits
on a new row below,
like a block element

Things to consider
Lay out horizontally or vertically? flex-direction:row or
column
Allow boxes to wrap? flex-wrap:wrap,
wrap-reverse or nowrap
Order different than source? order values;
flex-direction:
row-reverse or
column-reverse

Allowing wrapping
display: flex;
flex-wrap: wrap;
}
float: left;
}
float: right;
}
Allows second block to
wrap down if needed

Decide which items can
grow to ﬁll space,
shrink to avoid overﬂow,
or must stay at a certain size

Tips for setting ﬂex values
¨  Write out full flex values, rather than
using single-digit and keyword values
¤  flex: 1 1 0% instead of flex: 1
¤  Hidden default values can lead to mistakes
¤  Avoids IE 10-11 bugs
¨  Think about it backwards: ﬁrst decide
flex-basis, then -shrink, then -grow

Tips for setting ﬂex-basis values
¨  Acts like min-width when wrapping on
¨  If flex-wrap off and flex-shrink on,
browser can go smaller than flex-basis
¨  Be careful with flex-basis:0 when
wrapping
¨  Use flex-basis:auto whenever possible

Setting ﬂex-shrink
¨  Always have at least 1 item per line that
can shrink (or wrap, or both)

Setting ﬂex-grow
¨  Decide what to do with extra space
¤  Fill it up? (flex-grow: 1, 2, etc.)
¤  Leave it? (flex-grow: 0)

Setting ﬂex values
display: flex;
flex-wrap: wrap;
}
float: left;
flex: 0 1 auto;
}
float: right;
flex: 0 1 auto;
}
Size to content, shrink
smaller if you have to,
don’t grow bigger
(default value)

Decide how to align ﬂex items

Main axis alignment
(horizontal when row,
vertical when column)
Cross axis alignment
(vertical when row,
horizontal when column)
(P.S. Also responsible for
equal-height columns)
justify-content align-items

Controlling alignment
display: flex;
flex-wrap: wrap;
align-items: baseline;
}
float: left;
}
float: right;
}
Moves ﬁrst item to left,
last item to right

Improved wrapping

Flexbox with ﬂoat fallback
display: flex;
flex-wrap: wrap;
align-items: baseline;
}
float: left;
}
float: right;
}
Flexbox properties on
container override
ﬂoating automatically
in supporting browsers
Floating gets used by
old browsers

Testing your flexbox
¨  Too Flexy bookmarklet for toggling
Modernizr flexbox classes:
http://chriswrightdesign.github.io/tooflexy/
¨  If reordering, check tabbing and screen
reading order to make sure it’s still logical

Fixing browsers’ flexbox bugs
¨  Read explanations and workarounds by
Philip Walton:
https://github.com/philipwalton/flexbugs
¨  Let PostCSS fix some for you:
https://github.com/luisrudge/postcss-flexbugs-fixes

Summing up the process
1.  Decide whether to use flexbox and which browser
versions of it
2.  Choose and add starter layout CSS
3.  Choose and add flexbox CSS
1.  Block or inline-block container
2.  Flow
3.  Flex to control sizing
4.  Alignment
4.  Test and fix bugs

Flexbox is not for the future.
You can use ﬂexbox today.

Thanks!
Zoe Mickley Gillenwater
@zomigi
design@zomigi.com
zomigi.com

Using Flexbox Today (CSS Summit 2016)

More Related Content

What's hot

Viewers also liked

Similar to Using Flexbox Today (CSS Summit 2016)

More from Zoe Gillenwater

Recently uploaded

Using Flexbox Today (CSS Summit 2016)