SlideShare a Scribd company logo
1 of 84
Download to read offline
PUTTING

FLEXBOX PRACTICE
INTO

Fronteers
October 2013

Zoe Mickley Gillenwater

@zomigi
I’m a web designer/front-end dev
and I wrote these books on CSS:

Stunning CSS3:
A Project-based Guide to
the Latest in CSS

Flexible Web Design:
Creating Liquid and Elastic
Layouts with CSS

www.stunningcss3.com

www.flexiblewebbook.com
My portfolio site from 2000
My portfolio site from 2000
2003: Introduced to floats
Problems with float layout






Difficulty with containment
Unwanted wrapping, aka “float drop”
Visual location somewhat tied to HTML order
No built-in equal-height columns
No float:center
What is flexbox?
The nickname for the CSS Flexible Box
Layout Module, a new layout mechanism
and box model.
Which is which?
2009

display:box

*
v.3+

2011

display:flexbox

Now

*

†

display:flex

v.10

v.7

*

* with -webkit- prefix
†

with -ms- prefix

See also http://css-tricks.com/old-flexbox-and-new-flexbox/

*
Turn it on
flex container

display: flex
flex item
plain old box

flex item
flex-direction
specifies orientation
of flex items’ layout

column

row
(default)
column-reverse
row-reverse
Demo site:
www.smoresday.us
Use Chrome, Opera,
Safari 7, or IE 10 for
full effect
(Zoe really loves s’mores)
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
Demo: horizontal navigation
Before

After
“

What’s the big deal?
I can do the same thing with display: inline.”

Yes, you can.
We’re just laying the groundwork for the
cool stuff that’s coming.
Baby steps.
How the CSS might really look
.list-nav {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-direction: normal;
-webkit-box-orient: horizontal;
-ms-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
}

2009

Android
Safari 3-6

2011
IE 10

current
Chrome
Firefox
Opera
Safari 7
Blackberry
Keeping track of variants




Flexy Boxes code generator shows old and new
syntaxes: www.the-echoplex.net/flexyboxes/
Let Sass or LESS do it for you, for instance:
 https://github.com/mastastealth/sass-flex-mixin
 https://gist.github.com/cimmanon/4461470



The -prefix-free script can do some of it for
you: http://leaverou.github.io/prefixfree/
Use the variants you want.
But for the sake of readability, I’m omitting
them from the code samples on these
slides. You can see them in the live demo.
Now back to flex-direction.
Setting a point of reference
Main axis
Cross axis
(for flex-direction: row)
flex-wrap

controls whether flex
items can lay out on
multiple lines and which
direction new lines are
stacked in

wrap
(for row)

wrap
(for column)

nowrap
(default; for row)

wrap-reverse
(for row)
Problems with flex-wrap





Firefox doesn’t support it yet
No browser supports 2009 equivalent boxlines property
Limited control of where breaks occur without
support for break-before/break-after
properties (only IE 10 and Opera support
them)
Summary: setting the stage
1. Create flex container using display:flex
2. Set its flex-direction to control
orientation (horizontal or vertical)
3. Set its flex-wrap to control whether and in
which direction to wrap
(Or, set flex-flow as shorthand for flexdirection and flex-wrap)
Mobile
block
layout
.builder
.component

.action

.gallery
.gallery-item
Add flexbox for larger widths
No need to put within media query—it can “kick
in” whenever space allows (auto breakpoints!)
1. Create flex container:
.gallery {
display: flex;
flex-wrap: wrap;
margin-left: -20px;
}
Add flexbox for larger widths
2. Size flex items:
.gallery-item {
flex: 1 0 200px;
margin: 0 0 20px 20px;
padding: 20px;
}
The flex property
This is where flexbox gets flexible.
And kinda confusing.
Defining the flex property




Makes flex items change their width or height
(whichever is dimension along main axis) to
fit available space
Shorthand for 3 properties:
 flex-grow
 flex-shrink
 flex-basis
Defining the flex property
flex-grow

flex-shrink

flex-basis

how much flex
item will grow
relative to
other items if
extra space is
available
(proportion
of extra space
that it gets)

how much item
will shrink
relative to
others if there is
not enough
space
(proportion of
overflow that
gets shaved off)

