Поддержка Flexbox в различных версиях браузеров

1.

Поддержка Flexbox в различных версиях браузеров
ТЕМА 18
Flexbox хорошо поддерживается современными
браузерами, но старые реализации могут
отличаться. Простая структура HTML и запасные
правила снижают риск.
flex-direction
направление элементов
justify-content
распределение по основной оси
align-items
выравнивание по второй оси
01

2.

Задача технологии
02
КАКУЮ ПРОБЛЕМУ РЕШАЕМ
Один макет должен оставаться понятным на
разных экранах и в разных браузерах. В этой
теме мы разберём один конкретный инструмент
и сразу свяжем его с практическим сайтом.
Практический результат
Навигация и карточки с резервным видом
Главная цель
Создать интерфейс на Flexbox и сохранить рабочий
вид при отключении Flexbox.

3.

Основные понятия
03
ПРОСТЫЕ ОПРЕДЕЛЕНИЯ
Сначала важно понять слова, которые
встречаются в коде. Они описывают
родительские блоки, размеры, проверку
поддержки или способ размещения элементов.
flex-direction
направление элементов
justify-content
распределение по основной оси
align-items
выравнивание по второй оси

4.

Структура HTML
04
ЭЛЕМЕНТЫ СТРАНИЦЫ
HTML задаёт смысл и порядок элементов. Такой
порядок должен оставаться понятным даже без
CSS. Классы нужны, чтобы выбрать элементы в
файле оформления.
<nav class="menu">
<a href="#">Главная</a>
<a href="#">Каталог</a>
<a href="#">Контакты</a>
</nav>
<section class="offers">...</section>

5.

Основные правила CSS
05
ПЕРВОЕ ОФОРМЛЕНИЕ
Этот фрагмент показывает главные свойства
темы. Значения можно изменять, но каждое
свойство должно решать конкретную задачу
макета.
.menu a { display: inline-block; marginright: 16px; }
.menu, .offers {
display: flex;
gap: 16px;
}
.offers > * { flex: 1; }

6.

Объяснение свойств
06
ЧТО ДЕЛАЕТ КАЖДАЯ СТРОКА
Не нужно запоминать весь код. Важно понимать
связь: селектор выбирает элемент, свойство
сообщает, что изменить, а значение уточняет
способ изменения.
display: inline-block
оставляет ссылки рядом как простой запасной
вариант.
display: flex
включает удобное управление расположением.
gap
создаёт одинаковое расстояние.

7.

Адаптация под экран
07
ИЗМЕНЕНИЕ МАКЕТА
Медиазапрос или условие поддержки меняет
только необходимые правила. Основная HTMLструктура при этом остаётся прежней.
@media (max-width: 600px) {
.menu, .offers { flex-direction: column; }
.menu a { margin-right: 0; }
}

8.

Связь HTML и CSS
08
КАК РАБОТАЕТ КЛАСС
Класс из HTML должен точно совпадать с
селектором в CSS. Если имя написано поразному, браузер не применит оформление.
Поэтому сначала проверяют структуру, затем
внешний вид.
<nav class="menu">
.menu a { display: inline-block; marginright: 16px; }

9.

Типичные ошибки
09
ЧТО ПРОВЕРИТЬ ПРИ ПРОБЛЕМЕ
Старые браузеры могут по-разному
рассчитывать flex-basis и min-width. Проверяйте
длинный текст и добавляйте min-width: 0
дочерним элементам при переполнении.
Проверка 1
Совпадают ли имена классов
Проверка 2
Закрыты ли фигурные скобки
Проверка 3
Нет ли фиксированной ширины, создающей прокрутку

10.

Проверка в браузере
10
ШИРОКИЙ И УЗКИЙ ЭКРАН
Отключите display: flex в DevTools. Ссылки и
карточки должны остаться доступными, даже
если внешний вид станет проще.
Компьютер
Проверьте широкое окно
Телефон
Проверьте ширину около 360 px
Другой браузер
Сравните Chrome, Firefox или Edge

11.

Практическая работа
11
САМОСТОЯТЕЛЬНОЕ ПРИМЕНЕНИЕ
Студент создаёт проект «Навигация и карточки с
резервным видом». В документе Word есть
структура, фрагменты кода, построчные
объяснения и пропуски. Оформление и
содержание студент выбирает самостоятельно.
Сдать
HTML, CSS и скриншоты
Защитить
Объяснить два свойства своими словами

12.

Итоги
12
ЧТО НУЖНО ЗАПОМНИТЬ
Создать интерфейс на Flexbox и сохранить
рабочий вид при отключении Flexbox. Flexbox
хорошо поддерживается современными
браузерами, но старые реализации могут
отличаться. Простая структура HTML и запасные
правила снижают риск.
flex-direction
направление элементов
justify-content
распределение по основной оси
align-items
выравнивание по второй оси