SlideShare a Scribd company logo
Flexbox 
Zoe Mickley Gillenwater @zomigiSmashingConf
March 2015
Enhancing
WITH
Responsiveness
I used to make fixed-width sites…
2
…with tables
3
I even wrote a
book about it
in 2008.
Then I got into CSS “liquid” layout
4
Problems with CSS 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 these 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 now
8
“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 binary
12
Flexbox and RWD
Make better use of the space
at all screen sizes
Reorder content at different
screen sizes
13
Space
Placement
Making better use of space
14
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
Demo: horizontal navigation
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
Demo: horizontal navigation
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
J All links on same line
J First link flush left, last link flush right
L Equal spaces between all links
19
Spacing with table-layout:fixed
20
Nav with flexbox
.list-nav {
display: flex;
justify-content: space-between;
margin: 0;
padding: 0;
list-style: none;
}
.list-nav li {
text-align: center;
}
21
justify-content
22
aligns flex items along
main axis
space-around
flex-end
center
flex-start
(default)
space-between
Combine with inline-block
.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; }
23
Combine with inline-block
Non-flexbox
fallback version
Flexbox version
24
Wide variation: two-piece main nav
1.  Add media query for wide width:
@media (min-width:860px) {
}
2.  Add link to Modernizr, because we’re going
to need to feed styles to only flexbox
browsers in this case
25
Add Modernizr as needed
¨  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
26
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;
}
}
27
Wide variation: two-piece main nav
4.  Stop distributing links across full width:
@media (min-width:860px) {
.flexbox .list-nav {
justify-content: flex-start;
position: relative;
top: -70px;
}
}
28
Wide variation: two-piece main nav
5.  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
A more responsive nav bar
30
Content blocks’ height varies in RWD,
and flexbox can also help you make
better use of varying vertical space
This works vertically too
31
Demo: full-height stacked icons
.wrapper
.icons
.content
32
Demo: full-height stacked icons
1.  Turn .wrapper into flex container:
.wrapper {
display: flex;
align-items: stretch; /* default */
}
2.  Children .icons and .content become
side-by-side, equal-height flex items
33
align-items
34
aligns flex items in
cross axis
flex-start
 flex-end
center
 baseline
stretch
(default)
foo	
   foo	
   foo	
  