the initial
starting size
before free
space is
distributed
(any standard
width/height
value, including
auto)
Breaking it down
.gallery-item {
flex: 1 0 200px;
flex-grow
give every
item 1 share
of extra width

flex-shrink
don’t let the
items shrink at
all (but they
wouldn’t
anyway due to
flex-wrap)

flex-basis
start them out
at 200 pixels
wide (basically,
min-width)
Let’s see it flex live
Single-digit flex values





Common to see flex: 1 in demos
flex: [number] is equivalent to
flex: [number] 1 0px
Be sure you really want flex-basis to be 0
 When

wrap on, essentially min-width
 0px therefore means items can shrink to 0px
 If everything can get down to 0px, nothing ever
has a reason to wrap
My first attempt
Zoe’s Brain Said:
“Since .action
starts out at 100%,
it won’t have space
to sit on the first
line with the
content preceding
it, and will wrap to
a second line.”

.component {

.action {

flex: 1;
}
The expected outcome:

flex: 1 1 100%;
}
Flexbox fail
My first attempt
Reality:
Since it’s fine for
each .component to
shrink to only 0px
wide, a 100% wide
element can and
will sit on the same
line as all the
components.

.component {
flex: 1 1 0px;
}
.action {
flex: 1 1 100%;
}
Forcing the wrap
Fixed:
.action will always
wrap to new line,
and .components
will wrap to
additional lines
when there’s less
space than their
combined flexbasis values (plus
margin, etc.).

.component {
flex: 1 1 200px;
}
.action {
flex: 1 1 100%;
}
Live demo time again
Why flex is great
Less need for media queries
Layout changes that would previously have been
hardcoded into a media query can now be done
on the fly when browser determines stuff can fit
Flex adjusts for margin
box-sizing only takes care of padding and
border added on to width, not margin
The boxes won’t all fit

Works like a charm

.component {
width: 25%;
margin-left: 20px;
}

.component {
flex: 1 1 200px;
margin-left: 20px;
}
Flex adjusts for quantity of items


Great for sites with dynamic or frequently
changing content blocks, e.g.:
 News

stories on home page vs inner page
 Product or feature tiles
 Pricing page with plans side by side


Makes HTML/CSS more modular—an item can
move anywhere and adjust in size as needed
Flex can combine different units
Items measured in
different units can
sit side-by-side and
all fit perfectly

Pixels
Ems
Mystery percentage
Flex can combine different units
Set only the text field to flex:
.component li:last-child {
display: flex;
}
.component .other-name {
flex: 1;
}
Flex can be proportional
Setting flex-grow/flex-shrink to different
values can make flex items size themselves
relative to each other
flex: 1;

flex: 1;

flex: 2;
But be careful!
Having widths be in multiples of each other only
works if flex-basis is 0
flex: 1 0 0px; flex: 1 0 0px; flex: 2 0 0px;

If all start out 0px, then all the width on the line
is extra, so the flex:2 item gets twice as much
width as the others and is thus twice as wide as
the others
If flex-basis isn’t 0px…
…the widths may not end up as you expect
flex: 1 0 10px;

flex: 1 0 10px;

flex: 2 0 10px;

10px + 5px extra = 15px

10px + 5px extra = 15px

10px + 10px extra = 20px

if 50px available

The third box gets twice as much of the extra,
but that doesn’t make it twice as wide overall
You can use it now
While support improves, consider using
flexbox now on small page components as
progressive enhancement.
Here are a few ideas.
Single-line, full-width form





All items on same line
Text input(s) stretches to fill remaining space
All items vertically centered or equal height
Form without flexbox
.action { text-align: center; }
.action * {
display: inline; /* default */
vertical-align: middle;
}
Form without flexbox

All items on same line

X Text input stretches to take up remaining space
All items vertically centered or equal height


Form with flexbox
.action {
flex: 1 1 100%;
display: flex;
align-items: stretch; /* default */
}
.action input {
flex: 1;
}
.action input, .action label {
margin-right: 10px;
}
align-items

aligns flex items in
cross axis

flex-start

stretch
(default)

flex-end
foo

center

foo

baseline

foo
Form with flexbox

All items on same line
Text input stretches to take up remaining space
All items vertically centered or equal height
Override alignment on label
.action label {
align-self: center;
}
Combine the two
.action {
flex: 1 1 100%;
display: flex;
text-align: center; /* fallback */
}
.action input {
flex: 1;
}
.action label {
align-self: center;
}
.action input, .action label {
margin-right: 10px;
}
Another option: stack, center
.action {
flex: 1 1 100%;
display: flex;
flex-wrap: wrap;
align-items: center;
text-align: center; /* fallback */
}
.action input {
flex: 1;
display: block; /* fallback */
width: 100%; /* fallback */
box-sizing: border-box; /* fallback */
}
.action button {
flex: 1 1 100%;
margin-top: 10px;
}
Narrow version
Non-flexbox fallback version

Flexbox version
Add Modernizr as needed






Flexbox and fallback styles can often co-exist,
but sometimes need to isolate them
Modernizr can add flexbox, no-flexbox,
and flexbox-legacy classes to do this
Example: add margin between label and input
only if flexbox is on:
.flexbox .action label {
margin-right: 10px;
}
Full-width nav bar


Requirements:
 All

links on same line
 First link flush left, last link flush right
 Equal spaces between all links


Using display:table-cell can do fullwidth but not equal spaces
Nav with flexbox
.list-nav {
display: flex;
justify-content: space-between;
margin: 0;
padding: 0;
list-style: none;
}
.list-nav li {
/* no flex & no width = shrinkwrap */
text-align: center;
}
justify-content
aligns flex items along
main axis

flex-start
(default)

center

flex-end

space-between

space-around
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; }
Combine with inline-block
Non-flexbox
fallback version

Flexbox version
Combine with table-cell
.list-nav {
width: 100%; /* fallback */
display: table; /* fallback */
display: flex; /* override display:table for flexbox browsers */
justify-content: space-between;
}
.list-nav li {
display: table-cell; /* fallback */
padding: 0 .5em;
text-align: center;
}
.list-nav li:first-child {

.list-nav li:last-child {

padding-left: 0;
text-align: left; /* fallback */
}

padding-right: 0;
text-align: right;
}
Variation: pagination


Wide view: all links on same line, centered
 Set



justify-content:center

Medium view: all links on same line, fullwidth, equal spacing
 Set

justify-content:space-between
Variation: pagination


Narrow view: two lines with “previous” and
“next” links on first row, full-width
 Set

flex-wrap:wrap
 Set justify-content:space-between
 Use order property to move “next” link up
