Содержание
- 2. Flexbox Главная задумка flex-вёрстки в наделении контейнера способностью изменять ширину/высоту (и порядок) своих элементов для наилучшего
- 10. Оси
- 11. Оси
- 15. display: flex | inline-flex; Применяется к: родительскому элементу flex-контейнера. Определяет flex-контейнер (инлайновый или блочный в зависимости
- 16. Пример HTML Я ПЕРВЫЙ Я ВТОРОЙ Я ТРЕТИЙ Я ЧЕТВЕРТЫЙ .flex { height:640px; } .flex div
- 17. Включим flexbox .flex { height:640px; display:flex; }
- 22. Меняем направление по оси .flex { height:640px; display:flex; background: #838283; flex-direction:row-reverse; }
- 23. Поворачиваем саму ось .flex { height:640px; display:flex; background: #838283; flex-direction:column; }
- 24. Меняем направление по оси .flex { height:640px; display:flex; background: #838283; flex-direction:column-reverse; }
- 26. Пример .flex { height:640px; display:flex; background: #838283; } .flex { height:640px; display:flex; background: #838283; justify-content:flex-end; }
- 28. Пример .flex { height:640px; display:flex; background: #838283; justify-content:center; align-items:flex-end; } .flex { height:640px; display:flex; background: #838283;
- 29. Перестановка Применяется к: дочернему элементу order:
- 30. .flex div:first-child { background:#090; order:2; } .flex div:last-child { background:#C00; order:1; } .flex div:nth-child(2) { order:3;
- 31. flex-grow- Применяется к: дочернему элементу. Определяет для flex-элемента возможность «вырастать» при необходимости. flex-grow: (по умолчанию 0)
- 34. flex-shrink- Применяется к: дочернему элементу. Определяет для flex-элемента возможность «сжиматься» при необходимости. flex-basis- Применяется к: дочернему
- 35. Align-self – выравнивание отдельного элемента(Применяется к: дочернему элементу) .flex div:nth-child(2) { flex-grow:1; align-self:flex-start; } .flex {
- 37. Вендорные префиксы
- 38. Резервные варианты для Flexbox
- 39. Кроссбраузерный flexbox
- 43. Читать Поддержка Flexbox в браузерах Таблица соответствия F09 и F11 Таблица соответствия F09 и F11 для
- 44. Задание
- 45. Задание
- 47. Скачать презентацию