Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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: 5...
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
ma...
6 /36
Законы этого мира
7 /36
• flex-direction
• justify-content
• align-items
• flex-wrap
Основные свойства
• flex-grow
• flex-shrink
• flex-basi...
8 /36
Оси можно вращать
main { flex-direction: row; }
/* Варианты */
• row (по-умолчанию)
• row-reverse
• column
• column-...
9 /36
Оси можно вращать
10 /36
Выравнивание по главной оси
main {
justify-content: flex-start;
}
/* Варианты */
• flex-start (по-умолчанию)
• flex...
11 /36
Выравнивание по главной оси
12 /36
Выравнивание по побочной оси
main {
align-items: flex-start;
}
/* Варианты */
• flex-start (по-умолчанию)
• flex-en...
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: ...
19 /36
Краткая запись
main > div {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
}
main > div {
flex: 0 1 auto;
}
=>
20 /36
Примеры
21 /36
Центрирование элемента по
вертикали и горизонтали
44 года назад люди ходили по Луне,
но я до сих пор не могу
отцент...
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: cen...
24 /36
Вертикальное выравнивание
25 /36
Решение
<main>
<img src=“ico.png”>
<p>Text text…</p>
</main>
HTML
main {
display: flex;
align-items: center;
}
main...
26 /36
Прилипающий футер
27 /36
Решение
<body>
<header>Header</header>
<main>Content…</main>
<footer>Footer 2015</footer>
</body>
HTML
body {
displ...
28 /36
Адаптивная разметка блоков
29 /36
Решение
<body>
<div>…</div>
…(еще блоки)
</body>
HTML
body {
display: flex;
flex-wrap: wrap;
justify-content: space...
30 /36
Адаптивное меню
31 /36
Решение
<nav>
<div>новости</div>
<div>статьи</div>
<div>контакты</div>
</nav>
HTML
nav {
display: flex;
flex-wrap: ...
32 /36
Доступность
33 /36
Резюме
Flexbox это:
• Адаптивные элементы из коробки
• Предсказуемость поведения
• Легкое выравнивание элементов
• ...
Резюме
34 /36
• Не нужна поддержка старых браузеров
• Готовность попробовать то, что лучше
Flexbox, когда:
35 /36
Будущее
среди нас!
36 /36
Гибче мыслишь - больше спишь!
MoscowJS 24
Алексей Чернышев RG.RU
@mrLozchka
Материалы
http://bit.ly/flexbox2015
Upcoming SlideShare
Loading in …5
×

1

Share

Download to read offline

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

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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

  1. 1. MoscowJS 24 Алексей Чернышев RG.RU @mrLozchka 30 июля 2015 Flexbox Гибче мыслишь – больше спишь
  2. 2. 1/36 О чем будем говорить • Что такое flexbox? • Как он работает? • Где использовать?
  3. 3. 2/36 Зачем? div { width: 100px; height: 60px; margin-top: -30px; margin-left: -50px; position: absolute; top: 50%; left: 50%; }
  4. 4. 3 /36 Что такое flexbox? • Модуль CSS • Новая система позиционирования • Элементы выравниваются по осям • Автоматически тянутся, сжимаются, выравниваются, меняются местами и т.п.
  5. 5. 4 /36 Гибкий мир
  6. 6. 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
  7. 7. 6 /36 Законы этого мира
  8. 8. 7 /36 • flex-direction • justify-content • align-items • flex-wrap Основные свойства • flex-grow • flex-shrink • flex-basis Контейнер Элемент
  9. 9. 8 /36 Оси можно вращать main { flex-direction: row; } /* Варианты */ • row (по-умолчанию) • row-reverse • column • column-reverse
  10. 10. 9 /36 Оси можно вращать
  11. 11. 10 /36 Выравнивание по главной оси main { justify-content: flex-start; } /* Варианты */ • flex-start (по-умолчанию) • flex-end • center • space-between • space-around
  12. 12. 11 /36 Выравнивание по главной оси
  13. 13. 12 /36 Выравнивание по побочной оси main { align-items: flex-start; } /* Варианты */ • flex-start (по-умолчанию) • flex-end • center • baseline • stretch
  14. 14. 13 /36 Выравнивание по побочной оси
  15. 15. 14 /36 Многострочный поток main { flex-wrap: nowrap; } /* Варианты */ • nowrap (по-умолчанию) • wrap • wrap-reverse
  16. 16. 15 /36 Многострочный поток
  17. 17. 16 /36 Растягивание элементов main > div { flex-grow: 0; /* (по-умолчанию) */ }
  18. 18. 17 /36 Сжатие элементов main > div { flex-shrink: 1; /* (по-умолчанию) */ }
  19. 19. 18 /36 Базовый размер элемента main > div { flex-basis: auto; /* (по-умолчанию) */ } main > div:first-child { flex-basis: 300px; width: 100px; }
  20. 20. 19 /36 Краткая запись main > div { flex-grow: 0; flex-shrink: 1; flex-basis: auto; } main > div { flex: 0 1 auto; } =>
  21. 21. 20 /36 Примеры
  22. 22. 21 /36 Центрирование элемента по вертикали и горизонтали 44 года назад люди ходили по Луне, но я до сих пор не могу отцентровать элементы по вертикали в CSS James Anderson “ “
  23. 23. 22 /36 Центрируем <main> <div>Center me</div> </main> HTML main { height: 100%; } CSS Пример
  24. 24. 23 /36 Решение с flexbox main { display: flex; } main div { margin: auto; } или main { display: flex; justify-content: center; align-items: center; }
  25. 25. 24 /36 Вертикальное выравнивание
  26. 26. 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
  27. 27. 26 /36 Прилипающий футер
  28. 28. 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
  29. 29. 28 /36 Адаптивная разметка блоков
  30. 30. 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
  31. 31. 30 /36 Адаптивное меню
  32. 32. 31 /36 Решение <nav> <div>новости</div> <div>статьи</div> <div>контакты</div> </nav> HTML nav { display: flex; flex-wrap: wrap; justify-content: center; } CSS
  33. 33. 32 /36 Доступность
  34. 34. 33 /36 Резюме Flexbox это: • Адаптивные элементы из коробки • Предсказуемость поведения • Легкое выравнивание элементов • Уменьшение количества кода
  35. 35. Резюме 34 /36 • Не нужна поддержка старых браузеров • Готовность попробовать то, что лучше Flexbox, когда:
  36. 36. 35 /36 Будущее среди нас!
  37. 37. 36 /36 Гибче мыслишь - больше спишь! MoscowJS 24 Алексей Чернышев RG.RU @mrLozchka Материалы http://bit.ly/flexbox2015
  • zhelezko

    Feb. 18, 2016

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

Views

Total views

1,044

On Slideshare

0

From embeds

0

Number of embeds

7

Actions

Downloads

14

Shares

0

Comments

0

Likes

1

×