Visual reordering with flexbox
1. Make “previous” link come first visually,
“next” link second, and all the rest third
.pagination li {
order: 2;
display: inline-block; /* fallback */
}
.pagination li:first-child { /* “Previous” link */
order: 0;
text-align: left;
}
.pagination li:last-child { /* “Next” link */
order: 1;
text-align: right;
}
Visual reordering with flexbox
2. Force links to wrap after “next” link by
making it and “previous” link take up 100%
of the first line together
.flexbox .pagination li:first-child,
.flexbox .pagination li:last-child {
width: 50%;
}
.pagination {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
text-align: center; /* fallback */
}
Accessibility implications
Pro

Con

Keep content in
logical order in HTML
instead of structuring
HTML to achieve
visual layout

Focus/tab order won’t
always match
expected order, may
jump around
seemingly randomly
Tab order = HTML order
“Next” won’t be second link tabbed to after
“Previous” since it doesn’t follow it in HTML

1

10

2
Limitations of order property




Potential to create confusing tab order
Can only rearrange sibling elements
Flexbox rows/cols can’t overlap, so content
may not always slide into the spot left by the
re-ordered content

So: reserve flexbox order property for small
moves that don’t hurt accessibility, and use CSS3
Grid Layout, etc., for bigger re-ordering
Pinned item at bottom




All boxes equal
in height
Final item in
each box pinned
to the bottom so
that all final
items across grid
appear to align
Pinned item at bottom





Without flexbox, “other” fields disconnected from
each other and thus can’t align
With flexbox, they’re still disconnected, but their
parents aren’t and can be equal height, plus…
New “auto” margin behavior



Margins set to auto get all the free space left
So, to pin flex item to bottom of its flex
container:
 set

flex-direction:column on flex container
so items can fill its height
 set margin-top:auto on item you want to pin
Pin the “other” fields
1. Make each .component match in height by
making parent .builder a flex container
(already done)
.builder {
display: flex;
align-items: stretch; /* default */
flex-wrap: wrap;
justify-content: space-between;
margin: 0 0 40px -20px;
}
Pin the “other” fields
2. Make each <ul> a flex item and stretch to
full height, then make it a flex container with
vertical direction so its <li> will stack
.component {

.component ul {

flex: 1 1 200px;

flex: 1;

display: flex;

display: flex;

flex-direction: column;

flex-direction: column;

}

margin: 0;
padding: 0;
list-style: none;
}
Pin the “other” fields
3. Give “other” <li> an auto top margin so all
free space left in <ul> is put above that
<li>, pushing it to bottom of <ul>
.component li:last-child {
margin-top: auto;
}
Pinning without flexbox





Use display:table-cell for equal height
boxes
Add bottom padding in ems to each box
Use absolute positioning to pin “other” row in
space left by padding
Variation: two-piece main nav

.flexbox .list-nav {
justify-content: flex-start;
position: relative;
top: -70px;
}
.flexbox #link-home { margin-right:20px; }
.flexbox #link-tumblr { margin-left:20px; }
.flexbox #link-party {
margin-left: auto;
}
“

I can use it, but why should I?
Why go to the trouble to use flexbox as
progressive enhancement now?”
Develop it as a career skill






Essential layout tool in the future, especially
with responsive web design
Syntax is not going to change much, so what
you learn now will still work later
Better to learn something before it’s needed in
a project rather than during
“

Why should I do it with CSS
when I can do the same thing with <font> tags?”
–Zoe, circa 2002
“

Why should I do it with flexbox
when I can do the same thing with floats?”
We all learn best by doing





I learned a lot more about flexbox by building
demo site for this presentation—a lot
Have to try it to learn it
Using it for small cosmetic enhancements is
low-risk way to try it
It’s fun





Great user experience is important, but great
developer experience is worthwhile too
Enjoy your job to get better at your job
Sometimes the little extra time is worth the
fun challenge and reward at the end
Learn more
Download slides and get links at
www.zomigi.com/blog/flexbox-presentation

Thanks!
Zoe Mickley Gillenwater
@zomigi
design@zomigi.com
zomigi.com | stunningcss3.com | flexiblewebbook.com
Credit: “S’more” photo by Christopher Penn on Flickr. Looks like that man really knows how to make a good s’mores!

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
 
Ridiculously Easy Layouts with Flexbox
Ridiculously Easy Layouts with FlexboxRidiculously Easy Layouts with Flexbox
Ridiculously Easy Layouts with FlexboxEric Carlisle
 
Using Flexbox Today (Frontend United 2016)
Using Flexbox Today (Frontend United 2016)Using Flexbox Today (Frontend United 2016)
Using Flexbox Today (Frontend United 2016)Zoe Gillenwater
 
