"Flexbox — гибче мыслишь, больше спишь", Алексей Чернышев, MoscowJS 24

MoscowJS 24
Алексей Чернышев RG.RU
@mrLozchka
30 июля 2015
Flexbox
Гибче мыслишь – больше спишь

1/36
О чем будем говорить
• Что такое flexbox?
• Как он работает?
• Где использовать?

2/36
Зачем?
div {
width: 100px;
height: 60px;
margin-top: -30px;
margin-left: -50px;
position: absolute;
top: 50%;
left: 50%;
}

3 /36
Что такое flexbox?
• Модуль CSS
• Новая система позиционирования
• Элементы выравниваются по осям
• Автоматически тянутся, сжимаются,
выравниваются, меняются местами и т.п.

5 /36
Создаем flex мир
<main>
<div>1 Venus</div>
<div>2 Earth</div>
<div>3 Mars</div>
<div>4 Jupiter</div>
</main>
HTML
main {
display: flex;
}
CSS

6 /36
Законы этого мира

7 /36
• flex-direction
• justify-content
• align-items
• flex-wrap
Основные свойства
• flex-grow
• flex-shrink
• flex-basis
Контейнер Элемент

8 /36
Оси можно вращать
main { flex-direction: row; }
/* Варианты */
• row (по-умолчанию)
• row-reverse
• column
• column-reverse

9 /36
Оси можно вращать

10 /36
Выравнивание по главной оси
main {
justify-content: flex-start;
}
• flex-start (по-умолчанию)
• flex-end
• center
• space-between
• space-around

11 /36
Выравнивание по главной оси

12 /36
Выравнивание по побочной оси
main {
align-items: flex-start;
}
• flex-start (по-умолчанию)
• flex-end
• center
• baseline
• stretch

13 /36
Выравнивание по побочной оси

14 /36
Многострочный поток
main {
flex-wrap: nowrap;
}
• nowrap (по-умолчанию)
• wrap
• wrap-reverse

15 /36
Многострочный поток

16 /36
Растягивание элементов
main > div {
flex-grow: 0; /* (по-умолчанию) */
}

17 /36
Сжатие элементов
main > div {
flex-shrink: 1; /* (по-умолчанию) */
}

18 /36
Базовый размер элемента
main > div {
flex-basis: auto; /* (по-умолчанию) */
}
main > div:first-child {
flex-basis: 300px;
width: 100px;
}

19 /36
Краткая запись
main > div {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
}
main > div {
flex: 0 1 auto;
}
=>

21 /36
Центрирование элемента по
вертикали и горизонтали
44 года назад люди ходили по Луне,
но я до сих пор не могу
отцентровать элементы по
вертикали в CSS
James Anderson
“
“

22 /36
Центрируем
<main>
<div>Center me</div>
</main>
HTML
main {
height: 100%;
}
CSS
Пример

23 /36
Решение с flexbox
main {
display: flex;
}
main div {
margin: auto;
}
или
main {
display: flex;
justify-content: center;
align-items: center;
}

24 /36
Вертикальное выравнивание

25 /36
Решение
<main>
<img src=“ico.png”>
<p>Text text…</p>
</main>
HTML
main {
display: flex;
align-items: center;
}
main img {
flex-shrink: 0;
}
CSS

26 /36
Прилипающий футер

27 /36
Решение
<body>
<header>Header</header>
<main>Content…</main>
<footer>Footer 2015</footer>
</body>
HTML
body {
display: flex;
flex-direction: column;
}
header,main,footer { flex-shrink: 0; }
main { flex-grow: 1; }
CSS

28 /36
Адаптивная разметка блоков

29 /36
Решение
<body>
<div>…</div>
…(еще блоки)
</body>
HTML
body {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
div { flex: 1 0 200px; } /* или */
div {
flex-grow: 1;
flex-shrink: 0;
flex-basis: 200px;
}
CSS

30 /36
Адаптивное меню

31 /36
Решение
<nav>
<div>новости</div>
<div>статьи</div>
<div>контакты</div>
</nav>
HTML
nav {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
CSS

33 /36
Резюме
Flexbox это:
• Адаптивные элементы из коробки
• Предсказуемость поведения
• Легкое выравнивание элементов
• Уменьшение количества кода

Резюме
34 /36
• Не нужна поддержка старых браузеров
• Готовность попробовать то, что лучше
Flexbox, когда:

35 /36
Будущее
среди нас!

36 /36
Гибче мыслишь - больше спишь!
MoscowJS 24
Алексей Чернышев RG.RU
@mrLozchka
Материалы
http://bit.ly/flexbox2015

"Flexbox — гибче мыслишь, больше спишь", Алексей Чернышев, MoscowJS 24

Recommended

Recommended

More Related Content

More from MoscowJS

More from MoscowJS (20)

"Flexbox — гибче мыслишь, больше спишь", Алексей Чернышев, MoscowJS 24