bubnov
Post on 22-Jun-2015
192 Views
Preview:
TRANSCRIPT
CSS Flexible Box Layout — будущее?
Настоящее!
2
Две колонки
<div class="col-1">
Колонка 1
</div>
<div class="col-2">
Колонка 2
</div>
3
float
<div class="col-1">
Колонка 1
</div>
<div class="col-2">
Колонка 2
</div>
.col-1,
.col-2 {
float:left;
}
4
float
<table> <tr> <td class="col-1"> Колонка 1 </td> <td class="col-2"> Колонка 2 </td> </tr> </table>
5
table
<div class="col-1">
Колонка 1
</div>
<div class="col-2">
Колонка 2
</div>
6
inline-block
<div class="col-1">
Колонка 1
</div>
<div class="col-2">
Колонка 2
</div>
.col-1,
.col-2 {
display:inline-block;
}
7
inline-block
<div class="col-1">
Колонка 1
</div>
<div class="col-2">
Колонка 2
</div>
8
position
<div class="col-1">
Колонка 1
</div>
<div class="col-2">
Колонка 2
</div>
.col-1 {
position:absolute;
left:0;
}
9
position
<div class="col-1">
Колонка 1
</div>
<div class="col-2">
Колонка 2
</div>
.col-1 {
position:absolute;
left:0;
}
.col-2 {
position:absolute;
right:0;
}
10
position
11
flex
Как?
CSS Flexible Box Layout
12
13
Поддержка браузерами
Firefox [ 18 + ]
Opera [ 12.1 + ]
IE [ 10 + ]
WebKit
14
Поддержка браузерами
Firefox [ 18 + ]
Opera [ 12.1 + ]
IE [ 10 + ]
WebKit
2009 ✔ ✘ ✘ ✔
15
Поддержка браузерами
Firefox [ 18 + ]
Opera [ 12.1 + ]
IE [ 10 + ]
WebKit
2009 ✔ ✘ ✘ ✔
2012 ✘ ✘ ✔ ✘
16
Поддержка браузерами
Firefox [ 18 + ]
Opera [ 12.1 + ]
IE [ 10 + ]
WebKit
2009 ✔ ✘ ✘ ✔
2012 ✘ ✘ ✔ ✘
2012 + ✘ ✔ ✘ ✔
17
CSS-препроцессор
• SASS — http://sass-lang.com/
• LESS — http://lesscss.org/
• Stylus — http://learnboost.github.com/stylus/
• …
18
19
20
21
22
23
justify-content
24
justify-content
25
justify-content
26
justify-content
27
justify-content
28
29
align-items
30
align-items
31
align-items
32
align-items
33
align-items
34
35
order
ДРУГАЯ СХЕМА
36
• Поэтапный процесс загрузки ключевых блоков на скриншотах, либо видео
<div class=”flex">
<div class="left">
Колонка 1
</div>
<div class="right">
Колонка 2
</div>
</div>
.flex {
display:flex;
}
37
flex
38
Что почитать
• http://bit.ly/spec-2009
• http://bit.ly/spec-2012
• http://bit.ly/spec-last
Роман Бубнов
Ра з р а б о т ч и к к л и е н т с к о й ч а с т и Гл а в н о й
с т р а н и ц ы
r . b u b n o v @ c o r p . m a i l . r u
39
top related