Using Flexbox Today (CSS Summit 2016)
Using Flexbox Today (CSS Summit 2016)Using Flexbox Today (CSS Summit 2016)
Using Flexbox Today (CSS Summit 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
 
Enhancing Responsiveness with Flexbox (RWD Summit)
Enhancing Responsiveness with Flexbox (RWD Summit)Enhancing Responsiveness with Flexbox (RWD Summit)
Enhancing Responsiveness with Flexbox (RWD Summit)Zoe Gillenwater
 
Enhancing Responsiveness With Flexbox (CSS Day)
Enhancing Responsiveness With Flexbox (CSS Day)Enhancing Responsiveness With Flexbox (CSS Day)
Enhancing Responsiveness With Flexbox (CSS Day)Zoe Gillenwater
 
From Preprocessor to Postprocessor
From Preprocessor to PostprocessorFrom Preprocessor to Postprocessor
From Preprocessor to PostprocessorMatteo Guidotto
 
The Future of CSS Layout
The Future of CSS LayoutThe Future of CSS Layout
The Future of CSS LayoutZoe Gillenwater
 
Using Flexbox Today (Generate Sydney 2016)
Using Flexbox Today (Generate Sydney 2016)Using Flexbox Today (Generate Sydney 2016)
Using Flexbox Today (Generate Sydney 2016)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
 
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
 
XAML Development with Xamarin - Jesse Liberty | FalafelCON 2014
XAML Development with Xamarin  - Jesse Liberty | FalafelCON 2014XAML Development with Xamarin  - Jesse Liberty | FalafelCON 2014
XAML Development with Xamarin - Jesse Liberty | FalafelCON 2014FalafelSoftware
 
IV - CSS architecture
IV - CSS architectureIV - CSS architecture
IV - CSS architectureWebF
 
III - Better angularjs
III - Better angularjsIII - Better angularjs
III - Better angularjsWebF
 

What's hot (20)

Using Flexbox Today (Frontier Conf 2016)
Using Flexbox Today (Frontier Conf 2016)Using Flexbox Today (Frontier Conf 2016)
Using Flexbox Today (Frontier Conf 2016)
 
Understanding flexbox
Understanding flexboxUnderstanding flexbox
Understanding flexbox
 
Ridiculously Easy Layouts with Flexbox
Ridiculously Easy Layouts with FlexboxRidiculously Easy Layouts with Flexbox
Ridiculously Easy Layouts with Flexbox
 
Using Flexbox Today (Frontend United 2016)
Using Flexbox Today (Frontend United 2016)Using Flexbox Today (Frontend United 2016)
Using Flexbox Today (Frontend United 2016)
 
Using Flexbox Today (CSS Summit 2016)
Using Flexbox Today (CSS Summit 2016)Using Flexbox Today (CSS Summit 2016)
Using Flexbox Today (CSS Summit 2016)
 
CSS3 Layout
CSS3 LayoutCSS3 Layout
CSS3 Layout
 
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)
 
Enhancing Responsiveness with Flexbox (RWD Summit)
Enhancing Responsiveness with Flexbox (RWD Summit)Enhancing Responsiveness with Flexbox (RWD Summit)
Enhancing Responsiveness with Flexbox (RWD Summit)
 
Enhancing Responsiveness With Flexbox (CSS Day)
Enhancing Responsiveness With Flexbox (CSS Day)Enhancing Responsiveness With Flexbox (CSS Day)
Enhancing Responsiveness With Flexbox (CSS Day)
 
From Preprocessor to Postprocessor
From Preprocessor to PostprocessorFrom Preprocessor to Postprocessor
From Preprocessor to Postprocessor
 
The Future of CSS Layout
The Future of CSS LayoutThe Future of CSS Layout
The Future of CSS Layout
 
Using Flexbox Today (Generate Sydney 2016)
Using Flexbox Today (Generate Sydney 2016)Using Flexbox Today (Generate Sydney 2016)
Using Flexbox Today (Generate Sydney 2016)
 
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)
 
Is Flexbox the Future of Layout?
Is Flexbox the Future of Layout?Is Flexbox the Future of Layout?
Is Flexbox the Future of Layout?
 
XAML Development with Xamarin - Jesse Liberty | FalafelCON 2014
XAML Development with Xamarin  - Jesse Liberty | FalafelCON 2014XAML Development with Xamarin  - Jesse Liberty | FalafelCON 2014
XAML Development with Xamarin - Jesse Liberty | FalafelCON 2014
 
World of Flexbox
World of Flexbox World of Flexbox
World of Flexbox
 
Css layout
Css layoutCss layout
Css layout
 
Chapter6
Chapter6Chapter6
Chapter6
 
IV - CSS architecture
IV - CSS architectureIV - CSS architecture
IV - CSS architecture
 
III - Better angularjs
III - Better angularjsIII - Better angularjs
III - Better angularjs
 

Viewers also liked

Flexbox and Grid Layout
Flexbox and Grid LayoutFlexbox and Grid Layout
Flexbox and Grid LayoutRachel Andrew
 
Zero to 100,000 Evaluations in Four Weeks
Zero to 100,000 Evaluations in Four WeeksZero to 100,000 Evaluations in Four Weeks
Zero to 100,000 Evaluations in Four Weeksfreshlybakedpixels
 
Introducing CSS Grid Layout
Introducing CSS Grid LayoutIntroducing CSS Grid Layout
Introducing CSS Grid LayoutRachel Andrew
 
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
 
Without Resilience, Nothing Else Matters
Without Resilience, Nothing Else MattersWithout Resilience, Nothing Else Matters
Without Resilience, Nothing Else MattersJonas Bonér
 
Life Beyond the Illusion of Present
Life Beyond the Illusion of PresentLife Beyond the Illusion of Present
Life Beyond the Illusion of PresentJonas Bonér
 
Render Conf: Start using CSS Grid Layout Today
Render Conf: Start using CSS Grid Layout TodayRender Conf: Start using CSS Grid Layout Today
Render Conf: Start using CSS Grid Layout TodayRachel Andrew
 
Laracon Online: Grid and Flexbox
Laracon Online: Grid and FlexboxLaracon Online: Grid and Flexbox
Laracon Online: Grid and FlexboxRachel Andrew
 
From Microliths To Microsystems
From Microliths To MicrosystemsFrom Microliths To Microsystems
From Microliths To MicrosystemsJonas Bonér
 
Scalability, Availability & Stability Patterns
Scalability, Availability & Stability PatternsScalability, Availability & Stability Patterns
Scalability, Availability & Stability PatternsJonas Bonér
 
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and FriendsThe Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and FriendsStacy Kvernmo
 

Viewers also liked (12)

Flexbox and Grid Layout
Flexbox and Grid LayoutFlexbox and Grid Layout
Flexbox and Grid Layout
 
