SlideShare a Scribd company logo
1 of 75
Download to read offline
Flexbox 
Zoe Mickley Gillenwater @zomigiCSS Conf EU
September 2015
Enhancing
WITH
Responsiveness
I work for
802,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
content, this can happen:
Box too small for its content Box too big for its content
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
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
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-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.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 fields 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 fields to control their wrapping
point:
input.cs-message__text {
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 flex property
input.cs-message__text {
flex: 1 0 40%;
width: 43%;
float: left;
margin-right: 10px;
padding: 8px 10px;
}
flex-basis = 40%
start field 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…
input.cs-message__text {
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 fill its line
Enough space for 2 per line, which
both stretch equally as needed to fill
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?
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 wrap below
price
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;
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
Improved wrapping in RWD layout
34
flex: 1 1 auto
align-content:
space-between
Improved wrapping in RWD layout
With float or text-align With flex 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 flush left, last link flush right
¨  Equal spaces between all links
Trying display:table-cell
J All links on same line
J First link flush left, last link flush right
L Equal spaces between all links
Spacing with table-layout:fixed
Starter centered nav bar
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;
}
.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;
justify-content: space-between;
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-flexbox
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 flexbox
Flexbox and fallback styles can often co-
exist, but sometimes need to isolate them
http://zomigi.com/blog/using-modernizr-with-flexbox/
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
Wide variation: two-piece main nav
3.  Move nav bar up to overlap logo’s line:
@media (min-width:860px) {
.flexbox .list-nav {
position: relative;
top: -70px;
}
}
Wide variation: two-piece main nav
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)
A more responsive nav bar
This works vertically too.
Demo: full-height stacked icons
.wrapper
.icons
.content
Demo: full-height stacked icons
1.  Turn children .icons and .content into
side-by-side, equal-height flex 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)
Demo: full-height stacked icons
2.  Turn .icons into flex container with
vertically stacked children (the 3 icons):
.icons {
display: flex;
flex-direction: column; /* main axis */
}
Demo: full-height stacked icons
3.  Equally space the 3 icons along the vertical
main axis:
.icons {
display: flex;
flex-direction: column;
justify-content: space-between;
}
Demo: full-height stacked icons
Fallback alignment options
Top-aligned (float) Centered (table-cell)
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.
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 flow order of flex 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>
Reorder for good, not evil.
Demo: moving a photo on mobile
Demo: moving a photo on mobile
Desktop: HTML order (no flexbox)Mobile: reordered
Use flexbox 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-flexbox-for-better-css-patterns--cms-19449
Turn off flexbox in desktop styles
@media screen and (min-width:800px) {
.recipe {
display: block; /* turn off flexbox */
}
.recipe figure {
float: right;
width: 55%;
}
}
Demo: moving a photo on mobile
Flexbox enhanced Non-flexbox
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 | flexiblewebbook.com
Photo credits: “Currywurst mit Pommes” by Jessica Spengler and “lecker war’s” by Mike Herbst on Flickr.

More Related Content

What's hot

Using Flexbox Today (Frontier Conf 2016)
Using Flexbox Today (Frontier Conf 2016)Using Flexbox Today (Frontier Conf 2016)
Using Flexbox Today (Frontier Conf 2016)Zoe Gillenwater
 
Leveling Up With Flexbox (Smart Web Conference)
Leveling Up With Flexbox (Smart Web Conference)Leveling Up With Flexbox (Smart Web Conference)
Leveling Up With Flexbox (Smart Web Conference)Zoe Gillenwater
 
Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)
Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)
Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)Stephen Hay
 
Flexbox and Grid Layout: How you will structure layouts tomorrow.
Flexbox and Grid Layout: How you will structure layouts tomorrow.Flexbox and Grid Layout: How you will structure layouts tomorrow.
Flexbox and Grid Layout: How you will structure layouts tomorrow.Diego Eis
 
Understanding flex box CSS Day 2016
Understanding flex box CSS Day 2016Understanding flex box CSS Day 2016
Understanding flex box CSS Day 2016Davide Di Pumpo
 
