Enhancing Responsiveness With Flexbox (Smashing Conference)
-
Upload
zoe-gillenwater -
Category
Technology
-
view
2.950 -
download
1
Transcript of Enhancing Responsiveness With Flexbox (Smashing Conference)
![Page 1: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/1.jpg)
Flexbox Zoe Mickley Gillenwater @zomigi SmashingConf
March 2015
Enhancing
WITH Responsiveness
![Page 2: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/2.jpg)
I used to make fixed-width sites… 2
![Page 3: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/3.jpg)
…with tables 3
![Page 4: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/4.jpg)
I even wrote a book about it in 2008.
Then I got into CSS “liquid” layout 4
![Page 5: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/5.jpg)
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
![Page 6: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/6.jpg)
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
![Page 7: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/7.jpg)
![Page 8: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/8.jpg)
Use flexbox now on UI components as progressive enhancement.
You can use flexbox now 8
![Page 9: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/9.jpg)
“Easy for you to say.�I have to support IE 8.”
– You, maybe
![Page 10: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/10.jpg)
“I work for Booking.com,�and we support IE 7,�and I use flexbox.”
– Me
![Page 11: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/11.jpg)
Progressive enhancement possibilities ¨ Align items in new ways ¨ Fill up the gaps in your layout ¨ Reorder decorative content ¨ Increase responsiveness
11
![Page 12: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/12.jpg)
Responsiveness is a continuum. Flexbox can help make your site more responsive.
RWD is not binary 12
![Page 13: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/13.jpg)
Flexbox and RWD
Make better use of the space at all screen sizes
Reorder content at different screen sizes
13
Space
Placement
![Page 14: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/14.jpg)
Making better use of space 14
![Page 15: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/15.jpg)
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
![Page 16: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/16.jpg)
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
![Page 17: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/17.jpg)
Demo: horizontal navigation
Non-flexbox fallback version
Flexbox version
17
![Page 18: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/18.jpg)
Making it full-width ¨ All links on same line ¨ First link flush left, last link flush right ¨ Equal spaces between all links
18
![Page 19: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/19.jpg)
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
![Page 20: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/20.jpg)
Spacing with table-layout:fixed 20
![Page 21: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/21.jpg)
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
![Page 22: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/22.jpg)
justify-content 22
aligns flex items along main axis
space-around
flex-end center
flex-start (default)
space-between
![Page 23: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/23.jpg)
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
![Page 24: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/24.jpg)
Combine with inline-block
Non-flexbox fallback version
Flexbox version
24
![Page 25: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/25.jpg)
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
![Page 26: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/26.jpg)
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
![Page 27: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/27.jpg)
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
![Page 28: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/28.jpg)
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
![Page 29: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/29.jpg)
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
![Page 30: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/30.jpg)
A more responsive nav bar 30
![Page 31: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/31.jpg)
Content blocks’ height varies in RWD, and flexbox can also help you make better use of varying vertical space
This works vertically too 31
![Page 32: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/32.jpg)
Demo: full-height stacked icons
.wrapper
.ico
ns
.content
32
![Page 33: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/33.jpg)
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
![Page 34: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/34.jpg)
align-items 34
aligns flex items in cross axis
flex-start flex-end
center baseline
stretch (default)
foo foo foo
![Page 35: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/35.jpg)
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
![Page 36: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/36.jpg)
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
![Page 37: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/37.jpg)
Demo: full-height stacked icons 37
![Page 38: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/38.jpg)
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
![Page 39: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/39.jpg)
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
![Page 40: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/40.jpg)
Fallback alignment options 40
Top-aligned (float) Centered (table-cell)
![Page 41: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/41.jpg)
Combining units of measurement across a line can make RWD tricky.
ems + % + px + [blank] = ??? 41
![Page 42: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/42.jpg)
Demo: responsive form 42
Inspired by http://jobs.theguardian.com/, which uses floats and percentage widths
![Page 43: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/43.jpg)
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
![Page 44: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/44.jpg)
Enhance with flexbox 44
1. Let the fields wrap when needed: .jobs-form { display: flex; flex-wrap: wrap; }
![Page 45: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/45.jpg)
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%; }
![Page 46: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/46.jpg)
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; } }
![Page 47: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/47.jpg)
Defining the flex property Makes flex items change their main size (width or height) to fit available space
47
![Page 48: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/48.jpg)
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
![Page 49: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/49.jpg)
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
![Page 50: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/50.jpg)
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
![Page 51: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/51.jpg)
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
![Page 52: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/52.jpg)
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.
![Page 53: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/53.jpg)
The flexbox form so far 53
flex-basis: 100%
flex-basis: auto
![Page 54: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/54.jpg)
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; } }
![Page 55: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/55.jpg)
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
![Page 56: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/56.jpg)
Smarter sizing 56
Non-flexbox
Flexbox enhanced
![Page 57: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/57.jpg)
Content-driven breakpoints aren’t perfect.
![Page 58: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/58.jpg)
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
![Page 59: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/59.jpg)
The form without flexbox
Narrow: inputs stack Wide: not quite full-width
see?
59
![Page 60: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/60.jpg)
Demo: responsive article header
¨ No media query ¨ display: block
¨ 50em media query ¨ display: table-cell
60
Narrow starting styles Wide starting styles
![Page 61: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/61.jpg)
Enhance with flexbox 61
.article-header
.article-header-image
.article-header-text
![Page 62: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/62.jpg)
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;
}
![Page 63: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/63.jpg)
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;
}
![Page 64: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/64.jpg)
Demo: responsive article header 64
flex: 1 1 auto
align-content: space-between
![Page 65: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/65.jpg)
Improved wrapping 65
With float or text-align With flex or justify-content
![Page 66: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/66.jpg)
A real-world wrapping example Without flexbox (IE 9) With flexbox (Chrome)
66
![Page 67: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/67.jpg)
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
![Page 68: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/68.jpg)
Reordering content 68
![Page 69: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/69.jpg)
Remember this? 69
![Page 70: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/70.jpg)
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
![Page 71: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/71.jpg)
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
![Page 72: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/72.jpg)
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>
![Page 73: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/73.jpg)
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
![Page 74: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/74.jpg)
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
![Page 75: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/75.jpg)
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
![Page 76: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/76.jpg)
Demo: moving a photo on mobile Desktop: HTML order (no flexbox) Mobile: reordered
76
![Page 77: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/77.jpg)
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
![Page 78: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/78.jpg)
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
![Page 79: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/79.jpg)
Demo: moving a photo on mobile Flexbox version Non-flexbox version
79
![Page 80: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/80.jpg)
The Guardian: opposite approach 80
Stacking order you see when narrow is the HTML order, unchanged
1
2
3
4
5
6
![Page 81: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/81.jpg)
The Guardian: opposite approach 81
Reordered when wide, but not using order 1 2 3
4 5 6
flex-direction: row-reverse
flex-direction: row-reverse
![Page 82: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/82.jpg)
Using flexbox today 82
![Page 83: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/83.jpg)
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.4 v.11
*
v.7+
*
83
![Page 84: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/84.jpg)
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
![Page 85: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/85.jpg)
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
![Page 86: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/86.jpg)
Adding Modernizr classes with Sass 86
@mixin supports-flexbox($support) { @if $support == yes { .flexbox & { @content } } @if $support == no { .no-flexbox & { @content } }
}
![Page 87: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/87.jpg)
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; } }
![Page 88: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/88.jpg)
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; }
![Page 89: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/89.jpg)
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.
![Page 90: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/90.jpg)
Flexbox is not ALL or NOTHING
![Page 91: Enhancing Responsiveness With Flexbox (Smashing Conference)](https://reader033.fdocuments.us/reader033/viewer/2022042615/55a524431a28ab57018b4605/html5/thumbnails/91.jpg)
Learn more 91
Download slides and get links at www.zomigi.com/blog/rwd-flexbox
Thanks! Zoe Mickley Gillenwater @zomigi [email protected] zomigi.com | stunningcss3.com | flexiblewebbook.com Photo credits: “oh.my.goshk” by Abulic Monkey and “A Cone Undone” by patersor on Flickr.