Flexbox – замечательная технология с одним существенным недостатком: ей почему-то никто не пользуется. Я попытаюсь сломать расхожие стериотипы о флексбоксах и поделюсь опытом их использования в реальном проекте. Будет несколько интересных примеров, рассказ об особенностях работы в разных браузерах, фолбэки для старых IE и особенности взаимодействия с другими CSS-свойствами.

1. Гибкие коробки на практике
Арсений Форштретер
Старший разработчик интерфейсов

2. Y U NO USE FLEXBOX?
— Нигде не поддерживается
1

4. Y U NO USE FLEXBOX?
— Нигде не поддерживается
— Много префиксов
3

5. Очень много префиксов
.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

6. Автопрефиксер же!
.box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
01.
02.
03.
04.
05.
06.
5

7. Y U NO USE FLEXBOX?
— Нигде не поддерживается
— Много префиксов
— IE ≤ 9
6

8. display: table;
7

9. Y U NO USE FLEXBOX?
— Нигде не поддерживается
— Много префиксов
— IE ≤ 9
— Производительность
8

10. Flexbox layout isn't slow
Paul Irish

11. Y U NO USE FLEXBOX?
— Нигде не поддерживается
— Много префиксов
— IE ≤ 9
— Производительность
— Новое и непонятное
10

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

13. Ликбез
<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

14. Ликбез
Item 1
Item 2
Item 3
13

15. Добавляем flexbox
.container { display: flex; }
Item 1 Item 2 Item 3
.container { display: inline-flex; }
Item 1 Item 2 Item 3
14

16. Задаем направление
.container { flex-direction: column; }
Item 1
Item 2
Item 3
15

17. Выравниваем по главной оси
.container { justify-content: flex-end; }
Item 1 Item 2 Item 3
.container { justify-content: center; }
Item 1 Item 2 Item 3
16

18. Выравниваем по главной оси
.container { justify-content: space-between; }
Item 1 Item 2 Item 3
.container { justify-content: space-around; }
Item 1 Item 2 Item 3
17

19. Добавляем margin
.item:nth-child(3) { margin: auto; }
Item 1 Item 2
Item 3
Item 4 Item 5
18

20. Выравниваем по дополнительной оси
.container { align-items: flex-start; }
Item 1 Item 2 Item 3
.container { align-items: flex-end; }
Item 1 Item 2 Item 3
19

21. Выравниваем по дополнительной оси
.container { align-items: center; }
Item 1 Item 2 Item 3
.container { align-items: baseline; }
Item 1 Item 2 Item 3
20

22. Выравниваем по дополнительной оси
.container { align-items: flex-start; }
.item:first-child { align-self: flex-end; }
Item 1
Item 2 Item 3
21

23. Растягиваем
.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

24. Сжимаем
.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 twIotem number threeItem number four
23

25. Базовый размер
.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

26. Базовый размер
.item { flex: 1 1 250px; }
Item 1 Item 2 Item 3
25

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

30. Подход первый
<body>
<header>...</header>
<main>...</main>
<footer>...</footer>
</body>
01.
02.
03.
04.
05.
29

31. Подход первый
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
main { flex-grow: 1; }
01.
02.
03.
04.
05.
06.
30

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

33. Не тянется
Не работает min­height
на body
32

34. Не тянется
body {
height: 100vh;
display: flex;
flex-direction: column;
}
main { flex-grow: 1; }
01.
02.
03.
04.
05.
06.
33

35. Когда текста много
Header
Представляется логичным, что интеграл от функции, обращающейся в бесконечность в изолированной
точке небезынтересно развивает косвенный интеграл от функции, имеющий конечный разрыв, явно
демонстрируя всю чушь вышесказанного. Интересно отметить, что дивергенция векторного поля
трансформирует контрпример. Не доказано, что целое число монотонно. Если предположить, что a < b,
то минимум существенно ускоряет интеграл от функции комплексной переменной. Интеграл от
функции, имеющий конечный разрыв поддерживает лист Мёбиуса. Скачок функции вполне вероятен.
Бином Ньютона восстанавливает интеграл от функции, обращающейся в бесконечность вдоль линии.
Мнимая единица концентрирует тройной интеграл. В общем, интеграл от функции, обращающейся в
бесконечность в изолированной точке последовательно концентрирует эмпирический сходящийся ряд.
Итак, ясно, что интеграл по ориентированной области основан на тщательном анализе.
Представляется логичным, что интеграл от функции, обращающейся в бесконечность в изолированной
точке небезынтересно развивает косвенный интеграл от функции, имеющий конечный разрыв, явно
демонстрируя всю чушь вышесказанного. Интересно отметить, что дивергенция векторного поля
Footer
трансформирует контрпример. Не доказано, что целое число монотонно. Если предположить, что a < b,
то минимум существенно ускоряет интеграл от функции комплексной переменной. Интеграл от
34