Zero to 100,000 Evaluations in Four Weeks
Zero to 100,000 Evaluations in Four WeeksZero to 100,000 Evaluations in Four Weeks
Zero to 100,000 Evaluations in Four Weeks
 
Flexbox
FlexboxFlexbox
Flexbox
 
Introducing CSS Grid Layout
Introducing CSS Grid LayoutIntroducing CSS Grid Layout
Introducing CSS Grid Layout
 
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.
 
Without Resilience, Nothing Else Matters
Without Resilience, Nothing Else MattersWithout Resilience, Nothing Else Matters
Without Resilience, Nothing Else Matters
 
Life Beyond the Illusion of Present
Life Beyond the Illusion of PresentLife Beyond the Illusion of Present
Life Beyond the Illusion of Present
 
Render Conf: Start using CSS Grid Layout Today
Render Conf: Start using CSS Grid Layout TodayRender Conf: Start using CSS Grid Layout Today
Render Conf: Start using CSS Grid Layout Today
 
Laracon Online: Grid and Flexbox
Laracon Online: Grid and FlexboxLaracon Online: Grid and Flexbox
Laracon Online: Grid and Flexbox
 
From Microliths To Microsystems
From Microliths To MicrosystemsFrom Microliths To Microsystems
From Microliths To Microsystems
 
Scalability, Availability & Stability Patterns
Scalability, Availability & Stability PatternsScalability, Availability & Stability Patterns
Scalability, Availability & Stability Patterns
 
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and FriendsThe Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
 

Similar to Putting Flexbox into Practice (Fronteers)

Leveling Up with Flexbox (Smashing Conference)
Leveling Up with Flexbox (Smashing Conference)Leveling Up with Flexbox (Smashing Conference)
Leveling Up with Flexbox (Smashing Conference)Zoe Gillenwater
 
Flexbox Will Shock You!
Flexbox Will Shock You!Flexbox Will Shock You!
Flexbox Will Shock You!Scott Vandehey
 
Enhancing Responsiveness With Flexbox (Smashing Conference)
Enhancing Responsiveness With Flexbox (Smashing Conference)Enhancing Responsiveness With Flexbox (Smashing Conference)
Enhancing Responsiveness With Flexbox (Smashing Conference)Zoe Gillenwater
 
Show & tell - Flex in flux
Show & tell - Flex in fluxShow & tell - Flex in flux
Show & tell - Flex in fluxDan Dineen
 
CSS Lessons Learned The Hard Way – Zoe Gillenwater
CSS Lessons Learned The Hard Way – Zoe GillenwaterCSS Lessons Learned The Hard Way – Zoe Gillenwater
CSS Lessons Learned The Hard Way – Zoe Gillenwaterbeyond tellerrand
 
Understanding flexbox
Understanding flexboxUnderstanding flexbox
Understanding flexboxmustafa sarac
 
Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)
Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)
Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)Zoe Gillenwater
 
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.pdfKaty Slemon
 
CSS Flexbox (flexible box layout)
CSS Flexbox (flexible box layout)CSS Flexbox (flexible box layout)
CSS Flexbox (flexible box layout)Woodridge Software
 
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
 
Building Layouts with CSS
Building Layouts with CSSBuilding Layouts with CSS
Building Layouts with CSSBoris Paillard
 
The New CSS Layout - dotCSS
The New CSS Layout - dotCSSThe New CSS Layout - dotCSS
The New CSS Layout - dotCSSRachel Andrew
 
Is Flexbox the Future of Layout -bdconf
Is Flexbox the Future of Layout -bdconfIs Flexbox the Future of Layout -bdconf
Is Flexbox the Future of Layout -bdconfjameswillweb
 
CSS3 Flex Layout
CSS3 Flex LayoutCSS3 Flex Layout
CSS3 Flex LayoutNeha Sharma
 
CSS3 Flexbox & Responsive Design
CSS3 Flexbox & Responsive DesignCSS3 Flexbox & Responsive Design
CSS3 Flexbox & Responsive DesignArash Milani
 
Css3 - Flex Box e Efeitos
Css3 - Flex Box e EfeitosCss3 - Flex Box e Efeitos
Css3 - Flex Box e EfeitosHcode
 

Similar to Putting Flexbox into Practice (Fronteers) (20)

Leveling Up with Flexbox (Smashing Conference)
Leveling Up with Flexbox (Smashing Conference)Leveling Up with Flexbox (Smashing Conference)
Leveling Up with Flexbox (Smashing Conference)
 
Flexbox Will Shock You!
Flexbox Will Shock You!Flexbox Will Shock You!
Flexbox Will Shock You!
 
A complete guide to flexbox
A complete guide to flexboxA complete guide to flexbox
A complete guide to flexbox
 
Enhancing Responsiveness With Flexbox (Smashing Conference)
Enhancing Responsiveness With Flexbox (Smashing Conference)Enhancing Responsiveness With Flexbox (Smashing Conference)
Enhancing Responsiveness With Flexbox (Smashing Conference)
 
Show & tell - Flex in flux
Show & tell - Flex in fluxShow & tell - Flex in flux
Show & tell - Flex in flux
 
CSS Lessons Learned The Hard Way – Zoe Gillenwater
CSS Lessons Learned The Hard Way – Zoe GillenwaterCSS Lessons Learned The Hard Way – Zoe Gillenwater
CSS Lessons Learned The Hard Way – Zoe Gillenwater
 
Understanding flexbox
Understanding flexboxUnderstanding flexbox
Understanding flexbox
 
Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)
Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)
Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)
 
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
 
