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

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

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

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

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

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

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

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

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

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

10. 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. 11
Как?
flexbox

12. 12
CSS Flexible Box Layout

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

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

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

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

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

18. 18

19. 19

20. 20

21. 21

22. 22

23. 23

24. 24

25. 25

26. 26

27. 27
justify-content

28. 28
justify-content

29. 29
justify-content

30. 30
justify-content

31. 31
justify-content

32. 32
justify-content

33. 33
justify-content + flex-direction

34. 34

35. 35

36. 36

37. 37

38. 38

39. 39
align-items

40. 40
align-items

41. 41
align-items

42. 42
align-items

43. 43
align-items

44. 44
align-items

45. 45

46. 46

47. 47

48. 48
order

49. 49
<div class="flex">
<div class="el-1">1</div>
<div class="el-2">2</div>
</div>
order

50. 50
<div class="flex">
<div class="el-1">1</div>
<div class="el-2">2</div>
</div>
order

51. 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. 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. 53

54. 54

55. 55

56. 56

57. 57
Так как же?
flexbox

58. 58
<div class="flex">
<div class="col-1">
Колонка 1
</div>
<div class="col-2">
Колонка 2
</div>
</div>
flexbox

59. 59
<div class="flex">
<div class="col-1">
Колонка 1
</div>
<div class="col-2">
Колонка 2
</div>
</div>
.flex {
display:flex;
}
flexbox

60. 60
Что дальше?

61. 61
69.79%

62. 62
• mail.ru/tv
Что дальше?

63. 63
• mail.ru/tv
• bit.ly/flexplorer
Что дальше?

64. 64
• mail.ru/tv
• bit.ly/flexplorer
• Ссылка на гитхаб с миксином
Что дальше?

65. 65
• mail.ru/tv
• bit.ly/flexplorer
• Ссылка на гитхаб с миксином
• bit.ly/spec-2009
• bit.ly/spec-2012
• bit.ly/spec-last
Что дальше?

66. 66
Разработчик клиентской части
Главной страницы Mail.Ru
r.bubnov@corp.mail.ru
Роман Бубнов