codefest 2013. — Макеев В. flexbox, теперь понятно

Flexbox

68,51%

Первая система раскладки,которая не хак

prozrachniy.gif

<br clear=all>

F09 ‣ F11 ‣ F12

Flexbox

Flexbox 09

Flexbox 09

Flexbox 11

Flexbox 12

Flexbox 12

Собственно

Оси

Привычный CSSE {

top:0; /* сверху */

bottom:0; /* снизу */

text-align:center; /* горизонтально */

vertical-align:middle; /* вертикально */

}

01.

02.

03.

04.

05.

06.

19

Главная

Поперечная

Пушкин.

Зимний вечер

Пушкин. Зимний вечер<div class="poem">

<div>буря мглою</div>

<div>небо кроет</div>

<div>вихри снежные</div>

<div>крутя</div>

</div>

01.

02.

03.

04.

05.

06.

29

Пушкин. Зимний вечер.poem {

overflow:hidden;

height:640px;

}

.poem div {

float:left;

}

01.

02.

03.

04.

05.

06.

07.

30

Пушкин. Зимний вечер.poem div:first-child {

background:#090;

}

.poem div:last-child {

background:#C00;

}

01.

02.

03.

04.

05.

06.

31

буря мглою небо кроет вихри снежные крутя

Включаем Flexbox.poem {

display:flex;

}

01.

02.

03.

33

буря мглою небо кроет вихри снежные крутя

Меняем направление по оси.poem {

display:flex;

flex-direction:row; /* по умолчанию */

flex-direction:row-reverse;

}

01.

02.

03.

04.

05.

35

буря мглоюнебо кроетвихри снежныекрутя

Поворачиваем саму ось.poem {

display:flex;

flex-direction:column;

}

01.

02.

03.

04.

37

буря мглою

небо кроет

вихри снежные

крутя

Меняем направление по оси.poem {

display:flex;

flex-direction:column-reverse;

}

01.

02.

03.

04.

39

буря мглою

небо кроет

вихри снежные

крутя

буря мглою небо кроет вихри снежные крутя

Што?

Вдоль

буря мглою небо кроет вихри снежные крутя

Вдоль направо.poem {

display:flex;

justify-content:flex-start; /* по умолчанию */

justify-content:flex-end;

}

01.

02.

03.

04.

05.

47

буря мглою небо кроет вихри снежные крутя

Вдоль посередине.poem {

display:flex;

justify-content:center;

}

01.

02.

03.

04.

49

буря мглою небо кроет вихри снежные крутя

Вдоль равномерно.poem {

display:flex;

justify-content:space-between;

}

01.

02.

03.

04.

51

буря мглою небо кроет вихри снежные крутя

Вдоль красиво.poem {

display:flex;

justify-content:space-around;

}

01.

02.

03.

04.

53

буря мглою небо кроет вихри снежные крутя

Перестановка

буря мглою небо кроет вихри снежные крутя

буря мглою небо кроет вихри снежные крутя

Меняем порядок.poem div:nth-child(2) {

order:1;

}

01.

02.

03.

58

буря мглою вихри снежные крутя небо кроет

Меняем порядок.poem div {

order:4;

}

01.

02.

03.

60

буря мглою небо кроет вихри снежные крутя

Меняем порядок.poem div:nth-child(1) { order:2 }

.poem div:nth-child(2) { order:1 }

.poem div:nth-child(3) { order:4 }

.poem div:nth-child(4) { order:3 }

01.

02.

03.

04.

62

небо кроет буря мглою крутя вихри снежные

Поперёк

Даём высоту.poem div {

height:250px;

}

01.

02.

03.

67

буря мглою небо кроет вихри снежные крутя

Поперёк внизу.poem {

display:flex;

align-items:flex-start; /* по умолчанию */

align-items:flex-end;

}

01.

02.

03.

04.

05.

69

буря мглою небо кроет вихри снежные крутя

Поперёк посередине.poem {

display:flex;

align-items:center;

}

01.

02.

03.

04.

71

буря мглою небо кроет вихри снежные крутя

Поперёк индивидуально.poem div:nth-child(1) {

align-self:flex-start;

}

.poem div:nth-child(4) {

align-self:flex-end;

}

01.

02.

03.

04.

05.

06.

73

буря мглою

небо кроет вихри снежные

крутя

буря мглою

Центрирование.poem {

display:flex;

}

.poem div {

margin:auto;

}

01.

02.

03.

04.

05.

06.

76

Растягивание

буря мглою небо кроет вихри снежные крутя

× × × ×

Растягивание.poem div {

flex-grow:1;

}

01.

02.

03.

80

× × × ×

Растягивание.poem div {

flex-grow:1;

}

.poem div:nth-child(1) {

flex-grow:4;

}

01.

02.

03.

04.

05.

06.

82

× × × ×

Сжатие.poem div {

width:25%;

}

.poem div:nth-child(1) {

flex-shrink:4;

}

01.

02.

03.

04.

05.

06.

84

× × × ×

Запас.poem div {

flex-grow:1;

}