Ridiculously Easy Layouts with Flexbox
Ridiculously Easy Layouts with FlexboxRidiculously Easy Layouts with Flexbox
Ridiculously Easy Layouts with FlexboxEric Carlisle
 
Flexbox Will Shock You!
Flexbox Will Shock You!Flexbox Will Shock You!
Flexbox Will Shock You!Scott Vandehey
 

What's hot (9)

Using Flexbox Today (Frontier Conf 2016)
Using Flexbox Today (Frontier Conf 2016)Using Flexbox Today (Frontier Conf 2016)
Using Flexbox Today (Frontier Conf 2016)
 
Leveling Up With Flexbox (Smart Web Conference)
Leveling Up With Flexbox (Smart Web Conference)Leveling Up With Flexbox (Smart Web Conference)
Leveling Up With Flexbox (Smart Web Conference)
 
Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)
Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)
Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)
 
The Power of CSS Flexbox
The Power of CSS FlexboxThe Power of CSS Flexbox
The Power of CSS Flexbox
 
Flexbox and Grid Layout: How you will structure layouts tomorrow.
Flexbox and Grid Layout: How you will structure layouts tomorrow.Flexbox and Grid Layout: How you will structure layouts tomorrow.
Flexbox and Grid Layout: How you will structure layouts tomorrow.
 
Understanding flex box CSS Day 2016
Understanding flex box CSS Day 2016Understanding flex box CSS Day 2016
Understanding flex box CSS Day 2016
 
CSS3 Layout
CSS3 LayoutCSS3 Layout
CSS3 Layout
 
Ridiculously Easy Layouts with Flexbox
Ridiculously Easy Layouts with FlexboxRidiculously Easy Layouts with Flexbox
Ridiculously Easy Layouts with Flexbox
 
Flexbox Will Shock You!
Flexbox Will Shock You!Flexbox Will Shock You!
Flexbox Will Shock You!
 

Viewers also liked

Intro to Flexbox - A Magical CSS Property
Intro to Flexbox - A Magical CSS PropertyIntro to Flexbox - A Magical CSS Property
Intro to Flexbox - A Magical CSS PropertyAdam Soucie
 
Flexbox and Grid Layout
Flexbox and Grid LayoutFlexbox and Grid Layout
Flexbox and Grid LayoutRachel Andrew
 
CSS Grid Layout: An Event Apart Boston 2016
CSS Grid Layout: An Event Apart Boston 2016CSS Grid Layout: An Event Apart Boston 2016
CSS Grid Layout: An Event Apart Boston 2016Rachel Andrew
 
FLEXBOX-MEN: Apocalypse
FLEXBOX-MEN: ApocalypseFLEXBOX-MEN: Apocalypse
FLEXBOX-MEN: ApocalypseFuminori Mori
 
Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)
Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)
Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)Stephen Hay
 
Creating a Simple, Accessible On/Off Switch
Creating a Simple, Accessible On/Off SwitchCreating a Simple, Accessible On/Off Switch
Creating a Simple, Accessible On/Off SwitchRuss Weakley
 
Введение в веб-проектирование
Введение в веб-проектированиеВведение в веб-проектирование
Введение в веб-проектированиеMaryia Davidouskaia
 
Uwe usability evaluation
Uwe usability evaluationUwe usability evaluation
Uwe usability evaluationLon Barfield
 
решение основной проблемы Agile (scrum) проектов в контексте ba
решение основной проблемы Agile (scrum) проектов в контексте baрешение основной проблемы Agile (scrum) проектов в контексте ba
решение основной проблемы Agile (scrum) проектов в контексте baISsoft
 
6. таблицы и другие теги html
6. таблицы и другие теги html6. таблицы и другие теги html
6. таблицы и другие теги htmlSergei Dubrov
 
CSS Lessons Learned the Hard Way (ConvergeSE)
CSS Lessons Learned the Hard Way (ConvergeSE)CSS Lessons Learned the Hard Way (ConvergeSE)
CSS Lessons Learned the Hard Way (ConvergeSE)Zoe Gillenwater
 
CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)Zoe Gillenwater
 
