Документ обсуждает различные методы создания многоколонных макетов в CSS, включая использование Flexbox, float, inline-block и таблицы. Приведены примеры кода для каждой техники и рассмотрены особенности поддержки браузерами. Также упоминаются CSS-препроцессоры и методы выравнивания элементов.

1. CSS Flexible Box Layout — будущее?
Настоящее!

2. Две колонки
2

3. float
<div class="col-1">
Колонка 1
</div>
<div class="col-2">
Колонка 2
</div>
3

4. float
<div class="col-1"> .col-1,
Колонка 1 .col-2 {
</div> float:left;
<div class="col-2"> }
Колонка 2
</div>
4

5. table
<table>
<tr>
<td class="col-1">
Колонка 1
</td>
<td class="col-2">
Колонка 2
</td>
</tr>
</table>
5

6. inline-block
<div class="col-1">
Колонка 1
</div>
<div class="col-2">
Колонка 2
</div>
6

7. inline-block
<div class="col-1"> .col-1,
Колонка 1 .col-2 {
</div> display:inline-block;
<div class="col-2"> }
Колонка 2
</div>
7

8. position
<div class="col-1">
Колонка 1
</div>
<div class="col-2">
Колонка 2
</div>
8

9. position
<div class="col-1"> .col-1 {
Колонка 1 position:absolute;
</div> left:0;
<div class="col-2"> }
Колонка 2
</div>
9

10. position
<div class="col-1"> .col-1 {
Колонка 1 position:absolute;
</div> left:0;
<div class="col-2"> }
Колонка 2 .col-2 {
</div> position:absolute;
right:0;
}
10

11. flex
Как?
11

12. CSS Flexible Box Layout
12

13. Поддержка браузерами
Firefox Opera IE
WebKit
[ 18 + ] [ 12.1 + ] [ 10 + ]
13

14. Поддержка браузерами
Firefox Opera IE
WebKit
[ 18 + ] [ 12.1 + ] [ 10 + ]
2009 ✔ ✘ ✘ ✔
14

15. Поддержка браузерами
Firefox Opera IE
WebKit
[ 18 + ] [ 12.1 + ] [ 10 + ]
2009 ✔ ✘ ✘ ✔
2012 ✘ ✘ ✔ ✘
15

16. Поддержка браузерами
Firefox Opera IE
WebKit
[ 18 + ] [ 12.1 + ] [ 10 + ]
2009 ✔ ✘ ✘ ✔
2012 ✘ ✘ ✔ ✘
2012 + ✘ ✔ ✘ ✔
16

17. CSS-препроцессор
• SASS — http://sass-lang.com/
• LESS — http://lesscss.org/
• Stylus — http://learnboost.github.com/stylus/
• …
17

18. 18

19. 19

20. 20

21. 21

22. 22

23. justify-content
23

24. justify-content
24

25. justify-content
25

26. justify-content
26

27. justify-content
27

28. 28

29. align-items
29

30. align-items
30

31. align-items
31

32. align-items
32

33. align-items
33

34. 34

35. order
ДРУГАЯ СХЕМА
35

36. • Поэтапный процесс загрузки ключевых
блоков на скриншотах, либо видео
36

37. flex
<div class=”flex"> .flex {
<div class="left"> display:flex;
Колонка 1 }
</div>
<div class="right">
Колонка 2
</div>
</div>
37

38. Что почитать
• http://bit.ly/spec-2009
• http://bit.ly/spec-2012
• http://bit.ly/spec-last
38

39. Ро м а н Бу б н о в
Ра з р а б от ч и к к л и е н т с к о й ч а с т и Гл а в н о й
страницы
r. b u b n o v @ c o r p . m a i l . r u
39