Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Using Flexbox Today (Generate Sydney 2016)

1,161 views

Published on

With solidified syntax and great browser support, flexbox, the CSS layout module that can make your layouts more flexible and responsive with ease, is finally ready to be used in your real-world work. We’ll talk about the when, what, and how of using flexbox today: when it’s a great choice use flexbox (and when not to), what UI and UX problems it can help you solve, and how to add it to your layouts in a robust way that doesn’t harm non-supporting browsers or accessibility. You’ll learn a step-by-step process for deciding on and deploying flexbox, with lots of examples along the way of flexbox in the wild.

Published in: Internet

Using Flexbox Today (Generate Sydney 2016)

  1. 1. Flexbox Zoe Mickley Gillenwater @zomigiGenerate September 2016 TODAY USING
  2. 2. I work for Psst…you can too: www.workingatbooking.com
  3. 3. My portfolio site from 2000
  4. 4. My portfolio site from 2000
  5. 5. tables positioning floats inline-block table-cell flexbox grid multi-column exclusions shapes regions flexbox
  6. 6. when what flexbox how
  7. 7. Deciding when to use and not use flexbox WHEN 1.
  8. 8. What browsers do I need to support? Don’t ask yourself this—it’s irrelevant here (IMO)
  9. 9. Flexbox has 96.8% coverage worldwide We support IE 7-9 at Booking, but still use flexbox as progressive enhancement.
  10. 10. 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/
  11. 11. 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
  12. 12. Demo by Rachel Andrew: http://codepen.io/rachelandrew/pen/YqqdXL
  13. 13. Flexbox is best for: ¨  UI components ¨  Simple whole page layouts (not grid-based) ¨  Enhancing a complex layout’s alignment, spacing, etc. (not controlling placement)
  14. 14. Do I need my content to dictate sizing and placement, or do I need to control these?
  15. 15. 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
  16. 16. Does flexbox offer me anything I can’t already get from an existing layout method?
  17. 17. 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
  18. 18. Components flexbox can enhance and UI/UX problems it can help you solve WHAT 2.
  19. 19. content-driven, unit-less sizes
  20. 20. How big do I make this thing?
  21. 21. % em/rem vw/vh
  22. 22. Relative units of measurement are your best guess at the ideal, but they’re still a guess.
  23. 23. Flexbox gets us closer to the ideal, because it lets us design without units.
  24. 24. Content-driven sizing on Booking.com Last year’s sidebar searchbox design, with fixed-width select fields
  25. 25. Content-driven sizing on Booking.com Non-flexbox Flexbox enhanced
  26. 26. 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
  27. 27. 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
  28. 28. Mixed-unit layout is easier with calc(), but not even it can do: calc(100% - 23px - the width of the day field in Greek)
  29. 29. 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?
  30. 30. Taking advantage of variable space Problem: the gap is not always big enough to hold a sentence of text
  31. 31. 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
  32. 32. Progressive enhancement Non-flexbox Flexbox enhanced
  33. 33. RWD content-driven layout change Narrow: 1 column Wide: 2 columns
  34. 34. 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 */
  35. 35. 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
  36. 36. 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
  37. 37. Stretching to fill unknown width/height flex: 1 1 auto align-content: space-between
  38. 38. Improved wrapping in RWD layout With float or text-align With flex or justify-content
  39. 39. Flexbox is great for spacing and aligning stuff, especially shifting content in RWD.
  40. 40. full width full height equally spaced
  41. 41. Full-width nav bar with equal spacing Non-flexbox fallback version Flexbox version http://codepen.io/zomigi/pen/vKjbbY/
  42. 42. 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)
  43. 43. Full-height menu with equal spacing
  44. 44. 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
  45. 45. 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
  46. 46. Flexbox can also enhance visual ordering.
  47. 47. 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
  48. 48. Reorder for good, not evil.
  49. 49. Demo: moving a photo on mobile
  50. 50. Demo: moving a photo on mobile Desktop: HTML order (no flexbox)Mobile: reordered
  51. 51. 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%; }
  52. 52. Turn off flexbox in desktop styles @media screen and (min-width:800px) { .recipe { display: block; /* turn off flexbox */ } .recipe figure { float: right; width: 55%; } }
  53. 53. Demo: moving a photo on mobile Flexbox enhanced Non-flexbox
  54. 54. These examples don’t look wrong or broken without flexbox. Flexbox just enhances their sizing and spacing to look better.
  55. 55. Step-by-step process for adding flexbox to your UI components effectively HOW 3.
  56. 56. Don’t freak out
  57. 57. Decide whether flexbox is the right tool for the job
  58. 58. Decide which versions of flexbox to support standard, 2011/2012, and/or 2009
  59. 59. 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
  60. 60. 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
  61. 61. 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
  62. 62. 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/
  63. 63. 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
  64. 64. Choose and add appropriate starter/fallback layout CSS
  65. 65. 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
  66. 66. 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.
  67. 67. A real example of this process
  68. 68. 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”
  69. 69. Adding the starter CSS .iw_mini_review_score_wrapper { float: left; } .iw_mini_price_wrapper { float: right; }
  70. 70. Start adding flexbox!
  71. 71. Decide whether entire component needs to be block or inline-block display:flex or inline-flex
  72. 72. 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
  73. 73. Decide flow of flex items
  74. 74. 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
  75. 75. 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
  76. 76. Decide which items can grow to fill space, shrink to avoid overflow, or must stay at a certain size
  77. 77. 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
  78. 78. 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
  79. 79. Setting flex-shrink ¨  Always have at least 1 item per line that can shrink (or wrap, or both)
  80. 80. Setting flex-grow ¨  Decide what to do with extra space ¤  Fill it up? (flex-grow: 1, 2, etc.) ¤  Leave it? (flex-grow: 0)
  81. 81. 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)
  82. 82. Decide how to align flex items
  83. 83. 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
  84. 84. 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
  85. 85. Improved wrapping Non-flexbox Flexbox enhanced
  86. 86. 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
  87. 87. Test
  88. 88. 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
  89. 89. Fix bugs
  90. 90. 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
  91. 91. 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
  92. 92. Flexbox is not for the future. You can use flexbox today.
  93. 93. Thanks! Zoe Mickley Gillenwater @zomigi design@zomigi.com zomigi.com

×