CSS Flexbox (flexible box layout)
CSS Flexbox (flexible box layout)CSS Flexbox (flexible box layout)
CSS Flexbox (flexible box layout)
 
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)
 
Building Layouts with CSS
Building Layouts with CSSBuilding Layouts with CSS
Building Layouts with CSS
 
The New CSS Layout - dotCSS
The New CSS Layout - dotCSSThe New CSS Layout - dotCSS
The New CSS Layout - dotCSS
 
Lecture-9.pptx
Lecture-9.pptxLecture-9.pptx
Lecture-9.pptx
 
Is Flexbox the Future of Layout -bdconf
Is Flexbox the Future of Layout -bdconfIs Flexbox the Future of Layout -bdconf
Is Flexbox the Future of Layout -bdconf
 
flexbox report
flexbox reportflexbox report
flexbox report
 
CSS3 Flex Layout
CSS3 Flex LayoutCSS3 Flex Layout
CSS3 Flex Layout
 
CSS3 Flexbox & Responsive Design
CSS3 Flexbox & Responsive DesignCSS3 Flexbox & Responsive Design
CSS3 Flexbox & Responsive Design
 
Css3 - Flex Box e Efeitos
Css3 - Flex Box e EfeitosCss3 - Flex Box e Efeitos
Css3 - Flex Box e Efeitos
 
Flex box
Flex boxFlex box
Flex box
 

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
 
Responsive Flexbox Inspiration (Responsive Day Out)
Responsive Flexbox Inspiration (Responsive Day Out)Responsive Flexbox Inspiration (Responsive Day Out)
Responsive Flexbox Inspiration (Responsive Day Out)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
 
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
 
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 (14)

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)
 
Responsive Flexbox Inspiration (Responsive Day Out)
Responsive Flexbox Inspiration (Responsive Day Out)Responsive Flexbox Inspiration (Responsive Day Out)
Responsive Flexbox Inspiration (Responsive Day Out)
 
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)
 
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
 
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

How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa LetšosaModels of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa Letšosaannemarleenolthof1
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaAMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaBarusRa
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
UI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessUI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessThink 360 Studio
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfUnlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfIBM
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 

Recently uploaded (18)

How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa LetšosaModels of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaAMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
UI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessUI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design Success
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfUnlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 

