Гибкие коробки на практике — Арсений Форштретер

Гибкие коробки на практике

Арсений Форштретер

Старший разработчик интерфейсов

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

Flexbox layout isn't slowPaul Irish

http://updates.html5rocks.com/2013/10/Flexbox-layout-isn-t-slow

Y U NO USE FLEXBOX?



— IE ≤ 9


— Новое и непонятное

10

Flexbox. Теперь понятноВадим Макеев

http://pepelsbey.net/2013/05/flexbox-gotcha/

Ликбез

<div class="container">

<div class="item">Item 1</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;


14

Задаем направление

.container flex-direction: column;

Item 1

Item 2

Item 3

15

Выравниваем по главной оси

.container justify-content: flex-end;


.container justify-content: center;


16

Выравниваем по главной оси

.container justify-content: space-between;


.container justify-content: space-around;


17

Добавляем margin

.item:nth-child(3) margin: auto;

Item 1 Item 2Item 3

Item 4 Item 5

18

Выравниваем по дополнительной оси

.container align-items: flex-start;


.container align-items: flex-end;


19


.container align-items: center;


.container align-items: baseline;


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 flex-grow: 1;

.item:last-child flex-grow: 2;


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 flex-basis: main-size; /* По умолчанию */

.item width: 150px;


24

Базовый размер

.item flex: 1 1 250px;


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;


main flex-grow: 1;

01.

02.

03.

04.

05.

06.

30

Не тянется

Header

Представляется логичным, что интеграл от функции, обращающейся в бесконечность в изолированнойточке небезынтересно развивает косвенный интеграл от функции, имеющий конечный разрыв, явнодемонстрируя всю чушь вышесказанного. Интересно отметить, что дивергенция векторного полятрансформирует контрпример. Не доказано, что целое число монотонно.

Footer

31

Не тянется

Не работает minheight на body

32

Не тянется

body

height: 100vh;

display: flex;


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;


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


.overlay

position: fixed;

padding: 50px 0;

.modal

max-height: 100%;

overflow-y: auto;

01.

02.

03.

04.

05.

06.

07.

08.

40


Представляется логичным, что интеграл отфункции, обращающейся в бесконечность визолированной точке небезынтересноразвивает косвенный интеграл от функции,имеющий конечный разрыв, явнодемонстрируя всю чушь вышесказанного.

41


Представляется логичным, что интеграл отфункции, обращающейся в бесконечность визолированной точке небезынтересноразвивает косвенный интеграл от функции,имеющий конечный разрыв, явнодемонстрируя всю чушь вышесказанного.Интересно отметить, что дивергенциявекторного поля трансформируетконтрпример. Не доказано, что целое числомонотонно. Если предположить, что a < b, томинимум существенно ускоряет интеграл от

42

Добавляем иконку

<div class="overlay">

<div class="modal">

<span class="icon">i</span>

...

</div>

</div>

01.

02.

03.

04.

05.

06.

43

Добавляем иконку


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;


align-items: center;

justify-content: center;

01.

02.

03.

04.

05.

06.

46



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


.info

width: 100%;

.city

white-space: nowrap;

.wrapper

width: 100%;

01.

02.

03.

04.

05.

06.

07.

08.

09.

56

Сначала на таблицах. Шаг 1

ПетропавловскКамчатский

57




<td class="wrapper">

<div class="another-wrapper">...</div>

</td>

</table>

01.

02.

03.

04.

05.

06.

58


.another-wrapper

position: relative;

01.

02.

03.

59




<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


.just-one-more-wrapper-ok

position: absolute;

right: 0;

min-width: 100%;

01.

02.

03.

04.

05.

61


<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


.links

width: 100%;

01.

02.

03.

63


ПетропавловскКамчатский Вокзалы Аэроэкспресс Служба поддержки

64


ПетропавловскКамчатскийВокзалы Аэропорты Такси Аэроэкспресс Автобус Служба поддержки

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

http://css-tricks.com/snippets/css/a-guide-to-flexbox/

http://philipwalton.github.io/solved-by-flexbox/

http://bocoup.com/weblog/dive-into-flexbox/

http://updates.html5rocks.com/2013/10/Flexbox-layout-isn-t-slow

http://pepelsbey.net/2013/05/flexbox-gotcha/

О достоинствах

— Легко решает нетривиальные задачи

— Не хак

— Делает код лучше

73

Y U NO USE FLEXBOX?



— IE ≤ 9



74

FLEXBOX YEAH



— IE ≤ 9



75

Спасибо!

[email protected]

@forshtreter

76

mailto:[email protected]

http://twitter.com/forshtreter

Technology

Гибкие коробки на практике — Арсений Форштретер