![Page 1: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/1.jpg)
Flexbox Zoe Mickley Gillenwater @zomigi CSS Conf EU
September 2015
Enhancing
WITH Responsiveness
![Page 2: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/2.jpg)
I work for
![Page 3: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/3.jpg)
![Page 4: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/4.jpg)
![Page 5: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/5.jpg)
![Page 6: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/6.jpg)
802,000+ properties�42 languages�54 currencies
![Page 7: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/7.jpg)
Content extremes on Booking.com Shortest property name: 2 characters
Longest property name: 109 characters
![Page 8: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/8.jpg)
How big do I make this thing?
![Page 9: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/9.jpg)
%�em/rem�vw/vh
![Page 10: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/10.jpg)
Relative units of measurement are your best guess at the
ideal, but they’re still a guess.
![Page 11: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/11.jpg)
Flexbox gets us closer to the ideal, because it lets us design
without units.
![Page 12: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/12.jpg)
Example: a responsive form from http://jobs.theguardian.com/
![Page 13: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/13.jpg)
My copy of that form Same floats, same percentage widths
![Page 14: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/14.jpg)
The trouble with explicit sizing Since the select and button are sized by a percentage, not sized automatically by their content, this can happen:
Box too small for its content Box too big for its content
![Page 15: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/15.jpg)
Use the flex property instead Tells browser starting size (including content size) and whether item can grow or shrink
width: 33.333% flex: auto
Fill up remaining space
width: 16.666% flex: none
Size to content exactly
![Page 16: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/16.jpg)
Form fields are a pain in the butt The fields and button don’t all match each other exactly in height
![Page 17: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/17.jpg)
Fix alignment with flexbox Turn each field wrapper into flex container so field inside will stretch to match height of its line:
.flexbox .jobs-form_field-wrapper { display: flex; align-items: stretch; /* default */ width: auto; }
Fields misaligned without flexbox Fields match height due to align-items
![Page 18: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/18.jpg)
Smarter sizing
Non-flexbox
Flexbox enhanced
![Page 19: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/19.jpg)
Content-driven breakpoints aren’t perfect.
![Page 20: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/20.jpg)
Automatic breakpoint with flexbox Booking’s responsive customer service form doesn’t use any media queries
http://www.booking.com/content/cs.html
![Page 21: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/21.jpg)
All of the CSS for those 2 layouts form.cs-message { display: flex; flex-flow: row wrap; margin-right: -10px; } input.cs-message__text { flex: 1 0 40%; width: 43%; /* fallback */ float: left; /* fallback */ margin-right: 10px; padding: 8px 10px; }
1 property creates 2 responsive layouts, both always full width
![Page 22: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/22.jpg)
Layout change without media query 1. Let the fields wrap when needed:
form.cs-message { display: flex; flex-direction: row; flex-wrap: wrap; margin-right: -10px; }
/* default */
![Page 23: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/23.jpg)
Layout change without media query 2. Size the fields to control their wrapping
point: input.cs-message__text { flex: 1 0 40%; width: 43%; /* fallback */ float: left; /* fallback */ margin-right: 10px; padding: 8px 10px; }
![Page 24: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/24.jpg)
Defining the flex property Makes flex items change their main size (width or height) to fit available space
![Page 25: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/25.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)
![Page 26: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/26.jpg)
Breaking down the flex property input.cs-message__text { flex: 1 0 40%; width: 43%; float: left; margin-right: 10px; padding: 8px 10px; }
flex-basis = 40% start field at 40% wide
flex-shrink = 0 don’t shrink smaller than starting width
flex-grow = 1 give it 1 share of any extra width on its line
![Page 27: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/27.jpg)
In other words…
input.cs-message__text { flex: 1 0 40%; width: 43%; float: left; margin-right: 10px; padding: 8px 10px; }
Not enough space for 2 40% wide items plus their pixel margin and padding, so only 1 allowed per line, which then stretches wider than 40% to fill its line
Enough space for 2 per line, which both stretch equally as needed to fill
![Page 28: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/28.jpg)
Taking advantage of variable space Task: add a message about low availability of the room price shown: “We have only X left on our site!”
How about right here in this lovely big gap?
![Page 29: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/29.jpg)
Taking advantage of variable space Problem: the gap is not always big enough to hold a sentence of text
![Page 30: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/30.jpg)
Taking advantage of variable space Solution: use flexbox to place text beside price when space allows; otherwise, it can wrap below price
![Page 31: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/31.jpg)
Taking advantage of variable space Non-flexbox Flexbox enhanced
![Page 32: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/32.jpg)
Improved wrapping Non-flexbox Flexbox enhanced
![Page 33: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/33.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; }
Flexbox properties on container override floating automatically in supporting browsers
Floating gets used by old browsers
![Page 34: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/34.jpg)
Improved wrapping in RWD layout 34
flex: 1 1 auto
align-content: space-between
![Page 35: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/35.jpg)
Improved wrapping in RWD layout With float or text-align With flex or justify-content
![Page 36: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/36.jpg)
Flexbox is great for aligning stuff, especially shifting
content in RWD.
![Page 37: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/37.jpg)
Demo: full-width nav bar ¨ All links on same line ¨ First link flush left, last link flush right ¨ Equal spaces between all links
![Page 38: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/38.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
![Page 39: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/39.jpg)
Spacing with table-layout:fixed
![Page 40: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/40.jpg)
Starter centered nav bar Without flexbox: .list-nav { margin: 0; padding: 0;
list-style: none; text-align: center; } .list-nav li { display: inline-block;
padding: 0 .5em; text-align: center; } .list-nav li:first-child { padding-left: 0; }
.list-nav li:last-child { padding-right: 0; }
![Page 41: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/41.jpg)
Enhanced to be full-width .list-nav { display: flex; justify-content: space-between; margin: 0; padding: 0;
list-style: none; text-align: center; /* fallback */ } .list-nav li { display: inline-block; /* fallback */
padding: 0 .5em; /* fallback */ text-align: center; } .list-nav li:first-child { padding-left: 0; } .list-nav li:last-child { padding-right: 0; }
![Page 42: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/42.jpg)
Combine with inline-block
Non-flexbox fallback version
Flexbox version
![Page 43: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/43.jpg)
Improve the wide layout Wide: too stretched out
A more responsive enhancement
![Page 44: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/44.jpg)
Wide variation: two-piece main nav 1. Add media query for wide width:
@media (min-width:860px) { }
2. Add link to Modernizr: <script src="js/modernizr.js"></script>
<html class="flexbox">
Supporting browsers:
<html class="no-flexbox">
Non-supporting browsers:
![Page 45: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/45.jpg)
Add Modernizr as needed with flexbox Flexbox and fallback styles can often co-exist, but sometimes need to isolate them
http://zomigi.com/blog/using-modernizr-with-flexbox/
![Page 46: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/46.jpg)
Or use @supports .gallery-item { display: inline-block; } @supports (flex-wrap: wrap) { .gallery { display: flex; flex-wrap: wrap; } }
https://developer.mozilla.org/en-US/docs/Web/CSS/@supports
![Page 47: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/47.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; } }
![Page 48: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/48.jpg)
Wide variation: two-piece main nav
4. Add margins to control extra space in line: .flexbox .link-party { margin-left: auto; } .flexbox .link-home { margin-right: 15px; } .flexbox .link-tumblr { margin-left: 15px; }
(margin)
![Page 49: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/49.jpg)
A more responsive nav bar
![Page 50: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/50.jpg)
This works vertically too.
![Page 51: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/51.jpg)
Demo: full-height stacked icons
.wrapper
.ico
ns
.content
![Page 52: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/52.jpg)
Demo: full-height stacked icons 1. Turn children .icons and .content into
side-by-side, equal-height flex items .wrapper { display: flex; align-items: stretch; /* default */ }
![Page 53: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/53.jpg)
Only children become flex items
So these 2 children are the flex items
This is the flex container
These 3 grandchildren aren’t flex items (yet)
![Page 54: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/54.jpg)
Demo: full-height stacked icons 2. Turn .icons into flex container with
vertically stacked children (the 3 icons): .icons { display: flex; flex-direction: column; /* main axis */ }
![Page 55: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/55.jpg)
Demo: full-height stacked icons 3. Equally space the 3 icons along the vertical
main axis: .icons { display: flex; flex-direction: column; justify-content: space-between; }
![Page 56: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/56.jpg)
Demo: full-height stacked icons
![Page 57: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/57.jpg)
Fallback alignment options Top-aligned (float) Centered (table-cell)
![Page 58: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/58.jpg)
These examples don’t look wrong or broken without flexbox. �
�Flexbox just enhances their sizing
and spacing to look better.
![Page 59: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/59.jpg)
Flexbox can also enhance visual ordering.
![Page 60: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/60.jpg)
Remember this?
.flexbox .list-nav { position: relative; top: -70px; }
.flexbox .link-party { margin-left: auto; } .flexbox .link-home { margin-right: 15px; } .flexbox .link-tumblr { margin-left: 15px; }
Nav overlaps logo’s line, so link text could overlap logo if viewport too narrow or text too big
![Page 61: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/61.jpg)
order integer to specify flow order of flex items
0 0 0 default source order 0 0
1 0 0 re-ordered 0 0
0 0 -1 re-ordered 0 0
2 1 0 re-ordered 1 0
![Page 62: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/62.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 */ }
(margin)
![Page 63: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/63.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;
}
![Page 64: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/64.jpg)
Order only works on siblings To move logo to middle of list, it needs to be part of list <div class="logo"><img src="images/logo.png"></div>
<ul class="list-nav"> <li class="logo"><img src="images/logo.png"></li> <li class="link-home"><a>home</a></li> <li class="link-builder"><a>s'mores builder</a></li> <li class="link-party"><a>throw a party</a></li> <li class="link-tumblr"><a>tumblr</a></li> </ul>
![Page 65: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/65.jpg)
Reorder for good, not evil.
![Page 66: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/66.jpg)
Demo: moving a photo on mobile
![Page 67: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/67.jpg)
Demo: moving a photo on mobile Desktop: HTML order (no flexbox) Mobile: reordered
![Page 68: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/68.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
![Page 69: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/69.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%; } }
![Page 70: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/70.jpg)
Demo: moving a photo on mobile Flexbox enhanced Non-flexbox
![Page 71: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/71.jpg)
Reordering on The Guardian
1 2 3
4 5 6
flex-direction: row-reverse
flex-direction: row-reverse
1
2
3
4
5
6
![Page 72: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/72.jpg)
Flexbox requires a mental shift in how you think about and
approach layout.
![Page 73: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/73.jpg)
RWD is not binary.�Responsiveness is a continuum.�
�Flexbox can help make your site
more responsive.
![Page 74: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/74.jpg)
Flexbox is not all nothing
or
![Page 75: Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)](https://reader031.vdocuments.mx/reader031/viewer/2022022413/58edc7331a28ab046e8b46ad/html5/thumbnails/75.jpg)
Thanks!
Zoe Mickley Gillenwater @zomigi [email protected] zomigi.com | stunningcss3.com | flexiblewebbook.com
Photo credits: “Currywurst mit Pommes” by Jessica Spengler and “lecker war’s” by Mike Herbst on Flickr.