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.

Flexbox

2,487 views

Published on

Introduction and real-life examples about using Flexbox. Presented at the front-end meetup in Skopje on 12.01.2016.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Flexbox

  1. 1. Introduction & examples Flexbox 12 January 2016 – Aleksandra Hristov, Front-end meetup Skopje
  2. 2. Netcetera | 2 • Flexbox introduction • Playground • Real-life examples
  3. 3. Netcetera | 3 Flexbox Introduction
  4. 4. Netcetera | 4  Flexible box layout  for unknown and/or dynamic items  Suitable for  components  small-scale layouts  Structure  Parent (flex container)  Children (flex items)  Two axis (can be switched)  main  cross Flexbox introduction
  5. 5. Netcetera | 5  Rules of proportion – complicated math  Vertical centering  Same-height columns  Shrink-to-fit containers  Float drop and clearing  Source order dependence Traditional CSS layout drawbacks
  6. 6. Netcetera | 6  Rules of proportion – complicated math ✓  Vertical centering ✓  Same-height columns ✓  Shrink-to-fit containers ✓  Float drop and clearing ✓  Source order dependence ✓ Traditional CSS layout drawbacks
  7. 7. Netcetera | 7 .container { display: flex; } Flexible box layout
  8. 8. Netcetera | 8 .container { display: flex; flex-direction: row; /* default */ }  row  row-reverse  column  column-reverse Flex-direction
  9. 9. Netcetera | 9
  10. 10. Netcetera | 10
  11. 11. Netcetera | 11 .container { display: flex; flex-direction: row; /* default */ flex-wrap: nowrap; /* default */ } OR flex-direction + flex-wrap = flex-flow: row nowrap;  nowrap  wrap  wrap-reverse Flex-wrap
  12. 12. Netcetera | 12
  13. 13. Netcetera | 13 .box1{ flex: 1; } .box2{ flex: 1; } .box3{ flex: 1; } Flex-grow The ability for a flex item to grow if necessary and dictates the amount of available space an item should take.
  14. 14. Netcetera | 14
  15. 15. Netcetera | 15 .box1{ flex: 1; } .box2{ flex: 2; } .box3{ flex: 1; } Flex-grow Box2: Take twice the available space as other siblings
  16. 16. Netcetera | 16
  17. 17. Netcetera | 17 .container { width: 800px; } .box1{ flex-grow: 1; flex-basis:200px; /* added 66px */ } .box2{ flex-grow: 1; flex-basis:200px; /* added 66px */ } .box3{ flex-grow: 1; flex-basis:200px; /* added 66px */ } Flex-basis
  18. 18. Netcetera | 18 .container { width: 800px; } .box1{ flex-grow: 1; flex-basis:200px; /* added 50px */ } .box2{ flex-grow: 2; flex-basis:200px; /* added 100px */ } .box3{ flex-grow: 1; flex-basis:200px; /* added 50px */ } Flex-basis
  19. 19. Netcetera | 19 .container { width: 800px; } .box1{ flex: 1 200px; /* added 50px */ } .box2{ flex: 2 200px; /* added 100px */ } .box3{ flex: 1 200px; /* added 50px */ } Flex-basis
  20. 20. Netcetera | 20 .box1{ order: 1; } .box2{ order: 2; } .box3{ order: 3; } Order Controls the order in which items appear visually in a flex container
  21. 21. Netcetera | 21 1 32
  22. 22. Netcetera | 22 .box1{ order: 3; } .box2{ order: 2; } .box3{ order: 1; } Order OR .container{ flex-direction: row-reverse; }
  23. 23. Netcetera | 23 3 12
  24. 24. Netcetera | 24 .box1{ order: 2; } .box2{ order: 1; } .box3{ order: 3; } Order
  25. 25. Netcetera | 25 2 31
  26. 26. Netcetera | 26 .container{ justify-content: flex-start; /* default */ } Justify-content Controls the order in which items appear visually in a flex container (depending on the main axis, one row)  flex-start  flex-end  center  space-between  Space-around
  27. 27. Netcetera | 27 flex-start
  28. 28. Netcetera | 28 flex-end
  29. 29. Netcetera | 29 center
  30. 30. Netcetera | 30 space- between
  31. 31. Netcetera | 31 space- around
  32. 32. Netcetera | 32 .container{ align-items: stretch; /* default */ } Align-items Controls the order in which items appear visually in a flex container (depending on the cross axis, one row)  stretch  flex-start  flex-end  center  baseline
  33. 33. Netcetera | 33 stretch
  34. 34. Netcetera | 34 flex-start
  35. 35. Netcetera | 35 center
  36. 36. Netcetera | 36 baseline baselinebaseline
  37. 37. Netcetera | 37 .container{ align-content: stretch; /* default */ } Align-content Controls the order in which items appear visually in a flex container (depending on the cross axis, wrapped)  flex-start  flex-end  center  Stretch  Space-between  Space-around
  38. 38. Netcetera | 38 flex-start
  39. 39. Netcetera | 39 flex-end
  40. 40. Netcetera | 40 center
  41. 41. Netcetera | 41 stretch
  42. 42. Netcetera | 42 space-between
  43. 43. Netcetera | 43 space-around
  44. 44. Netcetera | 44 .box2{ align-self: flex-end; } Align-self Controls the order of a single child item (depending on the cross axis)  auto  flex-start  flex-end  center  stretch  baseline
  45. 45. Netcetera | 45 flex-end
  46. 46. Netcetera | 461 Supported with –webkit- prefix Browser support
  47. 47. Netcetera | 47 Legacy browser implementations
  48. 48. Netcetera | 48 .container{ display: table; } .row { display: table-row; } .cell { display: table-cell; } Fallback?
  49. 49. Netcetera | 49 Playground
  50. 50. Netcetera | 50 http://flexboxfroggy.com/ Playground
  51. 51. Netcetera | 51 Real-life examples
  52. 52. Netcetera | 52  A repeatable component  The same essentiality  Different content and size Real-life examples
  53. 53. Netcetera | 53 Just a timetable
  54. 54. Netcetera | 54
  55. 55. Netcetera | 55
  56. 56. Netcetera | 56
  57. 57. Netcetera | 57
  58. 58. Netcetera | 58 col-xs-1 col-xs-2 col-xs-1 col-xs-8
  59. 59. Netcetera | 59 col-xs-1col-xs-2 col-xs-?col-xs-2col-xs-3 col-xs-1col-xs-2 col-xs-3col-xs-2col-xs-3 col-xs-1
  60. 60. Netcetera | 60 col-xs-1 col-xs-2 col-xs-1 col-xs-7col-xs-1 col-xs-8col-xs-4
  61. 61. Netcetera | 61 30px flex-direction: column; flex: 4 35px; (1) 29px 29px flex-grow: 20; (5)
  62. 62. Netcetera | 62
  63. 63. Netcetera | 63 demo
  64. 64. Netcetera | 64 THANK YOU! any other questions? aleksandra.hristov@netcetera.com @alexhris * Some of the graphics for Flexbox are picked up from Andrew Clarke’s workshop “CSS3 for responsive design”, 2015

×