Demo: full-height stacked icons
3.  Turn .icons into flex container with
vertically stacked children (the 3 icons):
.icons {
display: flex;
flex-direction: column;
}
35
Demo: full-height stacked icons
4.  Equally space the 3 icons along the vertical
main axis:
.icons {
display: flex;
flex-direction: column;
justify-content: space-between;
}
36
Demo: full-height stacked icons
37
Combine with table-cell
.wrapper {
display: table; /* fallback */
display: flex;
}
.icons {
display: table-cell; /* fallback */
vertical-align: middle; /* fallback */
display: flex;
flex-direction: column;
justify-content: space-between;
}
.content {
display: table-cell; /* fallback */
vertical-align: top; /* fallback */
flex: 1 0 0px;
}
38
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;
flex-direction: column;
justify-content: space-between;
}
.content {
flex: 1 0 0px;
}
.no-flexbox .content {
margin-left: 60px; /* fallback */
}
39
Fallback alignment options
40
Top-aligned (float) Centered (table-cell)
Combining units of measurement across
a line can make RWD tricky.
ems + % + px + [blank] = ???
41
Demo: responsive form
42
Inspired by http://jobs.theguardian.com/,
which uses floats and percentage widths
But it would be nicer if…
43
¨  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 with flexbox
44
1.  Let the fields wrap when needed:
.jobs-form {
display: flex;
flex-wrap: wrap;
}
Enhance with flexbox
45
2.  Override the % widths and use flex instead:
/* hide from non-flex browsers */
.flexbox .jobs-form_field-wrapper {
width: auto; 
flex: 1 1 100%;
}
Enhance with flexbox
46
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
47
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)
48
Breaking down the flex property
49
@media (min-width:40em) {
.jobs-form_keywords,
.jobs-form_location {
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
Breaking down the flex property
50
@media (min-width:40em) {
.jobs-form_keywords,
.jobs-form_location {
flex: 1 1 auto;
}
.jobs-form_distance,
.jobs-form_submit {
flex: 0 0 auto;
}
}
flex-shrink = 1
it’s ok to shrink
smaller than the
starting width if
there’s not enough
space
flex-shrink = 0
don’t shrink
smaller than
starting width
Breaking down the flex property
51
@media (min-width:40em) {
.jobs-form_keywords,
.jobs-form_location {
flex: 1 1 auto;
}
.jobs-form_distance,
.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...
52
@media (min-width:40em) {

.jobs-form_keywords,
.jobs-form_location {
flex: 1 1 auto;
}

.jobs-form_distance,
.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 far
53
flex-basis: 100%
flex-basis: auto
Enhance with flexbox
54
4.  Refine keywords field’s flex-basis values
to improve the layout:
@media (min-width:40em) {
.jobs-form_keywords { flex: 1 1 100%; }
.jobs-form_location { flex: 1 1 auto; }
.jobs-form_distance,
.jobs-form_submit { flex: 0 0 auto; }
}
@media (min-width:50em) {
.jobs-form_keywords { flex-basis: auto; }
}
Enhance with flexbox
55
5.  Turn each field wrapper into flex container:
.flexbox .jobs-form_field-wrapper {
display: flex; /* sets align-items:stretch */
width: auto;
flex: 1 1 100%;
}
6.  Input/button inside stretches to match
height of its line, thanks to default align-
items:stretch on flex containers, so all
fields are equal height on their line
Smarter sizing
56
Non-flexbox
Flexbox enhanced
Content-driven breakpoints
aren’t perfect.
Automatic orientation switch
.cs-message__text {
flex: 1 0 40%;
width: 43%;
float: left;
margin-right: 10px;
}
One rule creates
two responsive
layouts, both
always full width
58
The form without flexbox
Narrow: inputs stack Wide: not quite full-width
see?
59
Demo: responsive article header
¨  No media query
¨  display: block
¨  50em media query
¨  display: table-cell
60
Narrow starting styles Wide starting styles
Enhance with flexbox
61








.article-header
.article-header-image
.article-header-text
Enhance with flexbox
62
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;
padding: 0 0 20px 20px;
}
Enhance with flexbox
63
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;
padding: 0 0 20px 20px;
}
.article-title {
flex: 1 1 100%;
}
.article-category {
flex: 1 1 auto;
}
Demo: responsive article header
64
flex: 1 1 auto
align-content:
space-between
Improved wrapping
65
With float or text-align With flex or justify-content
A real-world wrapping example
Without flexbox (IE 9) With flexbox (Chrome)
66
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;
}
67
Reordering content
68
Remember this?
69
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 */
}
70
Use order property to move logo
2.  Split extra space on line to center logo:
.logo {

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

margin-left: auto;
}
71
Order only works on siblings
72
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.
73
If you’re using it for progressive
enhancement, the content should make
sense in both the HTML and visual order.
Use the order property sparingly
74
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
75
Demo: moving a photo on mobile
Desktop: HTML order (no flexbox)Mobile: reordered
76
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
77
Turn off flexbox in desktop styles
@media screen and (min-width:800px) {
.recipe {
display: block; /* turn off flexbox */
}
.recipe figure {
float: right;
width: 55%;
}
}
78
Demo: moving a photo on mobile
Flexbox version Non-flexbox version
79
The Guardian: opposite approach
80
Stacking order you
see when narrow
is the HTML order,
unchanged
1
2
3
4
5
6
The Guardian: opposite approach
81
Reordered when
wide, but not using
order
 12 3
4 56
flex-direction: row-reverse
flex-direction: row-reverse
Using flexbox today
82
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+
*
83
I recommend you skip the ‘09 syntax
84
¨  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/
master/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/
85
Adding Modernizr classes with Sass
86
@mixin supports-flexbox($support) {

@if $support == yes {

 
.flexbox & { @content }

}

@if $support == no {

 
.no-flexbox & { @content }

}
}
Adding Modernizr classes with Sass
87
.container {
display: flex;
}
.sidebar {
float: left;
width: 300px;
}
.main-content {
margin-left: 320px;

@include supports-flexbox(yes) {
margin-left: 20px;
}
}
Adding Modernizr classes with Sass
88
.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
89
Flexbox will override: Flexbox will not override:
No single right/best answer. Use whatever
you normally would.
Flexbox is not
ALL
 or NOTHING
Learn more
91
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.

More Related Content

What's hot

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
 
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
 
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
 
The Power of CSS Flexbox
The Power of CSS FlexboxThe Power of CSS Flexbox
The Power of CSS Flexbox
freshlybakedpixels
 
CSS3 Layout
CSS3 LayoutCSS3 Layout
CSS3 Layout
Zoe Gillenwater
 