Show vs. Tell in UX Design (Front in Amsterdam)
Show vs. Tell in UX Design (Front in Amsterdam)Show vs. Tell in UX Design (Front in Amsterdam)
Show vs. Tell in UX Design (Front in Amsterdam)Zoe Gillenwater
 
Organisation and navigation
Organisation and navigationOrganisation and navigation
Organisation and navigationLon Barfield
 
Joomla Request To Response
Joomla Request To ResponseJoomla Request To Response
Joomla Request To ResponseAmit Kumar Singh
 
17. основы css (cascading style sheets)
17. основы css (cascading style sheets)17. основы css (cascading style sheets)
17. основы css (cascading style sheets)Sergei Dubrov
 

Viewers also liked (19)

CSS: Flexbox & Grid
CSS: Flexbox & GridCSS: Flexbox & Grid
CSS: Flexbox & Grid
 
Intro to Flexbox - A Magical CSS Property
Intro to Flexbox - A Magical CSS PropertyIntro to Flexbox - A Magical CSS Property
Intro to Flexbox - A Magical CSS Property
 
Flexbox and Grid Layout
Flexbox and Grid LayoutFlexbox and Grid Layout
Flexbox and Grid Layout
 
CSS Grid Layout: An Event Apart Boston 2016
CSS Grid Layout: An Event Apart Boston 2016CSS Grid Layout: An Event Apart Boston 2016
CSS Grid Layout: An Event Apart Boston 2016
 
Lightning fast sass
Lightning fast sassLightning fast sass
Lightning fast sass
 
FLEXBOX-MEN: Apocalypse
FLEXBOX-MEN: ApocalypseFLEXBOX-MEN: Apocalypse
FLEXBOX-MEN: Apocalypse
 
Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)
Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)
Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)
 
Creating a Simple, Accessible On/Off Switch
Creating a Simple, Accessible On/Off SwitchCreating a Simple, Accessible On/Off Switch
Creating a Simple, Accessible On/Off Switch
 
Введение в веб-проектирование
Введение в веб-проектированиеВведение в веб-проектирование
Введение в веб-проектирование
 
Uwe usability evaluation
Uwe usability evaluationUwe usability evaluation
Uwe usability evaluation
 
решение основной проблемы Agile (scrum) проектов в контексте ba
решение основной проблемы Agile (scrum) проектов в контексте baрешение основной проблемы Agile (scrum) проектов в контексте ba
решение основной проблемы Agile (scrum) проектов в контексте ba
 
6. таблицы и другие теги html
6. таблицы и другие теги html6. таблицы и другие теги html
6. таблицы и другие теги html
 
CSS Lessons Learned the Hard Way (ConvergeSE)
CSS Lessons Learned the Hard Way (ConvergeSE)CSS Lessons Learned the Hard Way (ConvergeSE)
CSS Lessons Learned the Hard Way (ConvergeSE)
 
CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)
 
Show vs. Tell in UX Design (Front in Amsterdam)
Show vs. Tell in UX Design (Front in Amsterdam)Show vs. Tell in UX Design (Front in Amsterdam)
Show vs. Tell in UX Design (Front in Amsterdam)
 
Organisation and navigation
Organisation and navigationOrganisation and navigation
Organisation and navigation
 
Joomla Request To Response
Joomla Request To ResponseJoomla Request To Response
Joomla Request To Response
 
17. основы css (cascading style sheets)
17. основы css (cascading style sheets)17. основы css (cascading style sheets)
17. основы css (cascading style sheets)
 
How Joomla Works
How Joomla WorksHow Joomla Works
How Joomla Works
 

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

Putting Flexbox into Practice
Putting Flexbox into PracticePutting Flexbox into Practice
Putting Flexbox into PracticeZoe Gillenwater
 
Putting Flexbox into Practice (Fronteers)
Putting Flexbox into Practice (Fronteers)Putting Flexbox into Practice (Fronteers)
Putting Flexbox into Practice (Fronteers)Zoe Gillenwater
 
