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.

CSS Flexible Box Layout — будущее? Настоящее! / Роман Бубнов (Mail.Ru)

352 views

Published on

  • Be the first to comment

  • Be the first to like this

CSS Flexible Box Layout — будущее? Настоящее! / Роман Бубнов (Mail.Ru)

  1. 1. CSS Flexible Box Layout — будущее?Настоящее!Роман Бубнов
  2. 2. 2Две колонки
  3. 3. 3<div class="col-1">Колонка 1</div><div class="col-2">Колонка 2</div>float
  4. 4. 4<div class="col-1">Колонка 1</div><div class="col-2">Колонка 2</div>.col-1,.col-2 {float:left;}float
  5. 5. 5<table><tr><td class="col-1">Колонка 1</td><td class="col-2">Колонка 2</td></tr></table>table
  6. 6. 6<div class="col-1">Колонка 1</div><div class="col-2">Колонка 2</div>inline-block
  7. 7. 7<div class="col-1">Колонка 1</div><div class="col-2">Колонка 2</div>.col-1,.col-2 {display:inline-block;}inline-block
  8. 8. 8<div class="col-1">Колонка 1</div><div class="col-2">Колонка 2</div>position
  9. 9. 9<div class="col-1">Колонка 1</div><div class="col-2">Колонка 2</div>.col-1 {position:absolute;left:0;}position
  10. 10. 10<div class="col-1">Колонка 1</div><div class="col-2">Колонка 2</div>.col-1 {position:absolute;left:0;}.col-2 {position:absolute;right:0;}position
  11. 11. 11Как?flexbox
  12. 12. 12CSS Flexible Box Layout
  13. 13. 13Firefox[ 18 + ]Opera[ 12.1 + ]IE[ 10 + ]Chrome[ 4 + ]Safari[ 3.1 + ]Поддержка браузерами
  14. 14. 14Firefox[ 18 + ]Opera[ 12.1 + ]IE[ 10 + ]Chrome[ 4 + ]Safari[ 3.1 + ]2009 ✔ ✘ ✘ ✔ ✔Поддержка браузерами
  15. 15. 15Firefox[ 18 + ]Opera[ 12.1 + ]IE[ 10 + ]Chrome[ 4 + ]Safari[ 3.1 + ]2009 ✔ ✘ ✘ ✔ ✔2012 ✘ ✘ ✔ ✘ ✘Поддержка браузерами
  16. 16. 16Firefox[ 18 + ]Opera[ 12.1 + ]IE[ 10 + ]Chrome[ 4 + ]Safari[ 3.1 + ]2009 ✔ ✘ ✘ ✔ ✔2012 ✘ ✘ ✔ ✘ ✘2012 + ✘ ✔ ✘ ✔ ✘Поддержка браузерами
  17. 17. 17• Sass —sass-lang.com• LESS —lesscss.org• Stylus —learnboost.github.com/stylus• …CSS-препроцессор
  18. 18. 18
  19. 19. 19
  20. 20. 20
  21. 21. 21
  22. 22. 22
  23. 23. 23
  24. 24. 24
  25. 25. 25
  26. 26. 26
  27. 27. 27justify-content
  28. 28. 28justify-content
  29. 29. 29justify-content
  30. 30. 30justify-content
  31. 31. 31justify-content
  32. 32. 32justify-content
  33. 33. 33justify-content + flex-direction
  34. 34. 34
  35. 35. 35
  36. 36. 36
  37. 37. 37
  38. 38. 38
  39. 39. 39align-items
  40. 40. 40align-items
  41. 41. 41align-items
  42. 42. 42align-items
  43. 43. 43align-items
  44. 44. 44align-items
  45. 45. 45
  46. 46. 46
  47. 47. 47
  48. 48. 48order
  49. 49. 49<div class="flex"><div class="el-1">1</div><div class="el-2">2</div></div>order
  50. 50. 50<div class="flex"><div class="el-1">1</div><div class="el-2">2</div></div>order
  51. 51. 51<div class="flex"><div class="el-1">1</div><div class="el-2">2</div></div><style>.flex { display:flex; }.el-1 { order:2; }.el-2 { order:1; }</style>order
  52. 52. 52<div class="flex"><div class="el-1">1</div><div class="el-2">2</div></div><style>.flex { display:flex; }.el-1 { order:2; }.el-2 { order:1; }</style>order
  53. 53. 53
  54. 54. 54
  55. 55. 55
  56. 56. 56
  57. 57. 57Так как же?flexbox
  58. 58. 58<div class="flex"><div class="col-1">Колонка 1</div><div class="col-2">Колонка 2</div></div>flexbox
  59. 59. 59<div class="flex"><div class="col-1">Колонка 1</div><div class="col-2">Колонка 2</div></div>.flex {display:flex;}flexbox
  60. 60. 60Что дальше?
  61. 61. 6169.79%
  62. 62. 62• mail.ru/tvЧто дальше?
  63. 63. 63• mail.ru/tv• bit.ly/flexplorerЧто дальше?
  64. 64. 64• mail.ru/tv• bit.ly/flexplorer• Ссылка на гитхаб с миксиномЧто дальше?
  65. 65. 65• mail.ru/tv• bit.ly/flexplorer• Ссылка на гитхаб с миксином• bit.ly/spec-2009• bit.ly/spec-2012• bit.ly/spec-lastЧто дальше?
  66. 66. 66Разработчик клиентской частиГлавной страницы Mail.Rur.bubnov@corp.mail.ruРоман Бубнов

×