Ridiculously Easy Layouts with Flexbox
Ridiculously Easy Layouts with FlexboxRidiculously Easy Layouts with Flexbox
Ridiculously Easy Layouts with Flexbox
Eric Carlisle
 
Flexbox Will Shock You!
Flexbox Will Shock You!Flexbox Will Shock You!
Flexbox Will Shock You!
Scott Vandehey
 

What's hot (7)

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)
 
Using Flexbox Today (Frontier Conf 2016)
Using Flexbox Today (Frontier Conf 2016)Using Flexbox Today (Frontier Conf 2016)
Using Flexbox Today (Frontier Conf 2016)
 
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
 
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

Putting Flexbox into Practice
Putting Flexbox into PracticePutting Flexbox into Practice
Putting Flexbox into Practice
Zoe Gillenwater
 
Culture Work: Organizational Becoming Made Practical
Culture Work: Organizational Becoming Made PracticalCulture Work: Organizational Becoming Made Practical
Culture Work: Organizational Becoming Made Practical
Marc Rettig
 
Images and Tables in HTML
Images and Tables in HTMLImages and Tables in HTML
Images and Tables in HTML
Aarti P
 
Верстка_Лекция1
Верстка_Лекция1Верстка_Лекция1
Верстка_Лекция1itc73
 
Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"
Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"
Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"Yandex
 
17. основы css (cascading style sheets)
17. основы css (cascading style sheets)17. основы css (cascading style sheets)
17. основы css (cascading style sheets)
Sergei Dubrov
 
Таблицы Html
Таблицы HtmlТаблицы Html
Таблицы Html
Vasya Petrov
 
Custom Post Type and Taxonomies in WordPress 3.x
Custom Post Type and Taxonomies in WordPress 3.xCustom Post Type and Taxonomies in WordPress 3.x
Custom Post Type and Taxonomies in WordPress 3.x
Amit Kumar Singh
 
Getting Started With Php Frameworks @BCP5
Getting Started With Php Frameworks @BCP5Getting Started With Php Frameworks @BCP5
Getting Started With Php Frameworks @BCP5
Amit Kumar Singh
 
Пингвины из калининграда
Пингвины из калининградаПингвины из калининграда
Пингвины из калининграда
Andrew Yashenko
 
Organisation and navigation
Organisation and navigationOrganisation and navigation
Organisation and navigation
Lon Barfield
 
Box Model
Box ModelBox Model
Box Model
Amit Kumar Singh
 
Joomla Request To Response
Joomla Request To ResponseJoomla Request To Response
Joomla Request To Response
Amit Kumar Singh
 
Bdd and dsl как способ построения коммуникации на проекте
Bdd and dsl как способ построения коммуникации на проектеBdd and dsl как способ построения коммуникации на проекте
Bdd and dsl как способ построения коммуникации на проекте
ISsoft
 
Css part2
Css part2Css part2
Css part2ISsoft
 
решение основной проблемы Agile (scrum) проектов в контексте ba
решение основной проблемы Agile (scrum) проектов в контексте baрешение основной проблемы Agile (scrum) проектов в контексте ba
решение основной проблемы Agile (scrum) проектов в контексте baISsoft
 
How Joomla Works
How Joomla WorksHow Joomla Works
How Joomla Works
Amit Kumar Singh
 
FL Blog Con 2015: How To Find The Best WordPress Plugins For You
FL Blog Con 2015: How To Find The Best WordPress Plugins For YouFL Blog Con 2015: How To Find The Best WordPress Plugins For You
FL Blog Con 2015: How To Find The Best WordPress Plugins For You
Adam Soucie
 
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
 
Тестирование требований
Тестирование требованийТестирование требований
Тестирование требованийISsoft
 

Viewers also liked (20)

Putting Flexbox into Practice
Putting Flexbox into PracticePutting Flexbox into Practice
Putting Flexbox into Practice
 
Culture Work: Organizational Becoming Made Practical
Culture Work: Organizational Becoming Made PracticalCulture Work: Organizational Becoming Made Practical
Culture Work: Organizational Becoming Made Practical
 
Images and Tables in HTML
Images and Tables in HTMLImages and Tables in HTML
Images and Tables in HTML
 
Верстка_Лекция1
Верстка_Лекция1Верстка_Лекция1
Верстка_Лекция1
 
Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"
Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"
Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"
 
17. основы css (cascading style sheets)
17. основы css (cascading style sheets)17. основы css (cascading style sheets)
17. основы css (cascading style sheets)
 
Таблицы Html
Таблицы HtmlТаблицы Html
Таблицы Html
 