Flexbox every developers dream
Flexbox every developers dreamFlexbox every developers dream
Flexbox every developers dream2019gracesmith
 
CSS3 notes
CSS3 notesCSS3 notes
CSS3 notesRex Wang
 
Css Positioning Elements
Css Positioning ElementsCss Positioning Elements
Css Positioning Elementssanjay2211
 
Create formsexcel
Create formsexcelCreate formsexcel
Create formsexcelRavi Gajul
 
Access tips access and sql part 5 more instant queries 1
Access tips  access and sql part 5  more instant queries 1Access tips  access and sql part 5  more instant queries 1
Access tips access and sql part 5 more instant queries 1quest2900
 
CSS Conf Budapest - New CSS Layout
CSS Conf Budapest - New CSS LayoutCSS Conf Budapest - New CSS Layout
CSS Conf Budapest - New CSS LayoutRachel Andrew
 
The Right Layout Tool for the Job
The Right Layout Tool for the JobThe Right Layout Tool for the Job
The Right Layout Tool for the JobRachel Andrew
 
The New CSS Layout - dotCSS
The New CSS Layout - dotCSSThe New CSS Layout - dotCSS
The New CSS Layout - dotCSSRachel Andrew
 
Controls Use in Windows Presentation Foundation (WPF)
Controls Use in Windows Presentation Foundation (WPF)Controls Use in Windows Presentation Foundation (WPF)
Controls Use in Windows Presentation Foundation (WPF)iFour Technolab Pvt. Ltd.
 
Is Flexbox the Future of Layout?
Is Flexbox the Future of Layout?Is Flexbox the Future of Layout?
Is Flexbox the Future of Layout?jameswillweb
 
UI Review - TexPlanner
UI Review - TexPlannerUI Review - TexPlanner
UI Review - TexPlannerVinay Mohanty
 
Deep Dive into Line-Height
Deep Dive into Line-HeightDeep Dive into Line-Height
Deep Dive into Line-HeightRuss Weakley
 

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

Putting Flexbox into Practice
Putting Flexbox into PracticePutting Flexbox into Practice
Putting Flexbox into Practice
 
Putting Flexbox into Practice (Fronteers)
Putting Flexbox into Practice (Fronteers)Putting Flexbox into Practice (Fronteers)
Putting Flexbox into Practice (Fronteers)
 
Flexbox every developers dream
Flexbox every developers dreamFlexbox every developers dream
Flexbox every developers dream
 
A complete guide to flexbox
A complete guide to flexboxA complete guide to flexbox
A complete guide to flexbox
 
Web Layout
Web LayoutWeb Layout
Web Layout
 
CSS3 notes
CSS3 notesCSS3 notes
CSS3 notes
 
CSS for Beginners
CSS for BeginnersCSS for Beginners
CSS for Beginners
 
card flip
card flip card flip
card flip
 
Css Positioning Elements
Css Positioning ElementsCss Positioning Elements
Css Positioning Elements
 
Create formsexcel
Create formsexcelCreate formsexcel
Create formsexcel
 
Access tips access and sql part 5 more instant queries 1
Access tips  access and sql part 5  more instant queries 1Access tips  access and sql part 5  more instant queries 1
Access tips access and sql part 5 more instant queries 1
 
CSS Conf Budapest - New CSS Layout
CSS Conf Budapest - New CSS LayoutCSS Conf Budapest - New CSS Layout
CSS Conf Budapest - New CSS Layout
 
The Right Layout Tool for the Job
The Right Layout Tool for the JobThe Right Layout Tool for the Job
The Right Layout Tool for the Job
 
The New CSS Layout - dotCSS
The New CSS Layout - dotCSSThe New CSS Layout - dotCSS
The New CSS Layout - dotCSS
 
Controls Use in Windows Presentation Foundation (WPF)
Controls Use in Windows Presentation Foundation (WPF)Controls Use in Windows Presentation Foundation (WPF)
Controls Use in Windows Presentation Foundation (WPF)
 
Is Flexbox the Future of Layout?
Is Flexbox the Future of Layout?Is Flexbox the Future of Layout?
Is Flexbox the Future of Layout?
 
