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