CodeFest 2013. — Макеев В. Flexbox, теперь понятно

1,965 views

Published on

0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,965
On SlideShare
0
From Embeds
0
Number of Embeds
1,292
Actions
Shares
0
Downloads
8
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

CodeFest 2013. — Макеев В. Flexbox, теперь понятно

  1. 1. Flexbox
  2. 2. 68,51%
  3. 3. Первая система раскладки, которая не хак
  4. 4. prozrachniy.gif
  5. 5. <br clear=all>
  6. 6. F09 ‣ F11 ‣ F12
  7. 7. Flexbox
  8. 8. Flexbox 09
  9. 9. Flexbox 09
  10. 10. Flexbox 11
  11. 11. Flexbox 12
  12. 12. Flexbox 12
  13. 13. Собственно
  14. 14. Оси
  15. 15. Привычный CSS0 .E { 10.2 t p: ; / с е х * o 0 * вру /0.3 bto 0 / сиу* o t m: ; * н з /0.4 tx-lg cne;/ грзнаьо* e t a i n: e t r * о и о т л н /0.5 vria-lg mdl;/ вриаьо* e t c l a i n: i d e * е т к л н /0.6 } 19
  16. 16. Главная
  17. 17. Поперечная
  18. 18. Пушкин.Зимний вечер
  19. 19. Пушкин. Зимний вечер0 .< i c a s "p e > 1 d v l s = o m"0.2 < i >б р м л ю / i > dv уя го<dv0.3 < i >н б к о т / i > dv ео ре<dv0.4 < i >в х и с е н е / i > dv ир нжы<dv0.5 < i >к у я / i > dv рт<dv0 .< d v 6 /i> 29
  20. 20. Пушкин. Зимний вечер0. .om {1 pe0.2 oefo:idn vrlwhde;0.3 h i h :6 0 x; egt 4p0.4 }0.5 .om dv { pe i0.6 fotlf; la:et0.7 } 30
  21. 21. Пушкин. Зимний вечер0 .. o m d v: i s - h l { 1 pe i frtcid0.2 bcgon:00 akrud#9;0.3 }0 .. o m d v: a t c i d { 4 pe i ls-hl0.5 bcgon:C0 akrud#0;0.6 } 31
  22. 22. буря мглою небо кроет вихри снежные крутя
  23. 23. Включаем Flexbox0 .. o m { 1 pe0.2 dslyfe; ipa:lx0.3 } 33
  24. 24. буря мглою небо кроет вихри снежные крутя
  25. 25. Меняем направление по оси0 .. o m { 1 pe0.2 dslyfe; ipa:lx0.3 f e - i e t o :r w; / п у о ч н ю * lxdrcin o * о млаи /0.4 f e - i e t o :r w r v r e; lxdrcin o-ees0.5 } 35
  26. 26. крутя вихри снежные небо кроет буря мглою
  27. 27. Поворачиваем саму ось0 .. o m { 1 pe0.2 dslyfe; ipa:lx0.3 f e - i e t o :c l m l x d r c i n o u n;0.4 } 37
  28. 28. буря мглоюнебо кроетвихри снежныекрутя
  29. 29. Меняем направление по оси0 .. o m { 1 pe0.2 dslyfe; ipa:lx0.3 f e - i e t o :c l m - e e s l x d r c i n o u n r v r e;0.4 } 39
  30. 30. крутявихри снежныенебо кроетбуря мглою
  31. 31. буря мглою небо кроет вихри снежные крутя
  32. 32. Што?
  33. 33. Вдоль
  34. 34. буря мглою небо кроет вихри снежные крутя
  35. 35. Вдоль направо0 .. o m { 1 pe0.2 dslyfe; ipa:lx0.3 j s i y c n e t l x s a t; / п у о ч н ю * u t f - o t n :f e - t r * о млаи /0.4 j s i y c n e t l x e d; u t f - o t n :f e - n0.5 } 47
  36. 36. буря мглою небо кроет вихри снежные крутя
  37. 37. Вдоль посередине0 .. o m { 1 pe0.2 dslyfe; ipa:lx0.3 jsiycnetcne; utf-otn:etr0.4 } 49
  38. 38. буря мглою небо кроет вихри снежные крутя
  39. 39. Вдоль равномерно0 .. o m { 1 pe0.2 dslyfe; ipa:lx0.3 jsiycnetsaebten utf-otn:pc-ewe;0.4 } 51
  40. 40. буря мглою небо кроет вихри снежные крутя
  41. 41. Вдоль красиво0 .. o m { 1 pe0.2 dslyfe; ipa:lx0.3 jsiycnetsaeaon; utf-otn:pc-rud0.4 } 53
  42. 42. буря мглою небо кроет вихри снежные крутя
  43. 43. Перестановка
  44. 44. буря мглою небо кроет вихри снежные крутя
  45. 45. буря мглою небо кроет вихри снежные крутя
  46. 46. Меняем порядок0 .. o m d v n h c i d 1 p e i : t - h l (2) {0.2 odr1 re:;0.3 } 58
  47. 47. буря мглою вихри снежные крутя небо кроет
  48. 48. Меняем порядок0 .. o m d v { 1 pe i0.2 odr4 re:;0.3 } 60
  49. 49. буря мглою небо кроет вихри снежные крутя
  50. 50. Меняем порядок0 .. o m d v n h c i d 1 p e i : t - h l (1) { o d r 2 } re:0 .. o m d v n h c i d 2 p e i : t - h l (2) { o d r 1 } re:0 .. o m d v n h c i d 3 p e i : t - h l (3) { o d r 4 } re:0 .. o m d v n h c i d 4 p e i : t - h l (4) { o d r 3 } re: 62
  51. 51. небо кроет буря мглою крутя вихри снежные
  52. 52. Поперёк
  53. 53. Даём высоту0 .. o m d v { 1 pe i0.2 hih:5p; egt20x0.3 } 67
  54. 54. буря мглою небо кроет вихри снежные крутя
  55. 55. Поперёк внизу0 .. o m { 1 pe0.2 dslyfe; ipa:lx0.3 a i n i e s l x s a t; / п у о ч н ю * l g - t m :f e - t r * о млаи /0.4 a i n i e s l x e d; l g - t m :f e - n0.5 } 69
  56. 56. буря мглою небо кроет вихри снежные крутя
  57. 57. Поперёк посередине0 .. o m { 1 pe0.2 dslyfe; ipa:lx0.3 a i n i e s e t r; l g - t m :c n e0.4 } 71
  58. 58. буря мглою небо кроет вихри снежные крутя
  59. 59. Поперёк индивидуально0 .. o m d v: t - h l (1) { 1 pe i nhcid0.2 a i n s l :f e - t r l g - e f l x s a t;0.3 }0 .. o m d v: t - h l (4) { 4 pe i nhcid0.5 a i n s l :f e - n l g - e f l x e d;0.6 } 73
  60. 60. буря мглою небо кроет вихри снежные крутя
  61. 61. буря мглою
  62. 62. Центрирование0 .. o m { 1 pe0.2 dslyfe; ipa:lx0.3 }0 .. o m d v { 4 pe i0.5 mri:uo agnat;0.6 } 76
  63. 63. Растягивание
  64. 64. буря мглою небо кроет вихри снежные крутя
  65. 65. × × × ×
  66. 66. Растягивание0 .. o m d v { 1 pe i0.2 fe-rw1 lxgo:;0.3 } 80
  67. 67. × × × ×
  68. 68. Растягивание0 .. o m d v { 1 pe i0.2 fe-rw1 lxgo:;0.3 }0 .. o m d v n h c i d 4 p e i : t - h l (1) {0.5 fe-rw4 lxgo:;0.6 } 82
  69. 69. × × × ×
  70. 70. Сжатие0 .. o m d v { 1 pe i0.2 wdh2% it:5;0.3 }0 .. o m d v n h c i d 1 { 4 pe i:t-hl()0.5 fe-hik4 lxsrn:;0.6 } 84
  71. 71. × × × ×
  72. 72. Запас0 .. o m d v { 1 pe i0.2 fe-rw1 lxgo:;0.3 }0 .. o m d v n h c i d 4 p e i : t - h l (1) {0.5 fe-ai:5p; lxbss20x0.6 } 86
  73. 73. × × × ×
  74. 74. Весь Пушкин
  75. 75. Многострочный Flexbox
  76. 76. буря мглою небо кроет вихри снежные крутя то как зверьона завоет то заплачет как дитя то по кровле обветшалойвдруг соломой зашумит то как путник запоздалыйк нам в окошко застучит
  77. 77. буря мглою небо кроет вихри снежные крутя то как зверь о
  78. 78. Перенос0 .. o m { 1 pe0.2 dslyfe; ipa:lx0.3 f e - r p o r p; / п у о ч н ю * l x w a :n w a * о млаи /0.4 f e - r p r p; l x w a :w a0.5 } 92
  79. 79. буря мглою небо кроет вихри снежные крутя то как зверьона завоет то заплачет как дитя то по кровле обветшалойвдруг соломой зашумит то как путник запоздалыйк нам в окошко застучит
  80. 80. Перенос наоборот0 .. o m { 1 pe0.2 dslyfe; ipa:lx0.3 f e - r p r p r v r e; l x w a :w a - e e s0.4 } 94
  81. 81. к нам в окошко застучитвдруг соломой зашумит то как путник запоздалыйона завоет то заплачет как дитя то по кровле обветшалойбуря мглою небо кроет вихри снежные крутя то как зверь
  82. 82. буря мглою небо кроет вихри снежные крутя то как зверьона завоет то заплачет как дитя то по кровле обветшалойвдруг соломой зашумит то как путник запоздалыйк нам в окошко застучит
  83. 83. Порядок поперёк0 .. o m { 1 pe0.2 dslyfe; ipa:lx0.3 aincnet tec l g - o t n :s r t h; / п у о ч н ю * * о млаи /0.4 a i n c n e t e t r; l g - o t n :c n e0.5 } Только для многострочных блоков! 98
  84. 84. буря мглою небо кроет вихри снежные крутя то как зверьона завоет то заплачет как дитя то по кровле обветшалойвдруг соломой зашумит то как путник запоздалыйк нам в окошко застучит
  85. 85. буря мглою небо кроет вихри снежные крутя то как зверьона завоет то заплачет как дитя то по кровле обветшалойвдруг соломой зашумит то как путник запоздалыйк нам в окошко застучит
  86. 86. буря мглою небо кроет вихри снежные крутя то как зверьона завоет то заплачет как дитя то по кровле обветшалойвдруг соломой зашумит то как путник запоздалыйк нам в окошко застучит
  87. 87. буря мглою небо кроет вихри снежные крутя то как зверьона завоет то заплачет как дитя то по кровле обветшалойвдруг соломой зашумит то как путник запоздалыйк нам в окошко застучит
  88. 88. Многострочный Flexbox в Firefox?
  89. 89. Фолбеки на старый Flexbox
  90. 90. Включение Flexbox0 .E { 10.2 dsly wbi-o i p a :- e k t b x;0.3 dsly-o-o; ipa:mzbx0.4 dsly m-lxo i p a :- s f e b x;0.5 d s l y w b i - l x; i p a :- e k t f e0.6 dslyfe; ipa:lx0.7 } 105
  91. 91. Растягивание блоков0 .E { 10.2 -ektbxfe 1 w b i - o - l x: ;0.3 -o-o-lx1 mzbxfe:;0.4 -sfe 1 m - l x: ;0.5 -ektfe 1 w b i - l x: ;0.6 fe:; lx10.7 } 106
  92. 92. Прямая колонка0 .E { - e k t b x o i n :v r i a 1 w b i - o - r e t e t c l;0.2 -o-o-retvria; mzbxoin:etcl0.3 - s f e - i e t o :c l m m - l x d r c i n o u n;0.4 - e k t f e - i e t o :c l m w b i - l x d r c i n o u n;0.5 fe-ieto:oun } lxdrcinclm; 107
  93. 93. Обратная колонка0 .E { - e k t b x o i n :v r i a 1 w b i - o - r e t e t c l;0.2 -ektbxdrcin ees w b i - o - i e t o :r v r e;0.3 -o-o-retvria; mzbxoin:etcl0.4 -o-o-ieto:ees; mzbxdrcinrvre0.5 - s f e - i e t o :c l m - e e s m - l x d r c i n o u n r v r e;0.6 - e k t f e - i e t o :c l m - e e s w b i - l x d r c i n o u n r v r e;0.7 fe-ieto:ounrvre } lxdrcinclm-ees; 108
  94. 94. Обратный ряд0 .E { - e k t b x o i n :h r z n a 1 w b i - o - r e t o i o t l;0.2 -ektbxdrcin ees w b i - o - i e t o :r v r e;0.3 -o-o-rethrzna; mzbxoin:oiotl0.4 -o-o-ieto:ees; mzbxdrcinrvre0.5 - s f e - i e t o :r w r v r e; m-lxdrcin o-ees0.6 - e k t f e - i e t o :r w r v r e; wbi-lxdrcin o-ees0.7 fe-ieto:o-ees;} lxdrcinrwrvre 109
  95. 95. Вдоль равномерно0 .E { 10.2 -ektbxpc jsiy w b i - o - a k: u t f ;0.3 -o-o-akjsiy mzbxpc:utf;0.4 - s f e - a k: u t f ; m-lxpc jsiy0.5 - e k t j s i y c n e t: p c - e w e ; wbi-utf-otn saebten0.6 jsiycnetsaebten utf-otn:pc-ewe;0.7 } 110
  96. 96. Поперёк посередине0 .E { 10.2 - e k t b x a i n: e t r wbi-o-lg cne;0.3 -o-o-lg:etr mzbxaincne;0.4 -sfe-lg cne; m - l x a i n: e t r0.5 - e k t a i n i e s: e t r wbi-lg-tm cne;0.6 } 111
  97. 97. Перестановка0 .E { 10.2 - e k t b x o d n l g o p: ; wbi-o-ria-ru 10.3 -o-o-ria-ru:; mzbxodnlgop10.4 -sfe-re 1 m - l x o d r: ;0.5 - e k t o d r: ; wbi-re 10.6 odr1 re:;0.7 } 112
  98. 98. Читать— Поддержка Flexbox в браузерах— Таблица соответствия F09 и F11— Таблица соответствия F09 и F11 для IE10— CSS3 Flexplorer— Использование Flexbox от Mozilla— Руководство по Flexbox от Microsoft 114
  99. 99. Flexbox, теперь понятно Вадим Макеев, Opera Software— @pepelsbey— pepelsbey.net— pepelsbey@gmail.com Презентация: pepelsbey.net/pres/flexbox-gotcha 115
  100. 100. sokr.me/fbx

×