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