css flexible box layout — будущее? Настоящее! / Роман Бубнов (mail.ru)

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

Роман Бубнов