"flexbox — гибче мыслишь, больше спишь", Алексей...

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

• Новая система позиционирования

• Элементы выравниваются по осям

• Автоматически тянутся, сжимаются, выравниваются, меняются местами и т.п.

4 /36

Гибкий мир

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; }

=>

20 /36

Примеры

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

32 /36

Доступность

33 /36

Резюме Flexbox это:

• Адаптивные элементы из коробки

• Предсказуемость поведения

• Легкое выравнивание элементов

• Уменьшение количества кода

Резюме

34 /36

• Не нужна поддержка старых браузеров

• Готовность попробовать то, что лучше

Flexbox, когда:

35 /36

Будущее среди нас!

36 /36

Гибче мыслишь - больше спишь!

MoscowJS 24 Алексей Чернышев RG.RU @mrLozchka

Материалы

http://bit.ly/flexbox2015

http://bit.ly/flexbox2015

"flexbox — гибче мыслишь, больше спишь", Алексей...

Software