Using Flexbox Today (Generate Sydney 2016)
-
Upload
zoe-gillenwater -
Category
Internet
-
view
930 -
download
0
Transcript of Using Flexbox Today (Generate Sydney 2016)
![Page 1: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/1.jpg)
Flexbox Zoe Mickley Gillenwater @zomigi Generate
September 2016
TODAY
USING
![Page 2: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/2.jpg)
I work for
Psst…you can too: www.workingatbooking.com
![Page 3: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/3.jpg)
My portfolio site from 2000
![Page 4: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/4.jpg)
My portfolio site from 2000
![Page 5: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/5.jpg)
tables
positioning
floats
inline-block
table-cell
flexbox
grid multi-column exclusions
shapes
regions flexbox
![Page 6: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/6.jpg)
when
what
flexbox
how
![Page 7: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/7.jpg)
Deciding when to use and not use flexbox
WHEN 1.
![Page 8: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/8.jpg)
What browsers do I need to support?
Don’t ask yourself this—it’s irrelevant here (IMO)
![Page 9: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/9.jpg)
Flexbox has 96.8% coverage worldwide
We support IE 7-9 at Booking, but still use flexbox as progressive enhancement.
![Page 10: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/10.jpg)
Do I want to create a layout in 1 dimension (row OR column)
or 2 dimensions?
Hat-tip to Rachel Andrew: https://rachelandrew.co.uk/archives/2016/03/30/should-i-use-grid-or-flexbox/
![Page 11: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/11.jpg)
Flexbox is not a grid ¨ Not meant for or great at whole page layout ¨ Flex items only care about space in their
own row/column ¨ They don’t care about lining up in the other
dimension
![Page 12: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/12.jpg)
Demo by Rachel Andrew: http://codepen.io/rachelandrew/pen/YqqdXL
![Page 13: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/13.jpg)
Flexbox is best for: ¨ UI components ¨ Simple whole page layouts (not grid-based) ¨ Enhancing a complex layout’s alignment,
spacing, etc. (not controlling placement)
![Page 14: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/14.jpg)
![Page 15: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/15.jpg)
Do I need my content to dictate sizing and placement, �or do I need to control these?
![Page 16: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/16.jpg)
Content determines boxes’ size and
placement
(Mega-useful when content is unknown and variable, or readability is
a top priority.)
Structure determines content’s size and
placement
(P.S. Flexbox can do this too, if you want. It’s just the reverse that doesn’t
work so well.)
Flexbox Grids
![Page 17: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/17.jpg)
Does flexbox offer me anything �I can’t already get �
from an existing layout method?
![Page 18: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/18.jpg)
New things flexbox offers ¨ Content-driven, unit-less sizes ¨ Content-driven, media-query-less layout changes ¨ Mixed-unit layouts ¨ Equal-height columns ¨ Vertical centering and other alignments ¨ Spacing out or stretching items to fill unknown width/height ¨ Combining content wrapping and block wrapping ¨ Pinning items without overlaps ¨ Visual order different than HTML/reading order
![Page 19: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/19.jpg)
Components flexbox can enhance and UI/UX problems it can help you solve
WHAT 2.
![Page 20: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/20.jpg)
content-driven, unit-less sizes
![Page 21: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/21.jpg)
How big do I make this thing?
![Page 22: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/22.jpg)
%�em/rem�vw/vh
![Page 23: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/23.jpg)
Relative units of measurement are your best guess at the
ideal, but they’re still a guess.
![Page 24: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/24.jpg)
Flexbox gets us closer to the ideal, because it lets us design
without units.
![Page 25: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/25.jpg)
Content-driven sizing on Booking.com Last year’s sidebar searchbox design, with fixed-width select fields
![Page 26: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/26.jpg)
Content-driven sizing on Booking.com Non-flexbox Flexbox enhanced
![Page 27: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/27.jpg)
Content-driven sizing on Booking.com .sb-dates { display: flex;
}
.sb-dates__icon {
flex: 0 0 23px;
} .sb-dates__select-day {
flex: 1 0 auto;
margin: 0 6px;
}
.sb-dates__select-month { flex: 1 1 auto;
}
flex container
main axis flex items
![Page 28: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/28.jpg)
Translating the flex property .sb-dates { display: flex;
}
.sb-dates__icon {
flex: 0 0 23px;
} .sb-dates__select-day {
flex: 1 0 auto;
margin: 0 6px;
}
.sb-dates__select-month { flex: 1 1 auto;
}
Start out 23px wide, and don’t grow or shrink further
Start out sized to your content, then grow with 1 share of any extra space available, but don’t ever shrink
Start out sized to your content, then grow with 1 share of extra space, but if there’s an overflow shrink
![Page 29: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/29.jpg)
Mixed-unit layout is easier with calc(), but not even it can do: calc(100% - 23px - the width of the day field in Greek)
![Page 30: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/30.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 31: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/31.jpg)
Taking advantage of variable space Problem: the gap is not always big enough to hold a sentence of text
![Page 32: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/32.jpg)
Taking advantage of variable space Solution: use flexbox to place text beside price when space allows; otherwise, it can wrap below price and stretch
Not possible with floats, inline-block Not possible with table-cell
![Page 33: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/33.jpg)
Progressive enhancement Non-flexbox Flexbox enhanced
![Page 34: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/34.jpg)
RWD content-driven layout change Narrow: 1 column Wide: 2 columns
![Page 35: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/35.jpg)
Layout change without media query 1. Let the blocks wrap and stack when needed:
.article-header { display: flex; flex-direction: row; flex-wrap: wrap; }
/* default */
![Page 36: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/36.jpg)
Switching between columns and rows
flex-direction: column
or
flex-direction: row flex-wrap: wrap (or the shorthand flex-flow: row wrap)
@media min-width... flex-direction: row
1 column when narrow Multiple rows when wide
Same, no change needed
![Page 37: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/37.jpg)
Layout change without media query 2. Size the blocks to control their wrapping
point: .article-header-image { flex: 1 1 320px; padding-left: 20px; } .article-header-text {
flex: 1 1 20em; padding-left: 20px; }
< 100% = 1 row, 2 columns > 100% = wrap to 2 rows
![Page 38: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/38.jpg)
Stretching to fill unknown width/height
flex: 1 1 auto
align-content: space-between
![Page 39: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/39.jpg)
Improved wrapping in RWD layout With float or text-align With flex or justify-content
![Page 40: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/40.jpg)
Flexbox is great for spacing and aligning stuff, especially
shifting content in RWD.
![Page 41: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/41.jpg)
full width�full height�
equally spaced
![Page 42: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/42.jpg)
Full-width nav bar with equal spacing
Non-flexbox fallback version
Flexbox version
http://codepen.io/zomigi/pen/vKjbbY/
![Page 43: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/43.jpg)
Full-width nav bar with equal spacing .menu-list { display: flex;
justify-content: space-between;
margin: 0;
padding: 0;
list-style: none; text-align: center; /* fallback */
}
.menu-list-item {
display: inline-block; /* fallback */
padding: 0 .5em; /* fallback */ }
Equally spaces items across main axis (width in this case)
![Page 44: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/44.jpg)
Full-height menu with equal spacing
![Page 45: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/45.jpg)
Full-height menu with equal spacing
.menu-list { display: flex;
flex-direction: column;
justify-content: space-between;
}
.menu-list-item { height: 100%;
display: flex;
align-items: center;
}
.menu-list { display: flex;
flex-direction: column;
}
.menu-list-item {
flex: 1 0 auto; display: flex;
align-items: center;
}
justify-content version flex version
![Page 46: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/46.jpg)
Full-height menu with equal spacing
.menu-list { display: flex;
flex-direction: column;
justify-content: space-between;
}
.menu-list-item { height: 100%;
display: flex;
align-items: center;
}
.menu-list { display: flex;
flex-direction: column;
}
.menu-list-item {
flex: 1 0 auto; display: flex;
align-items: center;
}
justify-content version flex version
![Page 47: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/47.jpg)
Flexbox can also enhance visual ordering.
![Page 48: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/48.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 49: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/49.jpg)
Reorder for good, not evil.
![Page 50: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/50.jpg)
Demo: moving a photo on mobile
![Page 51: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/51.jpg)
Demo: moving a photo on mobile Desktop: HTML order (no flexbox) Mobile: reordered
![Page 52: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/52.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%; }
![Page 53: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/53.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 54: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/54.jpg)
Demo: moving a photo on mobile Flexbox enhanced Non-flexbox
![Page 55: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/55.jpg)
These examples don’t look wrong or broken without flexbox. �
�Flexbox just enhances their sizing
and spacing to look better.
![Page 56: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/56.jpg)
Step-by-step process for adding flexbox to your UI components effectively
HOW 3.
![Page 57: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/57.jpg)
Don’t freak out
![Page 58: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/58.jpg)
Decide whether flexbox is the right tool for the job
![Page 59: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/59.jpg)
Decide which versions of flexbox to support
standard, 2011/2012, and/or 2009
![Page 60: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/60.jpg)
Browser support approaches to choose ¨ Use only the non-prefixed, standard syntax ¨ … plus browser-prefixed versions of
standard syntax ¨ … plus -ms- prefixed 2011/2012 syntax ¨ … plus -webkit- prefixed 2009 syntax
http://caniuse.com/#feat=flexbox
![Page 61: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/61.jpg)
I recommend you skip the ‘09 syntax ¨ It’s slower to render than current syntax* ¨ Doesn’t support wrapping ¨ Its browsers have small market share ¨ If using flexbox for progressive
enhancement, its browsers can get same fallback given to non-supporting browsers
* http://updates.html5rocks.com/2013/10/Flexbox-layout-isn-t-slow
![Page 62: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/62.jpg)
Let tools add browser variants for you Which variants do you want? Best tool to handle that
All the things! Autoprefixer Bourbon (Sass)
Only the standard syntax, with and without prefixes
Compass (Sass)
Some other combination (such as everything except 2009)
Sass or LESS mixins, such as https://github.com/mastastealth/ sass-flex-mixin
![Page 63: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/63.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 64: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/64.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
But IE 10-11, which do support flexbox but don’t support @supports, won’t get these styles
![Page 65: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/65.jpg)
Choose and add appropriate starter/fallback layout CSS
![Page 66: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/66.jpg)
Things to consider Do I need content blocks to wrap? not table-cell
Do I want to prevent blocks from wrapping? floats, inline-block, but table-cell best
Do I need content-driven sizes? floats, but table-cell or inline-block best
Do I need vertical alignment? inline-block, table-cell
Do I need horizontal alignment? floats, table-cell, inline-block only with preset sizes
![Page 67: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/67.jpg)
Pick your starter layout CSS
¨ Floats ¨ table-cell ¨ inline-block
¨ Absolute positioning
Flexbox will override: Flexbox will not override:
Just use whatever you normally would; flexbox plays nicely with most of them.
![Page 68: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/68.jpg)
A real example of this process
![Page 69: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/69.jpg)
Split left-right layout Task: lay out review score and price, on opposite sides of same line Needs: ¨ content-driven sizing ¨ horizontal alignment ¨ wrapping
score price or “sold out”
![Page 70: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/70.jpg)
Adding the starter CSS .iw_mini_review_score_wrapper { float: left; } .iw_mini_price_wrapper { float: right; }
![Page 71: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/71.jpg)
Start adding flexbox!
![Page 72: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/72.jpg)
Decide whether entire component needs to be �
block or inline-block display:flex or inline-flex
![Page 73: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/73.jpg)
Creating the block flex container .iw_mini_details_wrapper { display: flex; } .iw_mini_review_score_wrapper { float: left;
} .iw_mini_price_wrapper { float: right; }
Flex container sits on a new row below, like a block element
![Page 74: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/74.jpg)
Decide flow of flex items
![Page 75: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/75.jpg)
Things to consider Lay out horizontally or vertically? flex-direction:row or
column
Allow boxes to wrap? flex-wrap:wrap, wrap-reverse or nowrap
Order different than source? order values; flex-direction: row-reverse or column-reverse
![Page 76: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/76.jpg)
Allowing wrapping .iw_mini_details_wrapper { display: flex; flex-wrap: wrap; } .iw_mini_review_score_wrapper {
float: left; } .iw_mini_price_wrapper { float: right; }
Allows second block to wrap down if needed
![Page 77: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/77.jpg)
Decide which items can �grow to fill space, �
shrink to avoid overflow, �or must stay at a certain size
![Page 78: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/78.jpg)
Tips for setting flex values ¨ Write out full flex values, rather than
using single-digit and keyword values ¤ flex: 1 1 0% instead of flex: 1 ¤ Hidden default values can lead to mistakes ¤ Avoids IE 10-11 bugs
¨ Think about it backwards: first decide flex-basis, then -shrink, then -grow
![Page 79: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/79.jpg)
Tips for setting flex-basis values ¨ Acts like min-width when wrapping on ¨ If flex-wrap off and flex-shrink on,
browser can go smaller than flex-basis ¨ Be careful with flex-basis:0 when
wrapping ¨ Use flex-basis:auto whenever possible
![Page 80: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/80.jpg)
Setting flex-shrink ¨ Always have at least 1 item per line that
can shrink (or wrap, or both)
![Page 81: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/81.jpg)
Setting flex-grow ¨ Decide what to do with extra space
¤ Fill it up? (flex-grow: 1, 2, etc.) ¤ Leave it? (flex-grow: 0)
![Page 82: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/82.jpg)
Setting flex values .iw_mini_details_wrapper { display: flex; flex-wrap: wrap; } .iw_mini_review_score_wrapper {
float: left; flex: 0 1 auto; } .iw_mini_price_wrapper { float: right;
flex: 0 1 auto; }
Size to content, shrink smaller if you have to, don’t grow bigger (default value)
![Page 83: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/83.jpg)
Decide how to align flex items
![Page 84: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/84.jpg)
Main axis alignment
(horizontal when row, vertical when column)
Cross axis alignment
(vertical when row, horizontal when column)
(P.S. Also responsible for
equal-height columns)
justify-content align-items
![Page 85: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/85.jpg)
Controlling alignment .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; }
Moves first item to left, last item to right
![Page 86: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/86.jpg)
Improved wrapping Non-flexbox Flexbox enhanced
![Page 87: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/87.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 88: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/88.jpg)
Test
![Page 89: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/89.jpg)
Testing your flexbox ¨ If using Modernizr: Too Flexy bookmarklet
for toggling Modernizr flexbox classes: http://chriswrightdesign.github.io/tooflexy/
¨ If reordering: check tabbing and screen reading order to make sure it’s still logical
![Page 90: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/90.jpg)
Fix bugs
![Page 91: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/91.jpg)
Fixing browsers’ flexbox bugs ¨ Read explanations and workarounds by
Philip Walton: https://github.com/philipwalton/flexbugs
¨ Let PostCSS fix some for you: https://github.com/luisrudge/postcss-flexbugs-fixes
![Page 92: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/92.jpg)
Summing up the process 1. Decide whether to use flexbox and which browser
versions of it 2. Choose and add starter layout CSS 3. Choose and add flexbox CSS
1. Block or inline-block container 2. Flow 3. Flex to control sizing 4. Alignment
4. Test and fix bugs
![Page 93: Using Flexbox Today (Generate Sydney 2016)](https://reader036.fdocuments.in/reader036/viewer/2022081515/58705a551a28aba2118b6539/html5/thumbnails/93.jpg)
Flexbox is not for the future.�You can use flexbox today.