Post on 11-Nov-2014
description
Гибкие коробки на практике
Арсений Форштретер
Старший разработчик интерфейсов
Y U NO USE FLEXBOX?
— Нигде не поддерживается
1
Y U NO USE FLEXBOX?
— Нигде не поддерживается
— Много префиксов
3
Очень много префиксов
.box display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-direction: normal; -moz-box-direction: normal; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -moz-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center;
01.02.03.04.05.06.07.08.09.10.11.12.13.14.15.16.17.18.19.20.21.22.23.24.
4
Автопрефиксер же!
.box
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
01.
02.
03.
04.
05.
06.
5
Y U NO USE FLEXBOX?
— Нигде не поддерживается
— Много префиксов
— IE ≤ 9
6
display: table;
7
Y U NO USE FLEXBOX?
— Нигде не поддерживается
— Много префиксов
— IE ≤ 9
— Производительность
8
Y U NO USE FLEXBOX?
— Нигде не поддерживается
— Много префиксов
— IE ≤ 9
— Производительность
— Новое и непонятное
10
Ликбез
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
01.
02.
03.
04.
05.
12
Ликбез
Item 1
Item 2
Item 3
13
Добавляем flexbox
.container display: flex;
Item 1 Item 2 Item 3
.container display: inline-flex;
Item 1 Item 2 Item 3
14
Задаем направление
.container flex-direction: column;
Item 1
Item 2
Item 3
15
Выравниваем по главной оси
.container justify-content: flex-end;
Item 1 Item 2 Item 3
.container justify-content: center;
Item 1 Item 2 Item 3
16
Выравниваем по главной оси
.container justify-content: space-between;
Item 1 Item 2 Item 3
.container justify-content: space-around;
Item 1 Item 2 Item 3
17
Добавляем margin
.item:nth-child(3) margin: auto;
Item 1 Item 2Item 3
Item 4 Item 5
18
Выравниваем по дополнительной оси
.container align-items: flex-start;
Item 1 Item 2 Item 3
.container align-items: flex-end;
Item 1 Item 2 Item 3
19
Выравниваем по дополнительной оси
.container align-items: center;
Item 1 Item 2 Item 3
.container align-items: baseline;
Item 1 Item 2 Item 3
20
Выравниваем по дополнительной оси
.container align-items: flex-start;
.item:first-child align-self: flex-end;
Item 1
Item 2 Item 3
21
Растягиваем
.item:first-child flex-grow: 1;
Item 1 Item 2 Item 3
.item flex-grow: 1;
.item:last-child flex-grow: 2;
Item 1 Item 2 Item 3
22
Сжимаем
.item flex-shrink: 1 /* По умолчанию */
Item number one Item number two Item number three Item number four
.item:last-child flex-shrink: 0
Item number oneItem number twoItem number threeItem number four
23
Базовый размер
.item flex-basis: 150px;
Item 1 Item 2 Item 3
.item flex-basis: main-size; /* По умолчанию */
.item width: 150px;
Item 1 Item 2 Item 3
24
Базовый размер
.item flex: 1 1 250px;
Item 1 Item 2 Item 3
25
От забора и до обеда
Header
Представляется логичным, что интеграл от функции, обращающейся в бесконечность в изолированнойточке небезынтересно развивает косвенный интеграл от функции, имеющий конечный разрыв, явнодемонстрируя всю чушь вышесказанного. Интересно отметить, что дивергенция векторного полятрансформирует контрпример. Не доказано, что целое число монотонно. Если предположить, что a < b,то минимум существенно ускоряет интеграл от функции комплексной переменной. Интеграл отфункции, имеющий конечный разрыв поддерживает лист Мёбиуса. Скачок функции вполне вероятен.Бином Ньютона восстанавливает интеграл от функции, обращающейся в бесконечность вдоль линии.
Footer
28
Подход первый
<body>
<header>...</header>
<main>...</main>
<footer>...</footer>
</body>
01.
02.
03.
04.
05.
29
Подход первый
body
min-height: 100vh;
display: flex;
flex-direction: column;
main flex-grow: 1;
01.
02.
03.
04.
05.
06.
30
Не тянется
Header
Представляется логичным, что интеграл от функции, обращающейся в бесконечность в изолированнойточке небезынтересно развивает косвенный интеграл от функции, имеющий конечный разрыв, явнодемонстрируя всю чушь вышесказанного. Интересно отметить, что дивергенция векторного полятрансформирует контрпример. Не доказано, что целое число монотонно.
Footer
31
Не тянется
Не работает minheight на body
32
Не тянется
body
height: 100vh;
display: flex;
flex-direction: column;
main flex-grow: 1;
01.
02.
03.
04.
05.
06.
33
Когда текста много
Header
Представляется логичным, что интеграл от функции, обращающейся в бесконечность в изолированнойточке небезынтересно развивает косвенный интеграл от функции, имеющий конечный разрыв, явнодемонстрируя всю чушь вышесказанного. Интересно отметить, что дивергенция векторного полятрансформирует контрпример. Не доказано, что целое число монотонно. Если предположить, что a < b,то минимум существенно ускоряет интеграл от функции комплексной переменной. Интеграл отфункции, имеющий конечный разрыв поддерживает лист Мёбиуса. Скачок функции вполне вероятен.Бином Ньютона восстанавливает интеграл от функции, обращающейся в бесконечность вдоль линии.Мнимая единица концентрирует тройной интеграл. В общем, интеграл от функции, обращающейся вбесконечность в изолированной точке последовательно концентрирует эмпирический сходящийся ряд.Итак, ясно, что интеграл по ориентированной области основан на тщательном анализе.Представляется логичным, что интеграл от функции, обращающейся в бесконечность в изолированнойточке небезынтересно развивает косвенный интеграл от функции, имеющий конечный разрыв, явнодемонстрируя всю чушь вышесказанного. Интересно отметить, что дивергенция векторного полятрансформирует контрпример. Не доказано, что целое число монотонно. Если предположить, что a < b,то минимум существенно ускоряет интеграл от функции комплексной переменной. Интеграл от
Footer
34
flex-shrink: 1;
Итого
body
height: 100vh;
display: flex;
flex-direction: column;
main flex: 1 0 auto;
header, footer flex: 0 0 auto;
01.
02.
03.
04.
05.
06.
07.
36
IE ≤ 9
body
display: table;
header, main, footer
display: table-cell;
main, body
height: 100%;
01.
02.
03.
04.
05.
06.
07.
08.
09.
37
При чем тут flexbox?
<div class="overlay">
<div class="modal">...</div>
</div>
01.
02.
03.
39
При чем тут flexbox?
.overlay
position: fixed;
padding: 50px 0;
.modal
max-height: 100%;
overflow-y: auto;
01.
02.
03.
04.
05.
06.
07.
08.
40
При чем тут flexbox?
Представляется логичным, что интеграл отфункции, обращающейся в бесконечность визолированной точке небезынтересноразвивает косвенный интеграл от функции,имеющий конечный разрыв, явнодемонстрируя всю чушь вышесказанного.
41
При чем тут flexbox?
Представляется логичным, что интеграл отфункции, обращающейся в бесконечность визолированной точке небезынтересноразвивает косвенный интеграл от функции,имеющий конечный разрыв, явнодемонстрируя всю чушь вышесказанного.Интересно отметить, что дивергенциявекторного поля трансформируетконтрпример. Не доказано, что целое числомонотонно. Если предположить, что a < b, томинимум существенно ускоряет интеграл от
42
Добавляем иконку
<div class="overlay">
<div class="modal">
<span class="icon">i</span>
...
</div>
</div>
01.
02.
03.
04.
05.
06.
43
Добавляем иконку
Представляется логичным, что интеграл отфункции, обращающейся в бесконечность визолированной точке небезынтересноразвивает косвенный интеграл от функции,имеющий конечный разрыв, явнодемонстрируя всю чушь вышесказанного.Интересно отметить, что дивергенциявекторного поля трансформируетконтрпример. Не доказано, что целое числомонотонно. Если предположить, что a < b, томинимум существенно ускоряет интеграл от
i
44
Добавляем флексбоксы
<div class="overflay">
<div class="wrapper">
<span class="icon"></span>
<div class="modal">...</div>
</div>
</div>
01.
02.
03.
04.
05.
06.
45
Добавляем флексбоксы
.overlay, .wrapper
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
01.
02.
03.
04.
05.
06.
46
Добавляем флексбоксы
Представляется логичным, что интеграл отфункции, обращающейся в бесконечность визолированной точке небезынтересноразвивает косвенный интеграл от функции,имеющий конечный разрыв, явнодемонстрируя всю чушь вышесказанного.Интересно отметить, что дивергенциявекторного поля трансформируетконтрпример. Не доказано, что целое числомонотонно. Если предположить, что a < b, томинимум существенно ускоряет интеграл от
i
47
Фоллбэк на таблицы
.overlay
display: table;
.wrapper
display: table-cell;
vertical-align: middle;
text-align: center;
01.
02.
03.
04.
05.
06.
07.
08.
48
Фоллбэк на таблицы
.modal
width: 50%;
max-height: 80vh;
display: inline-block;
.icon
display: inline-block;
margin: -20px 50% -20px 0;
01.
02.
03.
04.
05.
06.
07.
08.
09.
49
Фоллбэк на таблицы
Представляется логичным, что интеграл отфункции, обращающейся в бесконечность визолированной точке небезынтересноразвивает косвенный интеграл от функции,имеющий конечный разрыв, явнодемонстрируя всю чушь вышесказанного.Интересно отметить, что дивергенциявекторного поля трансформируетконтрпример. Не доказано, что целое числомонотонно. Если предположить, что a < b, томинимум существенно ускоряет интеграл отфункции комплексной переменной. Интеграл
i
50
Преимущества flexbox-решения
ОК
Представляется логичным, что интеграл отфункции, обращающейся в бесконечность визолированной точке небезынтересноразвивает косвенный интеграл от функции,имеющий конечный разрыв, явнодемонстрируя всю чушь вышесказанного.Интересно отметить, что дивергенциявекторного поля трансформируетконтрпример. Не доказано, что целое числомонотонно. Если предположить, что a < b, то
i
51
Преимущества flexbox-решения
Представляется логичным, что интеграл отфункции, обращающейся в бесконечность визолированной точке небезынтересноразвивает косвенный интеграл от функции,имеющий конечный разрыв, явно
Представляется логичным, что интеграл отфункции, обращающейся в бесконечность визолированной точке небезынтересноразвивает косвенный интеграл от функции,имеющий конечный разрыв, явно
i
52
Панель города
Панель города
Сначала на таблицах. Шаг 1.
<table class="info">
<td class="city">Петропавловск-Камчатский</td>
<td class="wrapper">...</td>
</table>
01.
02.
03.
04.
55
Сначала на таблицах. Шаг 1.
.info
width: 100%;
.city
white-space: nowrap;
.wrapper
width: 100%;
01.
02.
03.
04.
05.
06.
07.
08.
09.
56
Сначала на таблицах. Шаг 1
ПетропавловскКамчатский
57
Сначала на таблицах. Шаг 2.
<table class="info">
<td class="city">Петропавловск-Камчатский</td>
<td class="wrapper">
<div class="another-wrapper">...</div>
</td>
</table>
01.
02.
03.
04.
05.
06.
58
Сначала на таблицах. Шаг 2.
.another-wrapper
position: relative;
01.
02.
03.
59
Сначала на таблицах. Шаг 3.
<table class="info">
<td class="city">Петропавловск-Камчатский</td>
<td class="wrapper">
<div class="another-wrapper">
<div class="just-one-more-wraper-ok">...</td>
</div>
</td>
</table>
01.
02.
03.
04.
05.
06.
07.
08.
60
Сначала на таблицах. Шаг 3.
.just-one-more-wrapper-ok
position: absolute;
right: 0;
min-width: 100%;
01.
02.
03.
04.
05.
61
Сначала на таблицах. Шаг 4.
<div class="just-one-more-wrapper-ok">
<table class="links">
<td class="left">...</td>
<td class="center">...</td>
<td class="right">...</td>
</table>
</td>
01.
02.
03.
04.
05.
06.
62
Сначала на таблицах. Шаг 4.
.links
width: 100%;
01.
02.
03.
63
Сначала на таблицах. Шаг 4.
ПетропавловскКамчатский Вокзалы Аэроэкспресс Служба поддержки
64
Сначала на таблицах. Шаг 4.
ПетропавловскКамчатскийВокзалы Аэропорты Такси Аэроэкспресс Автобус Служба поддержки
65
Еще раз
<table class="info"> <td class="city">Петропавловск-Камчатский</td> <td class="wrapper"> <div class="another-wrapper"> <div class="just-one-more-wraper-ok"> <table class="links"> <td class="left">...</td> <td class="center">...</td> <td class="right">...</td> </table> </div> </div> </td></table>
01.02.03.04.05.06.07.08.09.10.11.12.13.14.
66
Теперь на флексах
<div class="info">
<div class="city">Петропавловск-Камчатский</div>
<div class="left">Аэропорты</div>
<div class="center">Аэроэкспресс</div>
<div class="right">Служба поддержки</div>
</div>
01.
02.
03.
04.
05.
06.
68
Теперь на флексах
.info display: flex;
.city flex: 0 1 auto; /* По умолчанию */
.center flex: 1 0 auto;
.left, .right flex: 0 0 auto;
01.
02.
03.
04.
69
Теперь на флексах
Вокзалы Аэроэкспресс Служба поддержкиПетропавловскКамчатский
70
Теперь на флексах
Аэропорты Вокзалы Аэроэкспресс Такси Автобус Служба поддержкиПетропавловскКамчатский
71
Список литературы
— A Complete Guide to Flexbox – Chris Coyer
— Solved by Flexbox – Philip Walton
— Dive into Flexbox – Greg Smith
— Flexbox isn't slow – Paul Irish
— Flexbox. Теперь понятно – Вадим Макеев
— Leveling Up With Flexbox – Zoe Gillenwater
72
О достоинствах
— Легко решает нетривиальные задачи
— Не хак
— Делает код лучше
73
Y U NO USE FLEXBOX?
— Нигде не поддерживается
— Много префиксов
— IE ≤ 9
— Производительность
— Новое и непонятное
74
FLEXBOX YEAH
— Нигде не поддерживается
— Много префиксов
— IE ≤ 9
— Производительность
— Новое и непонятное
75
Спасибо!
forshtreter@yandexteam.ru
@forshtreter
76