Custom Post Type and Taxonomies in WordPress 3.x
Custom Post Type and Taxonomies in WordPress 3.xCustom Post Type and Taxonomies in WordPress 3.x
Custom Post Type and Taxonomies in WordPress 3.x
 
Getting Started With Php Frameworks @BCP5
Getting Started With Php Frameworks @BCP5Getting Started With Php Frameworks @BCP5
Getting Started With Php Frameworks @BCP5
 
Пингвины из калининграда
Пингвины из калининградаПингвины из калининграда
Пингвины из калининграда
 
Organisation and navigation
Organisation and navigationOrganisation and navigation
Organisation and navigation
 
Box Model
Box ModelBox Model
Box Model
 
Joomla Request To Response
Joomla Request To ResponseJoomla Request To Response
Joomla Request To Response
 
Bdd and dsl как способ построения коммуникации на проекте
Bdd and dsl как способ построения коммуникации на проектеBdd and dsl как способ построения коммуникации на проекте
Bdd and dsl как способ построения коммуникации на проекте
 
Css part2
Css part2Css part2
Css part2
 
решение основной проблемы Agile (scrum) проектов в контексте ba
решение основной проблемы Agile (scrum) проектов в контексте baрешение основной проблемы Agile (scrum) проектов в контексте ba
решение основной проблемы Agile (scrum) проектов в контексте ba
 
How Joomla Works
How Joomla WorksHow Joomla Works
How Joomla Works
 
FL Blog Con 2015: How To Find The Best WordPress Plugins For You
FL Blog Con 2015: How To Find The Best WordPress Plugins For YouFL Blog Con 2015: How To Find The Best WordPress Plugins For You
FL Blog Con 2015: How To Find The Best WordPress Plugins For You
 
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)
 
Тестирование требований
Тестирование требованийТестирование требований
Тестирование требований
 

Similar to Enhancing Responsiveness With Flexbox (Smashing Conference)

Putting Flexbox into Practice (Fronteers)
Putting Flexbox into Practice (Fronteers)Putting Flexbox into Practice (Fronteers)
Putting Flexbox into Practice (Fronteers)
Zoe Gillenwater
 
A complete guide to flexbox
A complete guide to flexboxA complete guide to flexbox
A complete guide to flexbox
Bytes Technolab Inc.
 
Flexbox every developers dream
Flexbox every developers dreamFlexbox every developers dream
Flexbox every developers dream
2019gracesmith
 
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
 
Flex box
Flex boxFlex box
Flex box
Harish Karthick
 
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
 
Building Layouts with CSS
Building Layouts with CSSBuilding Layouts with CSS
Building Layouts with CSS
Boris Paillard
 
Lecture-9.pptx
Lecture-9.pptxLecture-9.pptx
Lecture-9.pptx
vishal choudhary
 
The New CSS Layout - dotCSS
The New CSS Layout - dotCSSThe New CSS Layout - dotCSS
The New CSS Layout - dotCSS
Rachel 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 Job
Rachel Andrew
 
CSS Conf Budapest - New CSS Layout
CSS Conf Budapest - New CSS LayoutCSS Conf Budapest - New CSS Layout
CSS Conf Budapest - New CSS Layout
Rachel Andrew
 
flexbox report
flexbox reportflexbox report
flexbox report
LearningTech
 
What The Flexbox? An Intro to Flexbox
What The Flexbox? An Intro to FlexboxWhat The Flexbox? An Intro to Flexbox
What The Flexbox? An Intro to Flexbox
Lauren Pittenger
 
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 Flexbox Layout in React Native.pdf
Understanding Flexbox Layout in React Native.pdfUnderstanding Flexbox Layout in React Native.pdf
Understanding Flexbox Layout in React Native.pdf
Katy Slemon
 
Flexbox and Grid Layout
Flexbox and Grid LayoutFlexbox and Grid Layout
Flexbox and Grid Layout
Rachel Andrew
 
Create formsexcel
Create formsexcelCreate formsexcel
Create formsexcel
Ravi Gajul
 
Show & tell - Flex in flux
Show & tell - Flex in fluxShow & tell - Flex in flux
Show & tell - Flex in flux
Dan Dineen
 
Element of an electronic speadsheet ms excel
Element of an electronic speadsheet   ms excelElement of an electronic speadsheet   ms excel
Element of an electronic speadsheet ms excel
eVidhya
 
Layout with flexbox
Layout with flexboxLayout with flexbox
Layout with flexbox
The Level Consulting, Ltd.
 

