2. Flexbox

3. 68,51%

4. Первая система раскладки,
которая не хак

5. prozrachniy.gif

6. <br clear=all>

7. F09 ‣ F11 ‣ F12

9. Flexbox

10. Flexbox 09

11. Flexbox 09

12. Flexbox 11

13. Flexbox 12

14. Flexbox 12

15. Собственно

18. Оси

19. Привычный CSS
0 .E {
1
0.
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

20. Главная

21. Поперечная

28. Пушкин.
Зимний вечер

29. Пушкин. Зимний вечер
0 .< i c a s "p e >
1 d v l s = o m"
0.
2 < i >б р м л ю / i >
dv уя го<dv
0.
3 < i >н б к о т / i >
dv ео ре<dv
0.
4 < i >в х и с е н е / i >
dv ир нжы<dv
0.
5 < i >к у я / i >
dv рт<dv
0 .< d v
6 /i>
29

30. Пушкин. Зимний вечер
0. .om {
1 pe
0.
2 oefo:idn
vrlwhde;
0.
3 h i h :6 0 x;
egt 4p
0.
4 }
0.
5 .om dv {
pe i
0.
6 fotlf;
la:et
0.
7 }
30

31. Пушкин. Зимний вечер
0 .. o m d v: i s - h l {
1 pe i frtcid
0.
2 bcgon:00
akrud#9;
0.
3 }
0 .. o m d v: a t c i d {
4 pe i ls-hl
0.
5 bcgon:C0
akrud#0;
0.
6 }
31

32. буря мглою небо кроет вихри снежные крутя

33. Включаем Flexbox
0 .. o m {
1 pe
0.
2 dslyfe;
ipa:lx
0.
3 }
33

34. буря мглою небо кроет вихри снежные крутя

35. Меняем направление по оси
0 .. o m {
1 pe
0.
2 dslyfe;
ipa:lx
0.
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-ees
0.
5 }
35

36. крутя вихри снежные небо кроет буря мглою

37. Поворачиваем саму ось
0 .. o m {
1 pe
0.
2 dslyfe;
ipa:lx
0.
3 f e - i e t o :c l m
l x d r c i n o u n;
0.
4 }
37

38. буря мглою
небо кроет
вихри снежные
крутя

39. Меняем направление по оси
0 .. o m {
1 pe
0.
2 dslyfe;
ipa:lx
0.
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

40. крутя
вихри снежные
небо кроет
буря мглою

41. буря мглою небо кроет вихри снежные крутя

42. Што?

43. Вдоль

46. буря мглою небо кроет вихри снежные крутя

47. Вдоль направо
0 .. o m {
1 pe
0.
2 dslyfe;
ipa:lx
0.
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 - n
0.
5 }
47

48. буря мглою небо кроет вихри снежные крутя

49. Вдоль посередине
0 .. o m {
1 pe
0.
2 dslyfe;
ipa:lx
0.
3 jsiycnetcne;
utf-otn:etr
0.
4 }
49

50. буря мглою небо кроет вихри снежные крутя

51. Вдоль равномерно
0 .. o m {
1 pe
0.
2 dslyfe;
ipa:lx
0.
3 jsiycnetsaebten
utf-otn:pc-ewe;
0.
4 }
51

52. буря мглою небо кроет вихри снежные крутя

53. Вдоль красиво
0 .. o m {
1 pe
0.
2 dslyfe;
ipa:lx
0.
3 jsiycnetsaeaon;
utf-otn:pc-rud
0.
4 }
53

54. буря мглою небо кроет вихри снежные крутя

55. Перестановка

56. буря мглою небо кроет вихри снежные крутя

57. буря мглою небо кроет вихри снежные крутя

58. Меняем порядок
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

59. буря мглою вихри снежные крутя небо кроет

60. Меняем порядок
0 .. o m d v {
1 pe i
0.
2 odr4
re:;
0.
3 }
60

61. буря мглою небо кроет вихри снежные крутя

62. Меняем порядок
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

63. небо кроет буря мглою крутя вихри снежные

65. Поперёк

67. Даём высоту
0 .. o m d v {
1 pe i
0.
2 hih:5p;
egt20x
0.
3 }
67

68. буря мглою небо кроет вихри снежные крутя

69. Поперёк внизу
0 .. o m {
1 pe
0.
2 dslyfe;
ipa:lx
0.
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 - n
0.
5 }
69

70. буря мглою небо кроет вихри снежные крутя

71. Поперёк посередине
0 .. o m {
1 pe
0.
2 dslyfe;
ipa:lx
0.
3 a i n i e s e t r;
l g - t m :c n e
0.
4 }
71

72. буря мглою небо кроет вихри снежные крутя

73. Поперёк индивидуально
0 .. o m d v: t - h l (1) {
1 pe i nhcid
0.
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 nhcid
0.
5 a i n s l :f e - n
l g - e f l x e d;
0.
6 }
73

74. буря мглою
небо кроет вихри снежные
крутя

75. буря мглою

76. Центрирование
0 .. o m {
1 pe
0.
2 dslyfe;
ipa:lx
0.
3 }
0 .. o m d v {
4 pe i
0.
5 mri:uo
agnat;
0.
6 }
76

77. Растягивание

78. буря мглою небо кроет вихри снежные крутя

79. × × × ×

80. Растягивание
0 .. o m d v {
1 pe i
0.
2 fe-rw1
lxgo:;
0.
3 }
80

81. × × × ×

82. Растягивание
0 .. o m d v {
1 pe i
0.
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

83. × × × ×

84. Сжатие
0 .. o m d v {
1 pe i
0.
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

85. × × × ×

86. Запас
0 .. o m d v {
1 pe i
0.
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;
lxbss20x
0.
6 }
86

87. × × × ×

88. Весь Пушкин

89. Многострочный
Flexbox

90. буря мглою небо кроет вихри снежные крутя то как зверь
она завоет то заплачет как дитя то по кровле обветшалой
вдруг соломой зашумит то как путник запоздалый
к нам в окошко застучит

91. буря мглою небо кроет вихри снежные крутя то как зверь о

92. Перенос
0 .. o m {
1 pe
0.
2 dslyfe;
ipa:lx
0.
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 a
0.
5 }
92

93. буря мглою небо кроет вихри снежные крутя то как зверь
она завоет то заплачет как дитя то по кровле обветшалой
вдруг соломой зашумит то как путник запоздалый
к нам в окошко застучит

94. Перенос наоборот
0 .. o m {
1 pe
0.
2 dslyfe;
ipa:lx
0.
3 f e - r p r p r v r e;
l x w a :w a - e e s
0.
4 }
94

95. к нам в окошко застучит
вдруг соломой зашумит то как путник запоздалый
она завоет то заплачет как дитя то по кровле обветшалой
буря мглою небо кроет вихри снежные крутя то как зверь

96. буря мглою небо кроет вихри снежные крутя то как зверь
она завоет то заплачет как дитя то по кровле обветшалой
вдруг соломой зашумит то как путник запоздалый
к нам в окошко застучит

98. Порядок поперёк
0 .. o m {
1 pe
0.
2 dslyfe;
ipa:lx
0.
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 e
0.
5 }
Только для многострочных блоков!
98

99. буря мглою небо кроет вихри снежные крутя то как зверь
она завоет то заплачет как дитя то по кровле обветшалой
вдруг соломой зашумит то как путник запоздалый
к нам в окошко застучит

100. буря мглою небо кроет вихри снежные крутя то как зверь
она завоет то заплачет как дитя то по кровле обветшалой
вдруг соломой зашумит то как путник запоздалый
к нам в окошко застучит

101. буря мглою небо кроет вихри снежные крутя то как зверь
она завоет то заплачет как дитя то по кровле обветшалой
вдруг соломой зашумит то как путник запоздалый
к нам в окошко застучит

102. буря мглою небо кроет вихри снежные крутя то как зверь
она завоет то заплачет как дитя то по кровле обветшалой
вдруг соломой зашумит то как путник запоздалый
к нам в окошко застучит

103. Многострочный Flexbox
в Firefox?

104. Фолбеки на старый
Flexbox

105. Включение Flexbox
0 .E {
1
0.
2 dsly wbi-o
i p a :- e k t b x;
0.
3 dsly-o-o;
ipa:mzbx
0.
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 e
0.
6 dslyfe;
ipa:lx
0.
7 }
105

106. Растягивание блоков
0 .E {
1
0.
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:;
lx1
0.
7 }
106

107. Прямая колонка
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:etcl
0.
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

108. Обратная колонка
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:etcl
0.
4 -o-o-ieto:ees;
mzbxdrcinrvre
0.
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

109. Обратный ряд
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:oiotl
0.
4 -o-o-ieto:ees;
mzbxdrcinrvre
0.
5 - s f e - i e t o :r w r v r e;
m-lxdrcin o-ees
0.
6 - e k t f e - i e t o :r w r v r e;
wbi-lxdrcin o-ees
0.
7 fe-ieto:o-ees;}
lxdrcinrwrvre
109

110. Вдоль равномерно
0 .E {
1
0.
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 jsiy
0.
5 - e k t j s i y c n e t: p c - e w e ;
wbi-utf-otn saebten
0.
6 jsiycnetsaebten
utf-otn:pc-ewe;
0.
7 }
110

111. Поперёк посередине
0 .E {
1
0.
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 r
0.
5 - e k t a i n i e s: e t r
wbi-lg-tm cne;
0.
6 }
111

112. Перестановка
0 .E {
1
0.
2 - e k t b x o d n l g o p: ;
wbi-o-ria-ru 1
0.
3 -o-o-ria-ru:;
mzbxodnlgop1
0.
4 -sfe-re 1
m - l x o d r: ;
0.
5 - e k t o d r: ;
wbi-re 1
0.
6 odr1
re:;
0.
7 }
112

114. Читать
— Поддержка Flexbox в браузерах
— Таблица соответствия F09 и F11
— Таблица соответствия F09 и F11 для IE10
— CSS3 Flexplorer
— Использование Flexbox от Mozilla
— Руководство по Flexbox от Microsoft
114

115. Flexbox, теперь понятно
Вадим Макеев, Opera Software
— @pepelsbey
— pepelsbey.net
— pepelsbey@gmail.com
Презентация: pepelsbey.net/pres/flexbox-gotcha
115

116. sokr.me/fbx