UI Review - TexPlanner
UI Review - TexPlannerUI Review - TexPlanner
UI Review - TexPlanner
 
Spreadsheets 101
Spreadsheets 101Spreadsheets 101
Spreadsheets 101
 
Deep Dive into Line-Height
Deep Dive into Line-HeightDeep Dive into Line-Height
Deep Dive into Line-Height
 
Css class-02
Css class-02Css class-02
Css class-02
 

More from Zoe Gillenwater

CSS Lessons Learned the Hard Way (Beyond Tellerand)
CSS Lessons Learned the Hard Way (Beyond Tellerand)CSS Lessons Learned the Hard Way (Beyond Tellerand)
CSS Lessons Learned the Hard Way (Beyond Tellerand)Zoe Gillenwater
 
Just One (CSS Dev Conference keynote)
Just One (CSS Dev Conference keynote)Just One (CSS Dev Conference keynote)
Just One (CSS Dev Conference keynote)Zoe Gillenwater
 
Building Responsive Layouts
Building Responsive LayoutsBuilding Responsive Layouts
Building Responsive LayoutsZoe Gillenwater
 
The Future of CSS Layout
The Future of CSS LayoutThe Future of CSS Layout
The Future of CSS LayoutZoe Gillenwater
 
Building Responsive Layouts
Building Responsive LayoutsBuilding Responsive Layouts
Building Responsive LayoutsZoe Gillenwater
 
CSS3, Media Queries, and Responsive Design
CSS3, Media Queries, and Responsive DesignCSS3, Media Queries, and Responsive Design
CSS3, Media Queries, and Responsive DesignZoe Gillenwater
 
CSS3: Using media queries to improve the web site experience
CSS3: Using media queries to improve the web site experienceCSS3: Using media queries to improve the web site experience
CSS3: Using media queries to improve the web site experienceZoe Gillenwater
 
Designing with CSS3 Effectively & Efficiently
Designing with CSS3 Effectively & EfficientlyDesigning with CSS3 Effectively & Efficiently
Designing with CSS3 Effectively & EfficientlyZoe Gillenwater
 
Effective and Efficient Design with CSS3
Effective and Efficient Design with CSS3Effective and Efficient Design with CSS3
Effective and Efficient Design with CSS3Zoe Gillenwater
 
Highly Maintainable, Efficient, and Optimized CSS
Highly Maintainable, Efficient, and Optimized CSSHighly Maintainable, Efficient, and Optimized CSS
Highly Maintainable, Efficient, and Optimized CSSZoe Gillenwater
 
Designing CSS Layouts for the Flexible Web
Designing CSS Layouts for the Flexible WebDesigning CSS Layouts for the Flexible Web
Designing CSS Layouts for the Flexible WebZoe Gillenwater
 

More from Zoe Gillenwater (13)

CSS Lessons Learned the Hard Way (Beyond Tellerand)
CSS Lessons Learned the Hard Way (Beyond Tellerand)CSS Lessons Learned the Hard Way (Beyond Tellerand)
CSS Lessons Learned the Hard Way (Beyond Tellerand)
 
Just One (CSS Dev Conference keynote)
Just One (CSS Dev Conference keynote)Just One (CSS Dev Conference keynote)
Just One (CSS Dev Conference keynote)
 
Building Responsive Layouts
Building Responsive LayoutsBuilding Responsive Layouts
Building Responsive Layouts
 
The Future of CSS Layout
The Future of CSS LayoutThe Future of CSS Layout
The Future of CSS Layout
 
Building Responsive Layouts
Building Responsive LayoutsBuilding Responsive Layouts
Building Responsive Layouts
 
CSS3, Media Queries, and Responsive Design
CSS3, Media Queries, and Responsive DesignCSS3, Media Queries, and Responsive Design
CSS3, Media Queries, and Responsive Design
 
CSS3: Using media queries to improve the web site experience
CSS3: Using media queries to improve the web site experienceCSS3: Using media queries to improve the web site experience
CSS3: Using media queries to improve the web site experience
 