Similar to Enhancing Responsiveness With Flexbox (Smashing Conference) (20)

Putting Flexbox into Practice (Fronteers)
Putting Flexbox into Practice (Fronteers)Putting Flexbox into Practice (Fronteers)
Putting Flexbox into Practice (Fronteers)
 
A complete guide to flexbox
A complete guide to flexboxA complete guide to flexbox
A complete guide to flexbox
 
Flexbox every developers dream
Flexbox every developers dreamFlexbox every developers dream
Flexbox every developers dream
 
Is Flexbox the Future of Layout?
Is Flexbox the Future of Layout?Is Flexbox the Future of Layout?
Is Flexbox the Future of Layout?
 
Flex box
Flex boxFlex box
Flex box
 
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)
 
Building Layouts with CSS
Building Layouts with CSSBuilding Layouts with CSS
Building Layouts with CSS
 
Lecture-9.pptx
Lecture-9.pptxLecture-9.pptx
Lecture-9.pptx
 
The New CSS Layout - dotCSS
The New CSS Layout - dotCSSThe New CSS Layout - dotCSS
The New CSS Layout - dotCSS
 
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
 
CSS Conf Budapest - New CSS Layout
CSS Conf Budapest - New CSS LayoutCSS Conf Budapest - New CSS Layout
CSS Conf Budapest - New CSS Layout
 
flexbox report
flexbox reportflexbox report
flexbox report
 
What The Flexbox? An Intro to Flexbox
What The Flexbox? An Intro to FlexboxWhat The Flexbox? An Intro to Flexbox
What The Flexbox? An Intro to 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 Flexbox Layout in React Native.pdf
Understanding Flexbox Layout in React Native.pdfUnderstanding Flexbox Layout in React Native.pdf
Understanding Flexbox Layout in React Native.pdf
 
Flexbox and Grid Layout
Flexbox and Grid LayoutFlexbox and Grid Layout
Flexbox and Grid Layout
 
Create formsexcel
Create formsexcelCreate formsexcel
Create formsexcel
 
Show & tell - Flex in flux
Show & tell - Flex in fluxShow & tell - Flex in flux
Show & tell - Flex in flux
 
Element of an electronic speadsheet ms excel
Element of an electronic speadsheet   ms excelElement of an electronic speadsheet   ms excel
Element of an electronic speadsheet ms excel
 
Layout with flexbox
Layout with flexboxLayout with flexbox
Layout with flexbox
 