Putting Flexbox into Practice (Fronteers)

  • 2. I’m a web designer/front-end dev and I wrote these books on CSS: Stunning CSS3: A Project-based Guide to the Latest in CSS Flexible Web Design: Creating Liquid and Elastic Layouts with CSS www.stunningcss3.com www.flexiblewebbook.com
  • 3. My portfolio site from 2000
  • 4. My portfolio site from 2000
  • 6. Problems with float layout      Difficulty with containment Unwanted wrapping, aka “float drop” Visual location somewhat tied to HTML order No built-in equal-height columns No float:center
  • 7. What is flexbox? The nickname for the CSS Flexible Box Layout Module, a new layout mechanism and box model.
  • 8. Which is which? 2009 display:box * v.3+ 2011 display:flexbox Now * † display:flex v.10 v.7 * * with -webkit- prefix † with -ms- prefix See also http://css-tricks.com/old-flexbox-and-new-flexbox/ *
  • 9. Turn it on flex container display: flex flex item plain old box flex item
  • 10. flex-direction specifies orientation of flex items’ layout column row (default) column-reverse row-reverse
  • 11. Demo site: www.smoresday.us Use Chrome, Opera, Safari 7, or IE 10 for full effect (Zoe really loves s’mores)
  • 12. 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
  • 14. “ What’s the big deal? I can do the same thing with display: inline.” Yes, you can. We’re just laying the groundwork for the cool stuff that’s coming. Baby steps.
  • 15. How the CSS might really look .list-nav { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-direction: normal; -webkit-box-orient: horizontal; -ms-flex-direction: row; -webkit-flex-direction: row; flex-direction: row; } 2009 Android Safari 3-6 2011 IE 10 current Chrome Firefox Opera Safari 7 Blackberry
  • 16. Keeping track of variants   Flexy Boxes code generator shows old and new syntaxes: www.the-echoplex.net/flexyboxes/ Let Sass or LESS do it for you, for instance:  https://github.com/mastastealth/sass-flex-mixin  https://gist.github.com/cimmanon/4461470  The -prefix-free script can do some of it for you: http://leaverou.github.io/prefixfree/
  • 17. Use the variants you want. But for the sake of readability, I’m omitting them from the code samples on these slides. You can see them in the live demo. Now back to flex-direction.
  • 18. Setting a point of reference Main axis Cross axis (for flex-direction: row)
  • 19. flex-wrap controls whether flex items can lay out on multiple lines and which direction new lines are stacked in wrap (for row) wrap (for column) nowrap (default; for row) wrap-reverse (for row)
  • 20. Problems with flex-wrap    Firefox doesn’t support it yet No browser supports 2009 equivalent boxlines property Limited control of where breaks occur without support for break-before/break-after properties (only IE 10 and Opera support them)
  • 21. Summary: setting the stage 1. Create flex container using display:flex 2. Set its flex-direction to control orientation (horizontal or vertical) 3. Set its flex-wrap to control whether and in which direction to wrap (Or, set flex-flow as shorthand for flexdirection and flex-wrap)
  • 23. Add flexbox for larger widths No need to put within media query—it can “kick in” whenever space allows (auto breakpoints!) 1. Create flex container: .gallery { display: flex; flex-wrap: wrap; margin-left: -20px; }
  • 24. Add flexbox for larger widths 2. Size flex items: .gallery-item { flex: 1 0 200px; margin: 0 0 20px 20px; padding: 20px; }
  • 25. The flex property This is where flexbox gets flexible. And kinda confusing.
  • 26. Defining the flex property   Makes flex items change their width or height (whichever is dimension along main axis) to fit available space Shorthand for 3 properties:  flex-grow  flex-shrink  flex-basis
  • 27. Defining the flex property flex-grow flex-shrink flex-basis how much flex item will grow relative to other items if extra space is available (proportion of extra space that it gets) how much item will shrink relative to others if there is not enough space (proportion of overflow that gets shaved off) the initial starting size before free space is distributed (any standard width/height value, including auto)
  • 28. Breaking it down .gallery-item { flex: 1 0 200px; flex-grow give every item 1 share of extra width flex-shrink don’t let the items shrink at all (but they wouldn’t anyway due to flex-wrap) flex-basis start them out at 200 pixels wide (basically, min-width)
  • 29. Let’s see it flex live
  • 30. Single-digit flex values    Common to see flex: 1 in demos flex: [number] is equivalent to flex: [number] 1 0px Be sure you really want flex-basis to be 0  When wrap on, essentially min-width  0px therefore means items can shrink to 0px  If everything can get down to 0px, nothing ever has a reason to wrap
  • 31. My first attempt Zoe’s Brain Said: “Since .action starts out at 100%, it won’t have space to sit on the first line with the content preceding it, and will wrap to a second line.” .component { .action { flex: 1; } The expected outcome: flex: 1 1 100%; }
  • 33. My first attempt Reality: Since it’s fine for each .component to shrink to only 0px wide, a 100% wide element can and will sit on the same line as all the components. .component { flex: 1 1 0px; } .action { flex: 1 1 100%; }
  • 34. Forcing the wrap Fixed: .action will always wrap to new line, and .components will wrap to additional lines when there’s less space than their combined flexbasis values (plus margin, etc.). .component { flex: 1 1 200px; } .action { flex: 1 1 100%; }
  • 35. Live demo time again
  • 36. Why flex is great
  • 37. Less need for media queries Layout changes that would previously have been hardcoded into a media query can now be done on the fly when browser determines stuff can fit
  • 38. Flex adjusts for margin box-sizing only takes care of padding and border added on to width, not margin The boxes won’t all fit Works like a charm .component { width: 25%; margin-left: 20px; } .component { flex: 1 1 200px; margin-left: 20px; }
  • 39. Flex adjusts for quantity of items  Great for sites with dynamic or frequently changing content blocks, e.g.:  News stories on home page vs inner page  Product or feature tiles  Pricing page with plans side by side  Makes HTML/CSS more modular—an item can move anywhere and adjust in size as needed
  • 40. Flex can combine different units Items measured in different units can sit side-by-side and all fit perfectly Pixels Ems Mystery percentage
  • 41. Flex can combine different units Set only the text field to flex: .component li:last-child { display: flex; } .component .other-name { flex: 1; }
  • 42. Flex can be proportional Setting flex-grow/flex-shrink to different values can make flex items size themselves relative to each other flex: 1; flex: 1; flex: 2;
  • 43. But be careful! Having widths be in multiples of each other only works if flex-basis is 0 flex: 1 0 0px; flex: 1 0 0px; flex: 2 0 0px; If all start out 0px, then all the width on the line is extra, so the flex:2 item gets twice as much width as the others and is thus twice as wide as the others
  • 44. If flex-basis isn’t 0px… …the widths may not end up as you expect flex: 1 0 10px; flex: 1 0 10px; flex: 2 0 10px; 10px + 5px extra = 15px 10px + 5px extra = 15px 10px + 10px extra = 20px if 50px available The third box gets twice as much of the extra, but that doesn’t make it twice as wide overall
  • 45. You can use it now While support improves, consider using flexbox now on small page components as progressive enhancement. Here are a few ideas.
  • 46. Single-line, full-width form    All items on same line Text input(s) stretches to fill remaining space All items vertically centered or equal height
  • 47. Form without flexbox .action { text-align: center; } .action * { display: inline; /* default */ vertical-align: middle; }
  • 48. Form without flexbox All items on same line X Text input stretches to take up remaining space All items vertically centered or equal height 
  • 49. Form with flexbox .action { flex: 1 1 100%; display: flex; align-items: stretch; /* default */ } .action input { flex: 1; } .action input, .action label { margin-right: 10px; }
  • 50. align-items aligns flex items in cross axis flex-start stretch (default) flex-end foo center foo baseline foo
  • 51. Form with flexbox All items on same line Text input stretches to take up remaining space All items vertically centered or equal height
  • 52. Override alignment on label .action label { align-self: center; }
  • 53. Combine the two .action { flex: 1 1 100%; display: flex; text-align: center; /* fallback */ } .action input { flex: 1; } .action label { align-self: center; } .action input, .action label { margin-right: 10px; }
  • 54. Another option: stack, center .action { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; text-align: center; /* fallback */ } .action input { flex: 1; display: block; /* fallback */ width: 100%; /* fallback */ box-sizing: border-box; /* fallback */ } .action button { flex: 1 1 100%; margin-top: 10px; }
  • 55. Narrow version Non-flexbox fallback version Flexbox version
  • 56. Add Modernizr as needed    Flexbox and fallback styles can often co-exist, but sometimes need to isolate them Modernizr can add flexbox, no-flexbox, and flexbox-legacy classes to do this Example: add margin between label and input only if flexbox is on: .flexbox .action label { margin-right: 10px; }
  • 57. Full-width nav bar  Requirements:  All links on same line  First link flush left, last link flush right  Equal spaces between all links  Using display:table-cell can do fullwidth but not equal spaces
  • 58. Nav with flexbox .list-nav { display: flex; justify-content: space-between; margin: 0; padding: 0; list-style: none; } .list-nav li { /* no flex & no width = shrinkwrap */ text-align: center; }
  • 59. justify-content aligns flex items along main axis flex-start (default) center flex-end space-between space-around
  • 60. 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; }
  • 62. Combine with table-cell .list-nav { width: 100%; /* fallback */ display: table; /* fallback */ display: flex; /* override display:table for flexbox browsers */ justify-content: space-between; } .list-nav li { display: table-cell; /* fallback */ padding: 0 .5em; text-align: center; } .list-nav li:first-child { .list-nav li:last-child { padding-left: 0; text-align: left; /* fallback */ } padding-right: 0; text-align: right; }
  • 63. Variation: pagination  Wide view: all links on same line, centered  Set  justify-content:center Medium view: all links on same line, fullwidth, equal spacing  Set justify-content:space-between
  • 64. Variation: pagination  Narrow view: two lines with “previous” and “next” links on first row, full-width  Set flex-wrap:wrap  Set justify-content:space-between  Use order property to move “next” link up
  • 65. Visual reordering with flexbox 1. Make “previous” link come first visually, “next” link second, and all the rest third .pagination li { order: 2; display: inline-block; /* fallback */ } .pagination li:first-child { /* “Previous” link */ order: 0; text-align: left; } .pagination li:last-child { /* “Next” link */ order: 1; text-align: right; }
  • 66. Visual reordering with flexbox 2. Force links to wrap after “next” link by making it and “previous” link take up 100% of the first line together .flexbox .pagination li:first-child, .flexbox .pagination li:last-child { width: 50%; } .pagination { display: flex; flex-wrap: wrap; justify-content: space-between; text-align: center; /* fallback */ }
  • 67. Accessibility implications Pro Con Keep content in logical order in HTML instead of structuring HTML to achieve visual layout Focus/tab order won’t always match expected order, may jump around seemingly randomly
  • 68. Tab order = HTML order “Next” won’t be second link tabbed to after “Previous” since it doesn’t follow it in HTML 1 10 2
  • 69. Limitations of order property    Potential to create confusing tab order Can only rearrange sibling elements Flexbox rows/cols can’t overlap, so content may not always slide into the spot left by the re-ordered content So: reserve flexbox order property for small moves that don’t hurt accessibility, and use CSS3 Grid Layout, etc., for bigger re-ordering
  • 70. Pinned item at bottom   All boxes equal in height Final item in each box pinned to the bottom so that all final items across grid appear to align
  • 71. Pinned item at bottom   Without flexbox, “other” fields disconnected from each other and thus can’t align With flexbox, they’re still disconnected, but their parents aren’t and can be equal height, plus…
  • 72. New “auto” margin behavior   Margins set to auto get all the free space left So, to pin flex item to bottom of its flex container:  set flex-direction:column on flex container so items can fill its height  set margin-top:auto on item you want to pin
  • 73. Pin the “other” fields 1. Make each .component match in height by making parent .builder a flex container (already done) .builder { display: flex; align-items: stretch; /* default */ flex-wrap: wrap; justify-content: space-between; margin: 0 0 40px -20px; }
  • 74. Pin the “other” fields 2. Make each <ul> a flex item and stretch to full height, then make it a flex container with vertical direction so its <li> will stack .component { .component ul { flex: 1 1 200px; flex: 1; display: flex; display: flex; flex-direction: column; flex-direction: column; } margin: 0; padding: 0; list-style: none; }
  • 75. Pin the “other” fields 3. Give “other” <li> an auto top margin so all free space left in <ul> is put above that <li>, pushing it to bottom of <ul> .component li:last-child { margin-top: auto; }
  • 76. Pinning without flexbox    Use display:table-cell for equal height boxes Add bottom padding in ems to each box Use absolute positioning to pin “other” row in space left by padding
  • 77. Variation: two-piece main nav .flexbox .list-nav { justify-content: flex-start; position: relative; top: -70px; } .flexbox #link-home { margin-right:20px; } .flexbox #link-tumblr { margin-left:20px; } .flexbox #link-party { margin-left: auto; }
  • 78. “ I can use it, but why should I? Why go to the trouble to use flexbox as progressive enhancement now?”
  • 79. Develop it as a career skill    Essential layout tool in the future, especially with responsive web design Syntax is not going to change much, so what you learn now will still work later Better to learn something before it’s needed in a project rather than during
  • 80. “ Why should I do it with CSS when I can do the same thing with <font> tags?” –Zoe, circa 2002
  • 81. “ Why should I do it with flexbox when I can do the same thing with floats?”
  • 82. We all learn best by doing    I learned a lot more about flexbox by building demo site for this presentation—a lot Have to try it to learn it Using it for small cosmetic enhancements is low-risk way to try it
  • 83. It’s fun    Great user experience is important, but great developer experience is worthwhile too Enjoy your job to get better at your job Sometimes the little extra time is worth the fun challenge and reward at the end
  • 84. Learn more Download slides and get links at www.zomigi.com/blog/flexbox-presentation Thanks! Zoe Mickley Gillenwater @zomigi design@zomigi.com zomigi.com | stunningcss3.com | flexiblewebbook.com Credit: “S’more” photo by Christopher Penn on Flickr. Looks like that man really knows how to make a good s’mores!