Web Accessibility
Web AccessibilityWeb Accessibility
Web Accessibility
 
Real-world CSS3
Real-world CSS3Real-world CSS3
Real-world CSS3
 
Designing with CSS3 Effectively & Efficiently
Designing with CSS3 Effectively & EfficientlyDesigning with CSS3 Effectively & Efficiently
Designing with CSS3 Effectively & Efficiently
 
Effective and Efficient Design with CSS3
Effective and Efficient Design with CSS3Effective and Efficient Design with CSS3
Effective and Efficient Design with CSS3
 
Highly Maintainable, Efficient, and Optimized CSS
Highly Maintainable, Efficient, and Optimized CSSHighly Maintainable, Efficient, and Optimized CSS
Highly Maintainable, Efficient, and Optimized CSS
 
Designing CSS Layouts for the Flexible Web
Designing CSS Layouts for the Flexible WebDesigning CSS Layouts for the Flexible Web
Designing CSS Layouts for the Flexible Web
 

Recently uploaded

The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsPixlogix Infotech
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfLoriGlavin3
 
Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rick Flair
 
Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfConnecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfNeo4j
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxLoriGlavin3
 
Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsPotential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsRavi Sanghani
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Farhan Tariq
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxLoriGlavin3
 
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityDecarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityIES VE
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteDianaGray10
 
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...panagenda
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxLoriGlavin3
 
Time Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsTime Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsNathaniel Shimoni
 
Scale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterScale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterMydbops
 
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Mark Goldstein
 
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxLoriGlavin3
 
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersGenerative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersRaghuram Pandurangan
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfIngrid Airi González
 
Sample pptx for embedding into website for demo
Sample pptx for embedding into website for demoSample pptx for embedding into website for demo
Sample pptx for embedding into website for demoHarshalMandlekar2
 

Recently uploaded (20)

The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and Cons
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdf
 
Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...
 
Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfConnecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdf
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
 
Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsPotential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and Insights
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptx
 
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityDecarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a reality
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test Suite
 
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
 
Time Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsTime Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directions
 
Scale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterScale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL Router
 
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
 
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
 
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersGenerative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information Developers
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdf
 