.poem div:nth-child(1) {

flex-basis:250px;

}

01.

02.

03.

04.

05.

06.

86

× × × ×

Весь Пушкин

Многострочный

Flexbox

буря мглою небо кроет вихри снежные крутя то как зверь

она завоет то заплачет как дитя то по кровле обветшалой

вдруг соломой зашумит то как путник запоздалый

к нам в окошко застучит

буря мглою небо кроет вихри снежные крутя то как зверь она

Перенос.poem {

display:flex;

flex-wrap:nowrap; /* по умолчанию */

flex-wrap:wrap;

}

01.

02.

03.

04.

05.

92

буря мглою небо кроет вихри снежные крутя то как зверь

она завоет то заплачет как дитя то по кровле обветшалой

вдруг соломой зашумит то как путник запоздалый

к нам в окошко застучит

Перенос наоборот.poem {

display:flex;

flex-wrap:wrap-reverse;

}

01.

02.

03.

04.

94

буря мглою небо кроет вихри снежные крутя то как зверь

она завоет то заплачет как дитя то по кровле обветшалой

вдруг соломой зашумит то как путник запоздалый

к нам в окошко застучит

буря мглою небо кроет вихри снежные крутя то как зверь

она завоет то заплачет как дитя то по кровле обветшалой

вдруг соломой зашумит то как путник запоздалый

к нам в окошко застучит

Порядок поперёк.poem {

display:flex;

align-content:stretch; /* по умолчанию */

align-content:center;

}

Только для многострочных блоков!

01.

02.

03.

04.

05.

98

буря мглою небо кроет вихри снежные крутя то как зверь

она завоет то заплачет как дитя то по кровле обветшалой

вдруг соломой зашумит то как путник запоздалый

к нам в окошко застучит

буря мглою небо кроет вихри снежные крутя то как зверь

она завоет то заплачет как дитя то по кровле обветшалой

вдруг соломой зашумит то как путник запоздалый

к нам в окошко застучит

буря мглою небо кроет вихри снежные крутя то как зверь

она завоет то заплачет как дитя то по кровле обветшалой

вдруг соломой зашумит то как путник запоздалый

к нам в окошко застучит

буря мглою небо кроет вихри снежные крутя то как зверь

она завоет то заплачет как дитя то по кровле обветшалой

вдруг соломой зашумит то как путник запоздалый

к нам в окошко застучит

Многострочный Flexboxв Firefox?

Фолбеки на старыйFlexbox

Включение FlexboxE {

display:-webkit-box;

display:-moz-box;

display:-ms-flexbox;

display:-webkit-flex;

display:flex;

}

01.

02.

03.

04.

05.

06.

07.

105

Растягивание блоковE {

-webkit-box-flex:1;

-moz-box-flex:1;

-ms-flex:1;

-webkit-flex:1;

flex:1;

}

01.

02.

03.

04.

05.

06.

07.

106

Прямая колонкаE { -webkit-box-orient:vertical;

-moz-box-orient:vertical;

-ms-flex-direction:column;

-webkit-flex-direction:column;

flex-direction:column; }

01.

02.

03.

04.

05.

107

Обратная колонкаE { -webkit-box-orient:vertical;

-webkit-box-direction:reverse;

-moz-box-orient:vertical;

-moz-box-direction:reverse;

-ms-flex-direction:column-reverse;

-webkit-flex-direction:column-reverse;

flex-direction:column-reverse; }

01.

02.

03.

04.

05.

06.

07.

108

Обратный рядE { -webkit-box-orient:horizontal;

-webkit-box-direction:reverse;

-moz-box-orient:horizontal;

-moz-box-direction:reverse;

-ms-flex-direction:row-reverse;

-webkit-flex-direction:row-reverse;

flex-direction:row-reverse; }

01.

02.

03.

04.

05.

06.

07.

109

Вдоль равномерноE {

-webkit-box-pack:justify;

-moz-box-pack:justify;

-ms-flex-pack:justify;

-webkit-justify-content:space-between;

justify-content:space-between;

}

01.

02.

03.

04.

05.

06.

07.

110

Поперёк посерединеE {

-webkit-box-align:center;

-moz-box-align:center;

-ms-flex-align:center;

-webkit-align-items:center;

}

01.

02.

03.

04.

05.

06.

111

ПерестановкаE {

-webkit-box-ordinal-group:1;

-moz-box-ordinal-group:1;

-ms-flex-order:1;

-webkit-order:1;

order:1;

}

01.

02.

03.

04.

05.

06.

07.

112

Читать— Поддержка Flexbox в браузерах

— Таблица соответствия F09 и F11

— Таблица соответствия F09 и F11 для IE10

— CSS3 Flexplorer

— Использование Flexbox от Mozilla

— Руководство по Flexbox от Microsoft

114

Flexbox, теперь понятноВадим Макеев, Opera Software

— @pepelsbey

— pepelsbey.net

— pepelsbey@gmail.com

Презентация: pepelsbey.net/pres/flexbox-gotcha

115

sokr.me/fbx