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%
62
• mail.ru/tv
Что дальше?
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
Что дальше?
66
Разработчик клиентской части
Главной страницы Mail.Ru
r.bubnov@corp.mail.ru
Роман Бубнов

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