Sample pptx for embedding into website for demo
Sample pptx for embedding into website for demoSample pptx for embedding into website for demo
Sample pptx for embedding into website for demo
 

Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)

  • 1. Flexbox Zoe Mickley Gillenwater @zomigiCSS Conf EU September 2015 Enhancing WITH Responsiveness
  • 3.
  • 4.
  • 5.
  • 7. Content extremes on Booking.com Shortest property name: 2 characters Longest property name: 109 characters
  • 8. How big do I make this thing?
  • 10. Relative units of measurement are your best guess at the ideal, but they’re still a guess.
  • 11. Flexbox gets us closer to the ideal, because it lets us design without units.
  • 12. Example: a responsive form from http://jobs.theguardian.com/
  • 13. My copy of that form Same floats, same percentage widths
  • 14. 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
  • 15. 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
  • 16. Form fields are a pain in the butt The fields and button don’t all match each other exactly in height
  • 17. 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
  • 20. Automatic breakpoint with flexbox Booking’s responsive customer service form doesn’t use any media queries http://www.booking.com/content/cs.html
  • 21. 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
  • 22. Layout change without media query 1.  Let the fields wrap when needed: form.cs-message { display: flex; flex-direction: row; flex-wrap: wrap; margin-right: -10px; } /* default */
  • 23. Layout change without media query 2.  Size the fields to control their wrapping point: input.cs-message__text { flex: 1 0 40%; width: 43%; /* fallback */ float: left; /* fallback */ margin-right: 10px; padding: 8px 10px; }
  • 24. Defining the flex property Makes flex items change their main size (width or height) to fit available space
  • 25. 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)
  • 26. Breaking down the flex property input.cs-message__text { flex: 1 0 40%; width: 43%; float: left; margin-right: 10px; padding: 8px 10px; } flex-basis = 40% start field 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
  • 27. In other words… input.cs-message__text { 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 fill its line Enough space for 2 per line, which both stretch equally as needed to fill
  • 28. 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?
  • 29. Taking advantage of variable space Problem: the gap is not always big enough to hold a sentence of text
  • 30. Taking advantage of variable space Solution: use flexbox to place text beside price when space allows; otherwise, it can wrap below price
  • 31. Taking advantage of variable space Non-flexbox Flexbox enhanced
  • 33. 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
  • 34. Improved wrapping in RWD layout 34 flex: 1 1 auto align-content: space-between
  • 35. Improved wrapping in RWD layout With float or text-align With flex or justify-content
  • 36. Flexbox is great for aligning stuff, especially shifting content in RWD.
  • 37. Demo: full-width nav bar ¨  All links on same line ¨  First link flush left, last link flush right ¨  Equal spaces between all links
  • 38. Trying display:table-cell J All links on same line J First link flush left, last link flush right L Equal spaces between all links
  • 40. Starter centered nav bar 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; } .list-nav li:first-child { padding-left: 0; } .list-nav li:last-child { padding-right: 0; }
  • 41. Enhanced to be full-width .list-nav { display: flex; justify-content: space-between; 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; }
  • 43. Improve the wide layout Wide: too stretched out A more responsive enhancement
  • 44. 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:
  • 45. Add Modernizr as needed with flexbox Flexbox and fallback styles can often co- exist, but sometimes need to isolate them http://zomigi.com/blog/using-modernizr-with-flexbox/
  • 46. 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
  • 47. Wide variation: two-piece main nav 3.  Move nav bar up to overlap logo’s line: @media (min-width:860px) { .flexbox .list-nav { position: relative; top: -70px; } }
  • 48. Wide variation: two-piece main nav 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)
  • 49. A more responsive nav bar
  • 51. Demo: full-height stacked icons .wrapper .icons .content
  • 52. Demo: full-height stacked icons 1.  Turn children .icons and .content into side-by-side, equal-height flex items .wrapper { display: flex; align-items: stretch; /* default */ }
  • 53. 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)
  • 54. Demo: full-height stacked icons 2.  Turn .icons into flex container with vertically stacked children (the 3 icons): .icons { display: flex; flex-direction: column; /* main axis */ }
  • 55. Demo: full-height stacked icons 3.  Equally space the 3 icons along the vertical main axis: .icons { display: flex; flex-direction: column; justify-content: space-between; }
  • 57. Fallback alignment options Top-aligned (float) Centered (table-cell)
  • 58. These examples don’t look wrong or broken without flexbox. Flexbox just enhances their sizing and spacing to look better.
  • 59. Flexbox can also enhance visual ordering.
  • 60. 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
  • 61. order integer to specify flow order of flex 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
  • 62. 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)
  • 63. Use order property to move logo 2.  Split extra space on line to center logo: .logo { margin-left: auto; } .link-party { margin-left: auto; }
  • 64. 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>
  • 65. Reorder for good, not evil.
  • 66. Demo: moving a photo on mobile
  • 67. Demo: moving a photo on mobile Desktop: HTML order (no flexbox)Mobile: reordered
  • 68. Use flexbox 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-flexbox-for-better-css-patterns--cms-19449
  • 69. Turn off flexbox in desktop styles @media screen and (min-width:800px) { .recipe { display: block; /* turn off flexbox */ } .recipe figure { float: right; width: 55%; } }
  • 70. Demo: moving a photo on mobile Flexbox enhanced Non-flexbox
  • 71. Reordering on The Guardian 12 3 4 56 flex-direction: row-reverse flex-direction: row-reverse 1 2 3 4 5 6
  • 72. Flexbox requires a mental shift in how you think about and approach layout.
  • 73. RWD is not binary. Responsiveness is a continuum. Flexbox can help make your site more responsive.
  • 74. Flexbox is not all nothing or
  • 75. Thanks! Zoe Mickley Gillenwater @zomigi design@zomigi.com zomigi.com | stunningcss3.com | flexiblewebbook.com Photo credits: “Currywurst mit Pommes” by Jessica Spengler and “lecker war’s” by Mike Herbst on Flickr.