codefest 2013. — Макеев В. flexbox, теперь понятно
DESCRIPTION
TRANSCRIPT
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.net/pres/flexbox-gotcha
115