36. flex-shrink: 1;

37. Итого
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

38. 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

40. При чем тут flexbox?
<div class="overlay">
<div class="modal">...</div>
</div>
01.
02.
03.
39

41. При чем тут flexbox?
.overlay {
position: fixed;
padding: 50px 0;
}
.modal {
max-height: 100%;
overflow-y: auto;
}
01.
02.
03.
04.
05.
06.
07.
08.
40

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

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

44. Добавляем иконку
<div class="overlay">
<div class="modal">
<span class="icon">i</span>
...
</div>
</div>
01.
02.
03.
04.
05.
06.
43

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

46. Добавляем флексбоксы
<div class="overflay">
<div class="wrapper">
<span class="icon"></span>
<div class="modal">...</div>
</div>
</div>
01.
02.
03.
04.
05.
06.
45

47. Добавляем флексбоксы
.overlay, .wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
01.
02.
03.
04.
05.
06.
46

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

49. Фоллбэк на таблицы
.overlay {
display: table;
}
.wrapper {
display: table-cell;
vertical-align: middle;
text-align: center;
}
01.
02.
03.
04.
05.
06.
07.
08.
48

50. Фоллбэк на таблицы
.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

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

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

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

54. Панель города

55. Панель города

56. Сначала на таблицах. Шаг 1.
<table class="info">
<td class="city">Петропавловск-Камчатский</td>
<td class="wrapper">...</td>
</table>
01.
02.
03.
04.
55

57. Сначала на таблицах. Шаг 1.
.info {
width: 100%;
}
.city {
white-space: nowrap;
}
.wrapper {
width: 100%;
}
01.
02.
03.
04.
05.
06.
07.
08.
09.
56

58. Сначала на таблицах. Шаг 1
Петропавловск­Камчатский
57

59. Сначала на таблицах. Шаг 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

60. Сначала на таблицах. Шаг 2.
.another-wrapper {
position: relative;
}
01.
02.
03.
59

61. Сначала на таблицах. Шаг 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

62. Сначала на таблицах. Шаг 3.
.just-one-more-wrapper-ok {
position: absolute;
right: 0;
min-width: 100%;
}
01.
02.
03.
04.
05.
61

63. Сначала на таблицах. Шаг 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

64. Сначала на таблицах. Шаг 4.
.links {
width: 100%;
}
01.
02.
03.
63

65. Сначала на таблицах. Шаг 4.
64
Петропавловск­Камчатский
Вокзалы Аэроэкспресс Служба поддержки

66. Сначала на таблицах. Шаг 4.
65
Петропавловск­КамчатскиВойкзалы
Аэропорты Такси Аэроэкспресс Автобус Служба поддержки

67. Еще раз
<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

69. Теперь на флексах
<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

70. Теперь на флексах
.info { display: flex; }
.city { flex: 0 1 auto; /* По умолчанию */}
.center { flex: 1 0 auto; }
.left, .right { flex: 0 0 auto; }
01.
02.
03.
04.
69

71. Теперь на флексах
70
Вокзалы Аэроэкспресс Петропавловск­Камчатский
Служба поддержки

72. Теперь на флексах
71
Аэропорты Вокзалы Аэроэкспресс Такси Автобус Петропавловск­Камчатский
Служба поддержки

73. Список литературы
— 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

74. О достоинствах
— Легко решает нетривиальные задачи
— Не хак
— Делает код лучше
73

75. Y U NO USE FLEXBOX?
— Нигде не поддерживается
— Много префиксов
— IE ≤ 9
— Производительность
— Новое и непонятное
74

76. FLEXBOX YEAH
— Нигде не поддерживается
— Много префиксов
— IE ≤ 9
— Производительность
— Новое и непонятное
75

77. Спасибо!
forshtreter@yandex­team.
ru
@forshtreter
76