More from 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
 
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 (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 Layouts
Zoe Gillenwater
 
The Future of CSS Layout
The Future of CSS LayoutThe Future of CSS Layout
The Future of CSS Layout
Zoe Gillenwater
 
Building Responsive Layouts
Building Responsive LayoutsBuilding Responsive Layouts
Building Responsive Layouts
Zoe Gillenwater
 
CSS3, Media Queries, and Responsive Design
CSS3, Media Queries, and Responsive DesignCSS3, Media Queries, and Responsive Design
CSS3, Media Queries, and Responsive Design
Zoe 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 experience
Zoe Gillenwater
 
Web Accessibility
Web AccessibilityWeb Accessibility
Web Accessibility
Zoe Gillenwater
 
Real-world CSS3
Real-world CSS3Real-world CSS3
Real-world CSS3
Zoe Gillenwater
 
Designing with CSS3 Effectively & Efficiently
Designing with CSS3 Effectively & EfficientlyDesigning with CSS3 Effectively & Efficiently
Designing with CSS3 Effectively & Efficiently
Zoe Gillenwater
 
Effective and Efficient Design with CSS3
Effective and Efficient Design with CSS3Effective and Efficient Design with CSS3
Effective and Efficient Design with CSS3
Zoe Gillenwater
 
Highly Maintainable, Efficient, and Optimized CSS
Highly Maintainable, Efficient, and Optimized CSSHighly Maintainable, Efficient, and Optimized CSS
Highly Maintainable, Efficient, and Optimized CSS
Zoe 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 Web
Zoe Gillenwater
 

More from Zoe Gillenwater (15)

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

Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
Jakub Marek
 
Finale of the Year: Apply for Next One!
Finale of the Year: Apply for Next One!Finale of the Year: Apply for Next One!
Finale of the Year: Apply for Next One!
GDSC PJATK
 
AWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptxAWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptx
HarisZaheer8
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
tolgahangng
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
Octavian Nadolu
 
WeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation TechniquesWeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation Techniques
Postman
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
Zilliz
 
Letter and Document Automation for Bonterra Impact Management (fka Social Sol...
Letter and Document Automation for Bonterra Impact Management (fka Social Sol...Letter and Document Automation for Bonterra Impact Management (fka Social Sol...
Letter and Document Automation for Bonterra Impact Management (fka Social Sol...
Jeffrey Haguewood
 
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfUnlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Malak Abu Hammad
 
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing InstancesEnergy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Alpen-Adria-Universität
 
Building Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and MilvusBuilding Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and Milvus
Zilliz
 
System Design Case Study: Building a Scalable E-Commerce Platform - Hiike
System Design Case Study: Building a Scalable E-Commerce Platform - HiikeSystem Design Case Study: Building a Scalable E-Commerce Platform - Hiike
System Design Case Study: Building a Scalable E-Commerce Platform - Hiike
Hiike
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
Hiroshi SHIBATA
 
Nunit vs XUnit vs MSTest Differences Between These Unit Testing Frameworks.pdf
Nunit vs XUnit vs MSTest Differences Between These Unit Testing Frameworks.pdfNunit vs XUnit vs MSTest Differences Between These Unit Testing Frameworks.pdf
Nunit vs XUnit vs MSTest Differences Between These Unit Testing Frameworks.pdf
flufftailshop
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
Jason Packer
 
Deep Dive: Getting Funded with Jason Jason Lemkin Founder & CEO @ SaaStr
Deep Dive: Getting Funded with Jason Jason Lemkin Founder & CEO @ SaaStrDeep Dive: Getting Funded with Jason Jason Lemkin Founder & CEO @ SaaStr
Deep Dive: Getting Funded with Jason Jason Lemkin Founder & CEO @ SaaStr
saastr
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
innovationoecd
 
UI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentationUI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentation
Wouter Lemaire
 
dbms calicut university B. sc Cs 4th sem.pdf
dbms  calicut university B. sc Cs 4th sem.pdfdbms  calicut university B. sc Cs 4th sem.pdf
dbms calicut university B. sc Cs 4th sem.pdf
Shinana2
 

Recently uploaded (20)

Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
 
Finale of the Year: Apply for Next One!
Finale of the Year: Apply for Next One!Finale of the Year: Apply for Next One!
Finale of the Year: Apply for Next One!
 
AWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptxAWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptx
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
 
WeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation TechniquesWeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation Techniques
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
 
Letter and Document Automation for Bonterra Impact Management (fka Social Sol...
Letter and Document Automation for Bonterra Impact Management (fka Social Sol...Letter and Document Automation for Bonterra Impact Management (fka Social Sol...
Letter and Document Automation for Bonterra Impact Management (fka Social Sol...
 
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfUnlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
 
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing InstancesEnergy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
 
Building Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and MilvusBuilding Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and Milvus
 
System Design Case Study: Building a Scalable E-Commerce Platform - Hiike
System Design Case Study: Building a Scalable E-Commerce Platform - HiikeSystem Design Case Study: Building a Scalable E-Commerce Platform - Hiike
System Design Case Study: Building a Scalable E-Commerce Platform - Hiike
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
 
Nunit vs XUnit vs MSTest Differences Between These Unit Testing Frameworks.pdf
Nunit vs XUnit vs MSTest Differences Between These Unit Testing Frameworks.pdfNunit vs XUnit vs MSTest Differences Between These Unit Testing Frameworks.pdf
Nunit vs XUnit vs MSTest Differences Between These Unit Testing Frameworks.pdf
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
 
Deep Dive: Getting Funded with Jason Jason Lemkin Founder & CEO @ SaaStr
Deep Dive: Getting Funded with Jason Jason Lemkin Founder & CEO @ SaaStrDeep Dive: Getting Funded with Jason Jason Lemkin Founder & CEO @ SaaStr
Deep Dive: Getting Funded with Jason Jason Lemkin Founder & CEO @ SaaStr
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
 
UI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentationUI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentation
 
dbms calicut university B. sc Cs 4th sem.pdf
dbms  calicut university B. sc Cs 4th sem.pdfdbms  calicut university B. sc Cs 4th sem.pdf
dbms calicut university B. sc Cs 4th sem.pdf
 

Enhancing Responsiveness With Flexbox (Smashing Conference)

  • 1. Flexbox Zoe Mickley Gillenwater @zomigiSmashingConf March 2015 Enhancing WITH Responsiveness
  • 2. I used to make fixed-width sites… 2
  • 4. I even wrote a book about it in 2008. Then I got into CSS “liquid” layout 4
  • 5. Problems with CSS 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
  • 6. Flexbox solves a lot of these 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
  • 7.
  • 8. Use flexbox now on UI components as progressive enhancement. You can use flexbox now 8
  • 9. “Easy for you to say. I have to support IE 8.” – You, maybe
  • 10. “I work for Booking.com, and we support IE 7, and I use flexbox.” – Me
  • 11. Progressive enhancement possibilities ¨  Align items in new ways ¨  Fill up the gaps in your layout ¨  Reorder decorative content ¨  Increase responsiveness 11
  • 12. Responsiveness is a continuum. Flexbox can help make your site more responsive. RWD is not binary 12
  • 13. Flexbox and RWD Make better use of the space at all screen sizes Reorder content at different screen sizes 13 Space Placement
  • 14. Making better use of space 14
  • 15. 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
  • 16. Demo: horizontal navigation 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
  • 18. Making it full-width ¨  All links on same line ¨  First link flush left, last link flush right ¨  Equal spaces between all links 18
  • 19. 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 19
  • 21. Nav with flexbox .list-nav { display: flex; justify-content: space-between; margin: 0; padding: 0; list-style: none; } .list-nav li { text-align: center; } 21
  • 22. justify-content 22 aligns flex items along main axis space-around flex-end center flex-start (default) space-between
  • 23. Combine with inline-block .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; } 23
  • 25. Wide variation: two-piece main nav 1.  Add media query for wide width: @media (min-width:860px) { } 2.  Add link to Modernizr, because we’re going to need to feed styles to only flexbox browsers in this case 25
  • 26. Add Modernizr as needed ¨  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 26
  • 27. 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; } } 27
  • 28. Wide variation: two-piece main nav 4.  Stop distributing links across full width: @media (min-width:860px) { .flexbox .list-nav { justify-content: flex-start; position: relative; top: -70px; } } 28
  • 29. Wide variation: two-piece main nav 5.  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
  • 30. A more responsive nav bar 30
  • 31. Content blocks’ height varies in RWD, and flexbox can also help you make better use of varying vertical space This works vertically too 31
  • 32. Demo: full-height stacked icons .wrapper .icons .content 32
  • 33. Demo: full-height stacked icons 1.  Turn .wrapper into flex container: .wrapper { display: flex; align-items: stretch; /* default */ } 2.  Children .icons and .content become side-by-side, equal-height flex items 33
  • 34. align-items 34 aligns flex items in cross axis flex-start flex-end center baseline stretch (default) foo   foo   foo  
  • 35. Demo: full-height stacked icons 3.  Turn .icons into flex container with vertically stacked children (the 3 icons): .icons { display: flex; flex-direction: column; } 35
  • 36. Demo: full-height stacked icons 4.  Equally space the 3 icons along the vertical main axis: .icons { display: flex; flex-direction: column; justify-content: space-between; } 36
  • 38. Combine with table-cell .wrapper { display: table; /* fallback */ display: flex; } .icons { display: table-cell; /* fallback */ vertical-align: middle; /* fallback */ display: flex; flex-direction: column; justify-content: space-between; } .content { display: table-cell; /* fallback */ vertical-align: top; /* fallback */ flex: 1 0 0px; } 38
  • 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; flex-direction: column; justify-content: space-between; } .content { flex: 1 0 0px; } .no-flexbox .content { margin-left: 60px; /* fallback */ } 39
  • 40. Fallback alignment options 40 Top-aligned (float) Centered (table-cell)
  • 41. Combining units of measurement across a line can make RWD tricky. ems + % + px + [blank] = ??? 41
  • 42. Demo: responsive form 42 Inspired by http://jobs.theguardian.com/, which uses floats and percentage widths
  • 43. But it would be nicer if… 43 ¨  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
  • 44. Enhance with flexbox 44 1.  Let the fields wrap when needed: .jobs-form { display: flex; flex-wrap: wrap; }
  • 45. Enhance with flexbox 45 2.  Override the % widths and use flex instead: /* hide from non-flex browsers */ .flexbox .jobs-form_field-wrapper { width: auto; flex: 1 1 100%; }
  • 46. Enhance with flexbox 46 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; } }
  • 47. Defining the flex property Makes flex items change their main size (width or height) to fit available space 47
  • 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) 48
  • 49. Breaking down the flex property 49 @media (min-width:40em) { .jobs-form_keywords, .jobs-form_location { 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
  • 50. Breaking down the flex property 50 @media (min-width:40em) { .jobs-form_keywords, .jobs-form_location { flex: 1 1 auto; } .jobs-form_distance, .jobs-form_submit { flex: 0 0 auto; } } flex-shrink = 1 it’s ok to shrink smaller than the starting width if there’s not enough space flex-shrink = 0 don’t shrink smaller than starting width
  • 51. Breaking down the flex property 51 @media (min-width:40em) { .jobs-form_keywords, .jobs-form_location { flex: 1 1 auto; } .jobs-form_distance, .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
  • 52. In other words... 52 @media (min-width:40em) { .jobs-form_keywords, .jobs-form_location { flex: 1 1 auto; } .jobs-form_distance, .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.
  • 53. The flexbox form so far 53 flex-basis: 100% flex-basis: auto
  • 54. Enhance with flexbox 54 4.  Refine keywords field’s flex-basis values to improve the layout: @media (min-width:40em) { .jobs-form_keywords { flex: 1 1 100%; } .jobs-form_location { flex: 1 1 auto; } .jobs-form_distance, .jobs-form_submit { flex: 0 0 auto; } } @media (min-width:50em) { .jobs-form_keywords { flex-basis: auto; } }
  • 55. Enhance with flexbox 55 5.  Turn each field wrapper into flex container: .flexbox .jobs-form_field-wrapper { display: flex; /* sets align-items:stretch */ width: auto; flex: 1 1 100%; } 6.  Input/button inside stretches to match height of its line, thanks to default align- items:stretch on flex containers, so all fields are equal height on their line
  • 58. Automatic orientation switch .cs-message__text { flex: 1 0 40%; width: 43%; float: left; margin-right: 10px; } One rule creates two responsive layouts, both always full width 58
  • 59. The form without flexbox Narrow: inputs stack Wide: not quite full-width see? 59
  • 60. Demo: responsive article header ¨  No media query ¨  display: block ¨  50em media query ¨  display: table-cell 60 Narrow starting styles Wide starting styles
  • 62. Enhance with flexbox 62 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; padding: 0 0 20px 20px; }
  • 63. Enhance with flexbox 63 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; padding: 0 0 20px 20px; } .article-title { flex: 1 1 100%; } .article-category { flex: 1 1 auto; }
  • 64. Demo: responsive article header 64 flex: 1 1 auto align-content: space-between
  • 65. Improved wrapping 65 With float or text-align With flex or justify-content
  • 66. A real-world wrapping example Without flexbox (IE 9) With flexbox (Chrome) 66
  • 67. 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; } 67
  • 70. 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 */ } 70
  • 71. Use order property to move logo 2.  Split extra space on line to center logo: .logo { margin-left: auto; } .link-party { margin-left: auto; } 71
  • 72. Order only works on siblings 72 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>
  • 73. 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. 73
  • 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 sparingly 74
  • 75. 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 75
  • 76. Demo: moving a photo on mobile Desktop: HTML order (no flexbox)Mobile: reordered 76
  • 77. 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 77
  • 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%; } } 78
  • 79. Demo: moving a photo on mobile Flexbox version Non-flexbox version 79
  • 80. The Guardian: opposite approach 80 Stacking order you see when narrow is the HTML order, unchanged 1 2 3 4 5 6
  • 81. The Guardian: opposite approach 81 Reordered when wide, but not using order 12 3 4 56 flex-direction: row-reverse flex-direction: row-reverse
  • 83. 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+ * 83
  • 84. I recommend you skip the ‘09 syntax 84 ¨  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
  • 85. 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/ master/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/ 85
  • 86. Adding Modernizr classes with Sass 86 @mixin supports-flexbox($support) { @if $support == yes { .flexbox & { @content } } @if $support == no { .no-flexbox & { @content } } }
  • 87. Adding Modernizr classes with Sass 87 .container { display: flex; } .sidebar { float: left; width: 300px; } .main-content { margin-left: 320px; @include supports-flexbox(yes) { margin-left: 20px; } }
  • 88. Adding Modernizr classes with Sass 88 .container { display: flex; } .sidebar { float: left; width: 300px; } .main-content { margin-left: 320px; } .flexbox .main-content { margin-left: 20px; }
  • 89. Pick your starter/fallback layout CSS ¨  Floats ¨  table-cell ¨  inline-block ¨  Absolute positioning 89 Flexbox will override: Flexbox will not override: No single right/best answer. Use whatever you normally would.
  • 90. Flexbox is not ALL or NOTHING
  • 91. Learn more 91 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.