CSS · Урок 6

Flexbox и CSS Grid

Две главные технологии раскладки. Flexbox растягивает элементы один за другим, а Grid строит сетку из строк и колонок.

Flexbox: выравнивание одного измерения

Flexbox отлично подходит для меню, строк кнопок, карточек в ряд. Контейнеру задаём display: flex — и его дети выстраиваются в линию.

.nav-row {
  display: flex;
  justify-content: space-between; /* основная ось */
  align-items: center;           /* поперечная ось */
  gap: 12px;
}

Лого

Главная · О нас · Контакты

Кнопка

Свойства для родителя:

justify-content — выравнивание по главной оси: flex-start, center, space-between, space-around;
align-items — по поперечной оси: stretch, center, flex-start;
flex-wrap: wrap — разрешить перенос на новую строку;
gap — расстояние между элементами.

Для детей:

.card { flex: 1; }        /* растёт и занимает место */
.side { flex: 0 0 200px; } /* фиксированная ширина */
.grow { flex-grow: 2; } /* слайдер роста */

💡

Психологический трюк: justify-content: center + align-items: center на display:flex-контейнере — самый быстрый способ отцентрировать блок по вертикали и горизонтали.

CSS Grid: сетка двух измерений

Grid создаёт «шахматку»: задаём колонки и строки — элементы раскладываются автоматически.

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

Полезные приёмы:

.layout {
  display: grid;
  grid-template-columns: 200px 1fr;      /* боковая + контент */
  grid-template-rows: auto auto;
}

.area-header  { grid-column: 1 / -1; }            /* на всю ширину */
.item          { grid-row: 1 / 3; }               /* через 2 строки */
.area          { grid-area: 2 / 2 / 3 / 3; }  /* строка/колонка */

Адаптивность через media queries

Сетка подстраивается под ширину экрана с помощью @media:

.grid { grid-template-columns: 1fr; }

@media (min-width: 768px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .grid { grid-template-columns: repeat(4, 1fr); }
}

ℹ️

Правило мобильных устройств — «mobile-first»: сначала пишут стили для узкого экрана и добавляют min-width-брейкпоинты по мере увеличения. Так стилей меньше и они проще.

Когда что выбирать

Ситуация	Инструмент
Меню, кнопки, карточки в ряд	Flexbox
Галерея, плитка, сетка товаров	Grid
Шапка + сайдбар + контент	Grid
Что-то отцентрировать	Flexbox

flex-direction и направление осей

По умолчанию Flexbox раскладывает элементы слева направо (горизонтальная «главная ось»). Ось легко повернуть:

.row    { flex-direction: row; }         /* слева направо (по умолчанию) */
.column { flex-direction: column; }      /* сверху вниз */
.rev    { flex-direction: row-reverse; }  /* справа налево */

💡

После смены направления меняются и оси: justify-content теперь работает вертикально, а align-items — горизонтально. Полезный трюк для вертикального центрирования.

flex-wrap и свободное место

Если детей много, они сжимаются. Включите перенос flex-wrap: wrap — и всё, что не влезло, уйдёт на новую строку:

.tools {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.tool { flex: 0 0 150px; }  /* 0 0 = не растягивается и не сжимается, базовая 150px */

ℹ️

flex: 1 1 0 — «расти на равных»; flex: 0 0 auto — «по своему размеру»; flex: 1 — удобное сокращение «расти и занимать равную долю».

grid-template-areas

Самый читаемый способ описать макет — нарисовать его строками-именами. Каждая строка кавычек = ряд сетки:

.layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  gap: 12px;
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer  { grid-area: footer; }

💡

Точка . в схеме означает «пустая ячейка». Имена нельзя повторять в несмежных ячейках — сетка просто не соберётся.

auto-fit / auto-fill и minmax()

Сетка может сама решать, сколько помещается колонок, если использовать авто-повтор вместе с минимальной и максимальной шириной:

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

Это значит: минимум колонки 220px, максимум — 1fr. Сколько поместится на экране, столько и будет, без media queries.

ℹ️

auto-fill заполняет сетку «пустышками» до конца строки, auto-fit — растягивает существующие колонки. Итоговое поведение видно наглядно, но для карточек почти всегда выбирают auto-fit.

order: расстановка по смыслу

Визуальный порядок элементов можно менять без перестановки в HTML. Свойство order работает и во Flexbox, и в Grid:

.author   { order: 1; }   /* покажется первым */
.content  { order: 2; }
.comments { order: 3; }

⚠️

Не злоупотребляйте order: порядок табуляции с клавиатуры остаётся HTML-ным. Если важна доступность, сохраняйте смысловой порядок в разметке.

space-evenly и распределение места

У justify-content три близнеца по распределению «воздуха»: space-between (по краям впритык), space-around (зазоры с боков) и space-evenly (равные отступы везде):

.row {
  display: flex;
  justify-content: space-evenly;   /* все промежутки строго равны */
  justify-content: space-around;   /* у краёв половинный зазор */
  justify-content: space-between;  /* крайние прижаты к границам */
}

ℹ️

Почти всегда «между» похоже на то, что хотел дизайнер. Если вдруг кажется «криво» — попробуйте другого близнеца, они решают 95% вопросов выравнивания.

align-content: строки и переносы

Когда элементов много и родитель переносит их на новые строки, за вертикальное распределение этих строк отвечает align-content:

.tags {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;    /* строки сверху */
  align-content: center;        /* по центру между рядами */
  align-content: flex-end;      /* прижато вниз */
  gap: 8px;
}

💡

Короткая мнемоника: align-items — внутри одного ряда, align-content — между рядами.

grid-auto-flow: dense и мозаика

Если элемент не влезает в ячейку, Grid сделает «дыру». Флаг dense заполняет дыры последующими элементами — получается мозаика без пустот:

.mosaic {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: dense;      /* дыры добиваются элементами позже */
  gap: 10px;
}

.wide  { grid-column: span 2; }   /* на две колонки */
.tall  { grid-row: span 2; }      /* на две строки */

⚠️

Будьте осторожны: dense меняет визуальный порядок элементов. Для галерей, где порядок не критичен, — идеально.

Flexbox: margin-left: auto

Внутри flex-контейнера margin: auto поглощает лишнее пространство и прижимает элемент к противоположной стороне:

.nav { display: flex; gap: 12px; }

.spacer { margin-left: auto; }   /* всё, что правее, уедет вправо */

💡

Два «режима» правого края: justify-content: space-between на родителе и margin-left: auto на конкретном ребёнке. Второй точнее, когда групп элементов несколько.

Связка Grid + Flex: карточка

Реальные макеты почти всегда сетка снаружи и flex внутри карточки:

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.card {
  display: flex;
  flex-direction: column;      /* тело в столбик */
}

.card .btn {
  margin-top: auto;            /* кнопка прижата к низу */
}

ℹ️

Классика «низ колонки»: margin-top: auto внутри flex-колонки опускает дочерний блок к нижнему краю независимо от длины контента выше.

Оси на практике

Главная ось — куда смотрят элементы, поперечная — им навстречу:

.row {
  display: flex;
  flex-direction: row;      /* главная ось: слева направо */
  justify-content: center;  /* по главной оси */
  align-items: center;      /* по поперечной оси */
}

ℹ️

Смена flex-direction меняет и место «главное»: при column главная ось — вертикаль, и justify-content двигает блоки вверх-вниз.

flex-flow: направление + перенос

Одно свойство объединяет направление и разрешение переноса:

.cards {
  display: flex;
  flex-flow: row wrap;      /* строка · можно переноситься */
}

flex: универсальная запись

Три числа: рост — сужение — базис:

.item {
  flex: 1 1 200px;   /* растёт · может ужаться · идеал 200px */
}

💡

Короткая запись flex: 1 равняется flex: 1 1 0%. Это «расти поровну» — самый частый рецепт.

flex-basis 0 — равные колонки

Если базис нулевой, ширина зависит только от коэффициента роста:

.col          { flex: 1 1 0%; }   /* все одинаковой ширины */
.col--wide  { flex: 2; }           /* в два раза шире соседей */

align-content: ряды внутри

Когда строк несколько, распределять их помогает align-content:

.grid-lite {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;   /* ряды: растянуты по высоте */
}

Фиксированный сайдбар

Не дайте боковой панели сжиматься, контенту — расти:

.layout {
  display: flex;
  gap: 16px;
}
.content { flex: 1; }              /* забирает свободное */
.aside   { flex: 0 0 240px; }  /* зафиксирован 240px */

Иконка в квадрате

Любой блок можно центрировать целиком, без пиксельных отступов:

.icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
}

Порядок: order

order переставляет детей без правки HTML:

.item-1 { order: 3; }
.item-2 { order: 1; }   /* будет первым */
.item-3 { order: 2; }

⚠️

Доступность и скринридеры читают документ в порядке разметки, а не order. Меняйте порядок в HTML, если важен порядок чтения.

Футер прижат к низу

Классика flexbox: контент тянется, футер держится у нижней кромки:

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main   { flex: 1; }   /* занимает свободное место */
footer { flex: 0 0 auto; }

💡

Хотите «дышать» — добавьте на main паддинги, а не отступы по body. Футер гарантированно внизу.

gap в колонках

Промежуток действует и по направлениям — в столбиках то же самое:

.stack {
  display: flex;
  flex-direction: column;
  gap: 12px;   /* равные промежутки между абзацами */
}

Почему «схлопывается»?

Длинный текст в flex ряду внезапно вылезает. Частый виновник — контент:

.cut-text {
  min-width: 0;       /* позволяем содержимому сжиматься */
  overflow-wrap: anywhere;
}

ℹ️

У flex-детей есть подразумеваемый min-width: auto, который не даёт сжаться втройне. Укажите min-width: 0 — и текст перенесётся по словам.

Инпут + кнопка в один ряд

Классика верстки поиска: поле тянется, кнопка фиксированной ширины:

.search { display: flex; gap: 8px; }
.search input { flex: 1; min-width: 0; }
.search button { flex: 0 0 auto; }

Тренировка

Соберите строку меню из 4 ссылок через Flexbox с justify-content: space-between.
Сделайте галерею из 6 фото с repeat(3, 1fr).
На узком экране превратите галерею в 1fr через media query.
Попробуйте «липкий» сайдбар: position: sticky; top: 20px.

Контейнер и элементы: два уровня правил

У флекса два «этажа»: свойства контейнера (display: flex, направление, выравнивание) и свойства элементов (рост, сжатие, порядок). Сначала настройте контейнер, потом «гибкость» детей.

.row {
  display: flex;
  gap: 12px;
}
.row > * { flex: 1; }

💡

«display: flex» включается на родителе, а не на каждом элементе — это главный переключатель.

Главная ось против поперечной: разница

Главная ось — направление «раскладки по умолчанию» (горизонталь в row). Поперечная — перпендикулярно ей. Все выравнивания меряются по осям, а не «лево/право/верх/низ» навсегда.

.row { display: flex; flex-direction: row; }
/* главная ось: →, поперечная: ↓ */

💡

Запомните пару «главная/поперечная» — и justify/align перестанут путаться.

justify-content: выравнивание по главной оси

Раздаёт свободное место вдоль главной оси: flex-start (слева), center, flex-end (справа), space-between (по краям, а промежутки между), space-around/space-evenly — равные «дыры».

.nav { display: flex; justify-content: space-between; }

💡

space-between «раскидывает» элементы по краям — это готовое меню «логотип слева, ссылки справа».

align-items: поперечная ось

Выравнивает элементы по поперечной оси: stretch (растянуть, по умолчанию), center, flex-start, flex-end. stretch + center — пара для «кнопок одной высоты».

.toolbar {
  display: flex;
  align-items: center;
}

💡

Иконка и текст в одну линию — это align-items: center, а не магия vertical-align.

flex-wrap: перенос на новую «линию»

По умолчанию флекс «сжимает» элементы, чтобы влезть в одну строку. flex-wrap: wrap разрешает перенос на новую линию, когда места не хватает — элементы «текут» рядами.

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

💡

wrap — «лента тегов» и «фильтры» любой длины; без него узкий экран всё сожмёт в кашу.

Сколько сжимать: flex-shrink

Если места нет, элементы «схлопываются»; flex-shrink: 0 запрещает сжатие («не трогай меня»). Полезно для кнопок и иконок, которые не должны «сдуваться».

.icon { flex-shrink: 0; }
.desc { flex: 1 1 0; }

💡

Несжимаемая иконка + гибкий текст — формула «вертикальной» строки, которая не рвётся.

gap вместо маржинов: единые отступы

gap задаёт отступы МЕЖДУ элементами контейнера — без «лишних» полей, которые толкают первый/последний. Никаких :last-child-поправок.

.row {
  display: flex;
  gap: 16px;
}

💡

Вспомните урок 5: схлопывание margin не трогает gap — отступ всегда «настоящий».

margin: auto внутри flex — «раздвинуть»

Элемент с margin-left: auto во флексе прижимается к правому краю, «съедая» всё свободное место. Раньше так двигали «кнопку в конце строки» без justify.

.bar { display: flex; }
.spacer { margin-left: auto; }

⚠️

auto-margin «крадёт» место и у justify-content: справа — используйте что-то одно осознанно.

Карусель колонок: flex-basis 0 и «равные»

flex: 1 1 0 — «все колонки одинаковой базы 0, растяни одинаково». Так три блока делят строку поровну, без вычисления процентов.

.cards { display: flex; gap: 12px; }
.cards > * { flex: 1 1 0; }

💡

«1 1 0» читается: расти можно, сжиматься можно, начальная база — ноль (равенство).

Колонка в столбик: flex-direction: column

Флекс по умолчанию — строка. flex-direction: column разворачивает раскладку по вертикали, и тогда ось меняется: justify становится «по вертикали». Так строят «стековые» группы.

.stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

💡

column + align-items: center — «аккуратная вертикаль» меню и панелей.

Свободное место: space-evenly и space-around

Оба «разбрасывают» место между элементами. space-around — поровну вокруг каждого (по краям «полу-дыры»), space-evenly — одинаковые промежутки и у краёв тоже. Разница чувствуется на глаз у трёх элементов.

.pager { display: flex; justify-content: space-evenly; }

💡

Четыре кнопки пагинации в ряд с space-evenly — «математически честный» ритм.

align-self: исключение из выравнивания

align-self на самом элементе переопределяет align-items контейнера для одного «бунтаря». Полезно «приподнять» кнопку на пару пикселей, не трогая остальных.

.row { display: flex; align-items: center; }
.note { align-self: flex-start; }

💡

align-self — «личное выравнивание»: проверяйте опоры, если кажется, что «контейнер сошёл с ума».

Сетка двумя измерениями: display: grid

Флекс ведёт «одной линией», грид — целой таблицей: колонки и строки сразу. display: grid + grid-template-columns — и дети сами ложатся по клеткам.

.grid {
  display: grid;
  grid-template-columns: 200px 200px;
  gap: 16px;
}

💡

Сколько значений в grid-template-columns — столько и колонок: повторяйте через repeat(): repeat(2, 200px).

Единица fr: «доля» доступного места

1fr — одна «доля» свободного места: 2fr 1fr — левая колонка в два раза шире правой. fr считает от остатка после фиксированных колонок.

.layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
}

💡

Соотношение «2:1» между контентом и сайдбаром — и грид сам подстроит ширины.

minmax: спектр ширины колонки

minmax(низ, верх) для колонки: не уже X, не шире Y. Классика: minmax(280px, 1fr) — колонка гибкая, но на узком экране не мельче 280px.

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

💡

auto-fit + minmax «сам упакует» карточки: три широких экрана, одна колонка на телефоне.

Ячейка через ячейки: grid-template-areas

Имена областям: grid-template-areas рисует «карту» из слов, а каждый элемент получает grid-area: имя. Схема читается как ASCII-макет страницы.

.page {
  display: grid;
  grid-template-areas: "header header" "content side" "footer footer";
  gap: 16px;
}
.page header { grid-area: header; }

💡

«.» в карте — пустая ячейка: "content . side" значит «контент, пропуск, сайдбар».

Вложенность: flex внутри grid

Никто не запрещает смешивать: грид «сетка макета», внутри ячейки — флекс «строка из кнопок». Это стандарт реальных проектов: контейнеры решают «что», флекс — «как выстроено в ряд».

.card { display: flex; justify-content: space-between; }

💡

Внутри грид-ячейки флекс «дышит» свободно: целая панель действий из одной колонки.

Строка-функция: repeat(auto-fit, minmax(...))

repeat(3, 1fr) ставит 3 колонки всегда. auto-fit же «схлопывает» до максимума, поместившегося по ширине: колонок столько, сколько влезает при заданном минимуме.

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

⚠️

auto-fill «оставляет пустые колонки», auto-fit их «схлопывает» — отсюда и разница в плотности.

Практика: шапка-меню на флексе

Шапка: логотип слева, пункты справа. Один флекс-контейнер: display: flex; justify-content: space-between; align-items: center. Отступать ничего не надо — всё делает место между «двумя группами».

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px;
}

💡

Два «флекс-блока» внутри шапки (лого + меню) дают больше контроля, чем один.

Практика: карточки в ряд на гриде

Сетку карточек строит грид: repeat(auto-fit, minmax(240px, 1fr)) — карточки сами «упаковываются» в ряды по ширине экрана. Медиа-запросов для этого не нужно.

.deck {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

💡

Одно правило заменяет четыре медиа-запроса: «авто-подгонка» делает это за вас.

Практика: поиск-поле с кнопкой

Поле ввода + кнопка «в одну строку»: флекс, гибкий input (flex: 1), несжимаемая кнопка (flex-shrink: 0). Это «строка поиска» и «подписка на рассылку» в одном рецепте.

.search { display: flex; gap: 8px; }
.search input { flex: 1; }
.search button { flex-shrink: 0; }

💡

Кнопка-«иконка» тоже flex-элемент: выравнивается по центру буквально автоматически.

Практика: страница с прижатым подвалом

«Футер внизу» при короткой странице — флекс flex-direction: column; min-height: 100vh на обёртке, а контент flex: 1. Контент «выталкивает» футер вниз при любой высоте.

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.content { flex: 1; }

💡

min-height 100vh = «хотя бы высота окна»; flex:1 заполняет лишнее, футер — всегда внизу.

Разные «веса» колонок: fr в деле

«Контент + сайдбар» с соотношением 3:2 — 3fr 2fr. Пропорция «весов» держится при любом экране, а не «раз навсегда в пикселях».

.layout {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 24px;
}

💡

3fr vs 2fr — «на глаз по-честному»: два колонки-блока остаются соразмерными везде.

Критерии выбора: Flex или Grid

Флекс — «ряд/столбец из элементов» (меню, кнопки, линии). Грид — «двумерная сетка с колонками и строками» (макет, каталог). Правило-тест: «мне нужна одна ось — flex, две — grid».

💡

Сомневаетесь? Начните с flex. Он решает 80% задач, а грид пригласите на большой макет.

Типичные ошибки флекса

Частое: 1) display: flex на каждом элементе (а не на родителе), 2) justify вместо выравнивания «по вертикали», 3) забыли align-items, и элементы растянулись «как не надо», 4) fixed width всем детям при flex: они и не «текут».

⚠️

«Флекс не центрирует» = «я поставил justify, а надо было align» — проверяйте обе оси.

Итоги урока 6: вы строите сетки

Оси и выравнивания флекса, «доли» fr и minmax грида, auto-fit-сетки карточек, шапка и подвал, связка flex+grid. Теперь вы раскладываете макет «как нарисовано», а не «как получится». Дальше — JavaScript: оживить всё это.

💡

Возьмите три задачи из урока 5 и переделайте на flex/grid — увидите, как тихо стало в CSS.

Главная ось против поперечной

У флекс-контейнера две оси: главная — по «направлению» (flex-direction) и поперечная — перпендикулярно. justify-* управляет главной, align-* — поперечной. Держите «карту осей» в голове — и «центрирования» станут очевидными.

💡

Смена direction на колонку «меняет» оси местами: «центр» остаётся «центром» в обеих сразу.

flex-direction: ряды и колонки

row — «строка» (по умолчанию), column — «столбец». row-reverse / column-reverse — «задом наперёд». Горизонтальное меню — row; вертикальное «слоё» — column. Семантика «направления» — первое свойство флекс-планировки.

.stack { display: flex; flex-direction: column; }

💡

Вертикальная «стопка» через column — база «мини-формы», при этом все «поля» выстраиваются честно.

Своё выравнивание: align-self

align-self «переигрывает» общий align-items у одного ребёнка: один элемент «в начале», другие «по центру». Точечная «коррекция» без пересоздания контейнера — сильный селектор-фит.

.icon { align-self: flex-start; }

💡

align-self «спасает» уровни, не «ломая» общий стиль: иконка встаёт «своя», на «своё место».

Сдвиг одного: margin-auto во флексе

margin: auto у флекс-ребёнка поглощает «свободное место»: кнопка «прибивается» вправо, «пара» — в центр. Авто-поля + флекс = «распределение» без justify-контроля. Красивый трюк «двух сил».

.push-right { margin-left: auto; }

💡

«Авто»-поле съедает «остаток»: требуйте «вправо» единственным правилом margin-left: auto.

order: визуальная перестановка

order меняет «зрительный» порядок детей, не трогая HTML (и доступность). Отсортировал «меню-важная кнопка» в начало визуально — но скринридер читает «по документу». Используйте умеренно.

.cta { order: -1; } // первая слева

💡

order «только для глаз»: раздел «важное» держите «в разметке» на его честном месте.

Базис по умолчанию: flex-basis: auto

flex-basis задаёт «стартовый» размер до grow/shrink: auto — «по содержимому». width «уважается» при basis:auto; basis фиксирует размер «как бы» независимо. «Главная ручка» размера флекс-элемента.

.col { flex-basis: 200px; }

💡

basis «замещает» стартовый размер до «гибкости»: понял basis — понял «всю» геометрию flexbox.

Конфликт grow и shrink

grow «забирает» лишнее, shrink «отдаёт» недостающее; basis — точка отсчёта обоих. Одновременно и «расти», и «сжиматься» — «напротив»: решения по распределению «справедливо» зависят от обоих.

💡

flex: 1 = «grow 1, shrink 1, basis 0»: «раздели место» по-честному между «равными».

Ширина флекс-ребёнка: min-width против сжатия

Сжатие флекс-ребёнка «упирается» в его min-width (по умолчанию «авто» = содержимое). Длинный текст «не сжимается» — блок «разъезжается». Назначьте min-width: 0 — и «сжатие» начнёт работать.

.col { min-width: 0; }

💡

«Сжался — не сжался» часто решает min-width: это «самый недооценённый» флекс-приём.

Матрица переноса: flex-wrap: wrap

flex-wrap: wrap позволяет потоку флекс-элементов «переноситься» на новые строки, когда «не влезают». Без него — «сжатие» в одну строку; с ним — «плитка-сетка». База «резинового» множества

.grid-flex {
  display: flex;
  flex-wrap: wrap;
}

💡

«Без wrap» — строка; «с wrap» — ряды: между ними и есть «резиновая сетка на флексе».

Отступы-«клей»: gap у флекс-контейнера

gap: «промежуток» между строками/колонками флекс-контейнера — без margin-головной боли. «Ровные швы» между карточками одним свойством. Старый флекс «страдал» без gap — современный «спит спокойно».

.row { display: flex; gap: 16px; }

💡

gap «не схлопывается» сама по себе: промежуток «флексовый», а не «поля двух соседей».

Вложенный флекс: карточка внутри карточки

Флекс-элемент может сам быть флекс-контейнером: карточка «в счётчике», поля «в строке», иконка+текст «в паре». «Русская матрёшка» раскладок — основной приём структурирования интерфейсов.

<div class="card">
  <div class="row">  <!-- тоже flex -->
    <img ...><p>...</p>
  </div>
</div>

💡

Каждый «слой» — свой флекс: «карточка» раскладывает «строки», «строки» — «пары».

По «строке»: baseline во флексе

align-items: baseline выравнивает элементы по их «базовой линии текста»: цифры и подписи выстраиваются «как в строке». Красиво для «пары иконка-цифра». Флекс-аналог «строковой» типографики.

💡

Карточки разных размеров с «базовыми линиями» выглядят «выровненно как текст» — берите baseline.

Три способа центрирования: от флекс до автополя

Центрировать «в середине»: 1) flex: justify-content + align-items center; 2) margin: auto с высотой; 3) grid с place-items. Первый — самый «живой»; второй — для «строки»; третий — «новый канон». Держите три в «арсенале».

.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

💡

Флекс-центрирование «держит» и строку, и столбец: «один раз настроил» — «навсегда».

Растянуться: align-items: stretch

stretch — «дефолт»: флекс-элементы растягиваются по поперечной оси «на всю высоту строки». Карточки одной высоты «автоматически». Захотели «как есть» — flex-start (или авто-высота).

💡

«Равные карточки» во флексе получаются «дёшево»: просто оставьте stretch «по умолчанию».

Распределение «по кругу»: justify-around

justify-content: space-around раздаёт «половины» промежутков вокруг элементов, space-evenly — «равные», space-between — «только между». Различие — «где точки»: вокруг/поровну/между. «Запас воздуха» — вид распределения.

.row { justify-content: space-evenly; }

💡

«Выбор» распределения — «дизайн швов»: от «впритык у краёв» до «ровных зазоров».

«Между» без давления: space-between

space-between «расталкивает» пары элементов — первый к началу, последний к концу. Меню «по краям» — его «сын». Между «центром» и «краев» — «только между»: ребёнок «не по центру».

💡

«Логотип-слева-кнопка-справа» — пара кликов space-between, «никаких» отступов вручную.

Шапка на флексе: три «колонки»

Шапка «из трёх» (логотип / меню / кнопка): флекс-строка с gap; средний блок — space-between или auto. На «узком» экране раздел уходит «на перенос». Классический «микро-макет» интерфейса.

💡

Три части шапки «по очереди» свободно «переносятся»; центрируйте «золотого» — на медиа.

Список-«плитка»: цели на флексе

«Плитку» из карточек собирает «строки на wrap»: каждый li — флекс-элемент шириной в долю. Основная «плиточная» сетка до прихода грида — вот она, «на флексе», «на gap».

💡

«Плитка»: каждой карточке — flex-basis и «grow 1» — и «ряды» дышат одинаковыми «ширами».

row-reverse: «задом наперёд»

flex-direction: row-reverse пишет строку «справа налево» — первый элемент у правого края. Не путать с «зеркалирование» content: «направление» меняет «претензии» потока. Удобно для «стрелок» и «последнего-главного».

💡

Пишите «разметку в логичном порядке», а «рисуйте» через row-reverse: «смысл» не пострадает.

Тонкая колонка: basis: 0 с grow

flex-basis: 0 (в связке с grow) «распределяет» ширину «поровну» — игнорируется «случайные» размеры содержимого. Три «колонки»: каждая — «ровно треть», независимо от текста внутри. Чистая «пропорциональность».

.col { flex: 1 1 0; }

💡

flex: 1 1 0 безупречно «выравнивает» «равные» блоки — панацея «трёх колонок с gap».

Сетка карточек: wrap с базисами

Карточки-сетка на флексе: repeat-«нят» решает flex-basis («ширина карточки») + wrap; «количество в строке» — отношение к ширине контейнера. Стоп, «как много влезет» — и «само», «по жизни». Практичный «флекс-грид» без библиотек.

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.cards div { flex: 1 1 240px; }

💡

basis «240px» + «доли» — карточки «заполняют» строки «по жизни», «дожимая» до троих-двоих.

Равная высота карточек: stretch «в действии»

Строка флекса «по умолчанию» вытягивает карточки на общую высоту (stretch). Разные тексты — равные «блоки». «Забыли» — карточки «разнокалиберные»; «вспомнили» — ровная «панель».

💡

Если «равные» карточки важны — оставить stretch; «неравные по дизайну» — flex-start и свои высоты.

Прижатый футер: флекс-«стакан»

Футер «до низа» пустой страницы: body — flex column с min-height: 100vh, а «контент» растёт (flex: 1). Футер «прижался» независимо от длины контента. Классический «стакан» (sticky footer) на флексе.

body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1; }

💡

«Стакан»: тело-колонка, main растёт, футер «не прыгает» — «самый частый» флекс-участок сайта.

Двухколоночный сайдбар: фикс плюс основное

Сайдбар «фиксированной ширины» + контент «растягивается»: sidebar flex: 0 0 220px, main flex: 1. «Спец.» и «главное» — классическая «пара» раскладки, растущая «по контенту».

.layout { display: flex; }
aside { flex: 0 0 220px; }
main { flex: 1; }

💡

«Фикс» «0 0 220px» не «растёт» и не «сжимается»; «main» «поглощает остальное» — пара «золотая».

Основной и боковой: «линейка» раскладки

Когда сайдбар «резиновый», а не «фикс» — флекс «делит» поровну или по долям. «Основной» и «боковой» решают «flex-grow» и «basis». Помните про «данные» на узком: переносим «сайдбар вниз» медиазапросом.

💡

На «телефоне» раскладка «строки» часто неуместна: столбите «сайдбар после main» через column.

Блок «на всю ширину»: строка шапки

«Шапка»-строка занимает «всю ширину»-контейнера; внутри — флекс-навигация или «три колонки». Внешний «блок фона» и внутренний «центр» — два уровня «контейнер»/«центр» дают «чистую» ширину краёв.

💡

«Фон на всю ширину, содержимое по центру» — ширину полотна «прячут» во внешнем div, «центр» — внутренний.

Адаптив на флексе: колонка на узком

Медиа-запрос переводит «строку» во «столбец»: flex-direction: column на «узком» экране. Сайдбары и «галереи-пары» стекаются «сверху вниз». Базовая «резиновая» стратегия флекс-макетов.

@media (max-width: 600px) {
  .row { flex-direction: column; }
}

💡

Правило «до 600px — колонка» — быстрый «телефонный» уровень; дальше — «полный» адаптив.

Меню-строки на телефоне: wrap и перенос

Длинное меню на «узком» — flex-wrap: wrap: пункты «переносятся» на строку «ниже», а не «давятся» до «невидимости». Мелко-пресловутая, но живая «гармония» для списков без «гамбургера».

💡

wrap-меню — «без JS» перенос; если пунктов «много» — тогда «гамбургер» честнее с навигацией.

Простая «плитка» через флекс: без грида

До grid «флекс-плитка»: flex-wrap + basis — и «квадратики/ряды». Много контента в «карточках» равной ширины: «заполняй строки». Простота «без разделённых строк»; грид — когда «точно по сетке».

💡

«Флекс-плитка» «прощает» разное число «в строке»; грид «держит» колонки «ровно». Выбирайте «по строгости».

Настройка «вручную»: flex: 1 1 auto по-честному

flex <число> = grow; два числа — «grow shrink»; три — «grow shrink basis». «Одна единица» — «лучшее сжатие», «родной размер» — auto basis. Разбирайте «трио» как «базовую математику» флекса.

💡

«flex: 1» и «flex: 1 1 0» ведут себя по-разному — читайте «третье слово» (basis)!

Практика: навигация из «соседних» пунктов

Соберите меню «в ряд»: ul>li на флексе, gap между пунктами, «активный» — свой цвет и фон. Проверьте «перенос» на узком. Меню «20 минут» — база навигации всех уроков-макетов.

.nav { display: flex; gap: 20px; }

💡

Добавьте «active»-класс и aria-current: «меню» из «макета» станет «историей» доступности.

Практика: карточка-«панель» из трёх частей

Панель: «бейдж-иконка», «заголовок с текстом», «кнопка у края». Все три — флекс-«колонка» с gap и auto «прижимает кнопку». Структура «типовой» карточки — «маленький» строитель интерфейса.

💡

«Кнопка у края» — margin-top: auto «поглощает» воздух между текстом и кнопкой внутри колонки.

Практика: строка «обратной связи» на флексе

Строка: «поле ввода + кнопка» рядом. Поле — flex: 1 (растёт), кнопка — «фиксирована». Элегантная «пара» форм без «Ещё» обёрток и «чистой» ширины вручную.

form { display: flex; gap: 8px; }
form input { flex: 1; }

💡

«Поле + кнопка» одной строкой: flex «всегда» «садит» кнопку «за полем» без margin-раха.

Практика: профиль с «бейджами» на флексе

Профиль: аватар, имя, «бейджи»-языки (row+wrap), кнопка «Подписаться». «Бейджи» переносятся, аватар «не прыгает». Практика «мини-панели» = «набор флекс-пар».

💡

Бейджи с wrap «заполняют» строки, «пустые» поля не «морозят» карточку.

Проверка флекса: три «дебаг»-вопроса

Плохо выстроилось? Три вопроса: «какая ось главная?», «кто задан basis?», «какие у детей min-width/margin?». Три ответа — «95%» флекс-проблем. «Расшифровка» флекс-макета — навык номер один.

💡

«Осколок» переносится «не туда» → вопрос первый: «не wrap ли по вине min-width ребёнка?»

Частые ошибки флекса: как их слышать

1) забыт wrap — «давится» в строку; 2) min-width:0 не дан, «текст» раздувает; 3) margin вместо gap «слипается»; 4) basis «ранит» grow-ожидания; 5) align-items не тот — «съезд по поперечной». Пятёрка — «спектр» типовых падений.

💡

Увидел «расползание» — проверь «пятёрку», а не «фиксируй» !important: источник — в «пятёрке».

Чек-лист флекс-вёрстки

Контейнер: display+flex, направление известно; gap задан; «перенос» управляем; дети: basis/grow осознаны; «равность» высот учтена; «узкие» экраны — перенесены. Прогулка по чек-листу — «чистый флекс» гарантирован.

💡

«Чек-лист» — «пять минут» с макетом: «скажите прощай» десяткам «странных» раскладок.

Флекс против float: поколения раскладки

float «был» для «обтекания», но «использовался» и для «колонок» (с clearfix). Флекс «пришёл» для «строк и распределения». Разница: «назначение» — обтекание (float) или «сетка» (flex/grid). Старым проектам — float, новым — флекс.

💡

Встретили старый float-колонки? Модернизируйте в flex — «читаемость» и «масштаб» станут лучше.

Флекс или грид: как выбирать

Флекс — «распределение в одном направлении» («строка или столбец»), грид — «двумерная сетка» («строки и столбцы вместе»). «Меню», «пары», «центры» — флекс; «сложные сетки», «сетки-карточек», «зоны» — грид. Итог: «одна ось» — флекс, «две оси» — грид.

💡

Не «спорьте» — комбинируйте: «внешний» грид раскладывает «зоны», «внутри» флекс «живёт» на строках.

Итоги урока 6: флекс — «кисть» раскладки

Оси, направление, распределение, «рост/сжатие», gap, wrap, вложенность, практика-панель. Флекс — «база» современных раскладок: держите «три великих» (justify, align, gap) «тесно» — и интерфейсы «лягут» красиво.

💡

Следующая ступень — grid: «флекс-база» из урока 6 «подсветит» и «двумерные» шаблоны.

Зачем Flexbox: сценарии использования

Flex «решает» раскладки «в ряд» и «в колонку», «выравнивает», «распределяет» место. Шапки, меню, карточки, формы — «типовые» сцены «флекса». Один «родитель» управляет всей «строкой». Не «про всё», но «про многое».

💡

Спросите: «это линия/колонка?» — да, вероятно flex. Двумерная «сетка» — потом grid.

Контейнер и элементы: два «фронта»

display: flex «включает» родителя — «контейнер»; его «прямые» дети — «элементы» флекса. Глубинные «внуки» не «управляются» напрямую. Правила — «двусторонние»: контейнер «раскладывает», элементы «растут».

.row { display: flex; }

💡

Только «прямые» дети — «элементы»: вложенные блоки «подчиняются» своим «контейнерам».

Главная ось и поперечная: три правила

Главная ось — направление ряда (flex-direction); поперечная — «перпендикуляр». justify — по главной; align — по поперечной. Три слова «карты»: направление, распределение, выравнивание. С них «начинается» flex-мышление.

💡

«Север-юг» (column): justify — «сверху-вниз», align — «влево-вправо». Инверсия осей — «смена ролей».

Строка и столбец: выбор направления

flex-direction: row — «горизонталь» по умолчанию; column — «вертикаль». Направление определяет, «что» вы распределяете. Меню — row, «список-карточка» — column. «Смена» направления — «половина» решения раскладки.

💡

«Вертикальный» блок со «внутренностями» — column внутри row: «профиль» в «ленте».

Обратный порядок: row-reverse и column-reverse

row-reverse «разворачивает» ряд: «первый» — справа. column-reverse — «колонка снизу-вверх». Порядок «визуальный» переворачивается, DOM «не трогается». «Внимание»: направление «зеркалит» и «осю» justify.

💡

«Последний» пункт «первым слева» — row-reverse: «чтение наоборот» с «реверсом» родов.

Блочные «по умолчанию»: флекс-элементы

Дети flex-контейнера «становятся» блоковыми «по своему» поведению: inline «не» «остаются». «Строка» наполнится «блочными» поведениями. Главный эффект: «ширины» и «отступы» «работают» как у блоков. «Гибрид» «честный».

💡

margin-вертикаль «склеивания» «во флексе» «нет»: «раскладка» «Линии» — «листинг» «без сюрприза».

inline-flex: строка «в потоке текста»

inline-flex — флекс-контейнер «как строка»: рядом «липнет» к тексту. Кнопки-«группы» в абзаце, «свои» мини-блоки. Поведение «в ряду» — «строчное», внутри — «флекс». Редкий, но «аккуратный» инструмент.

💡

«Пара» иконки и надписи «в строке» с внутренним выравниванием — inline-flex «справляется».

Распределение места: justify-content

justify-content: flex-start, center, space-between, space-around, space-evenly. Между+, вокруг++ — равномерное «дыхание». Влияет «только» на главную ось. Классика: «меню растянутое», «кнопки вправо».

💡

space-between — «по краям»; space-evenly — «с учётом» краёв: «опрятные» «зазоры» вариативней.

Выравнивание по поперечной: align-items

align-items: stretch (по умолчанию), center, flex-start, flex-end, baseline. Разная «высота» детей — «выровнены» по заданной «линии». Центрирование «вертикали» — знаменитый «флекс-центр». «Связь» с «опорой»-строкой.

💡

«Герой»: контейнер высотой 100vh + align-items center + justify center — «центр мира».

Индивидуальное выравнивание: align-self

align-self «переигрывает» align-items «для одного» элемента: центр, конец, база. Один «бунтарь» в группе «изменён». Удобно для «иконки в нижнем углу карточки». Приоритет «элемента» — над «родителем».

💡

.icon { align-self: flex-end; } — «один» «спустился» вниз, «остальные» — «по линии»: «аккуратный» акцент.

Рост элементов: flex-grow

flex-grow «делит» свободное место «по числам»: 1 — поровну, 2 — «вдвое больше». Или «0» — «не растёт». Место «лишнее» «раздаётся» пропорционально. «Быстрое» растягивание ряда — классика «гибких» кнопок.

.item { flex-grow: 1; }

💡

Кнопка submit «растёт» — flex-grow: 1: поле «дожимает» строку «до края».

Сжатие элементов: flex-shrink

flex-shrink «работает» в тесноте: 1 (по умолч.) «сжимается», 0 — «не сжимать». Длинный контент «ужимается», но ломает отступы. Знание shrink «спасает» «расплющенные» карточки. «Сопротивление» «сдаться» — «намерение» верстки.

💡

Бейджи «не меньше content»: flex-shrink: 0 — «число» не «слипнется» в тиски.

Начальная мера: flex-basis

flex-basis — «стартовый» размер вдоль оси: auto, px, %, 0. От него «растёт/сжимается» элемент. basis: 0 + grow «делит» «поровну» без «вшитой» ширины. «База» размеров — «третий» «плечо» троицы flex.

💡

flex-basis: 200px — «минимум» для элемента «до» grow: гибкость «вокруг» «исходного».

Шорткат flex: три в одном

flex: grow shrink basis — «компактная» троица. flex: 1 — «1 1 0%» (расти, сжаться, делить с нуля); flex: auto — «1 1 auto»; flex: none — «0 0 auto». Короткая запись — «главный» рефлекс раскладки.

💡

flex: 1 на всех «сёстрах» — «равные колонки» без «высчитывания» процентов. Классика.

Равенство колонок: flex 1 и экран

Три «соседа» с flex: 1 — каждый «по трети» доступного. Проценты не нужны: место «делится» автоматом. Отступы gap «учитываются» раскладкой. «Забыли» высчитать 33% — «гибкость» выручила.

💡

.cols > * { flex: 1; } — «все дети» равны: «жирное» правило для «строк» «любого» числа.

Авто-размеры: когда контент решает

flex-basis: auto — «свой» размер по контенту, «гrow» «дожмёт» остаток. Кнопки «своих» ширин, «пункты» по «длине» слов. «Свободные» элементы «дышат» контентом. Смешанные «авто+flexs» — «живая» раскладка.

💡

«Логотип (auto) + поле (flex: 1)» — «легкая» шапка: логотип «стоит», поле «растёт».

Минимальная ширина: маленькая засада

У flex-элемента min-width «по умолчанию» — auto: «да не ниже контента». Длинные слова «распирают» ряд. Решение: overflow/flex-устройство (min-width: 0) на «гибком» блоке. «Понадобится» «при сжатии колонок».

💡

.col { min-width: 0; } — «позволить» колонке «ужаться»: текст «не» «выпирает» из «ряда».

Переполнение при расплющивании

Когда «места нет», контент «переливается»: overflow-wrap/text «спасают». Поломка «широкая» схема flex — «сжатие» не «всегда» «мило». «Ramine»: flex-wrap, размеры по контенту, overflow. «План Б» в тесноте — «ваш» набор.

💡

Слово-«мастодонт» в карточке — overflow-wrap: anywhere: «ряд» «не» «лопится» из-за «слова».

Рост и сжатие вместе: баланс

grow «добавляет» свободное; shrink «отбирает» при тесноте. «Связанные» пары дают «устойчивость»: элементы «приспосабливаются». Оба «счётчика» — «интуиция» для любой строки. «Помните»: grow — «простор», shrink — «тиски».

💡

flex: 1 1 0 (расти/сжаться/нуля) vs flex: none — «пропорция» и «статика»; «выбор» «по назначению».

Практика: «жирные» и «тощие» в ряду

Соберите ряд: поле «растёт», иконка «нет», кнопка «по контенту». flex: 1 — «гибкое»; flex: none — «неподвижное». Переворачивайте: «оно» «тянет» ряд. Практика «пропорций» — «мускулатура» гибкости.

💡

«Строка поиска»: input flex:1 + кнопка flex:none: поле «хлюпает», кнопка «стоит».

Перенос строк: flex-wrap

flex-wrap: wrap «опускает» элементы «на новые строки», когда «тесно». Карточки «перетекают» по несколько в ряд. nowrap (по умолч.) — «в одну строку». wrap — «спаситель» адаптивных «потоков» карточек.

.cards { display: flex; flex-wrap: wrap; }

💡

.cards > * { flex: 1 1 200px; } — «карточки» шириной «примерно 200»: перетекают «по потоку» окна.

Обратный перенос: wrap-reverse

wrap-reverse «переносит» «вверх» от конца: первая строка — «снизу». Визуальная «инверсия рядов». «Чтение» «верится» нестандартно: осторожно с «порядком контента». «Редкость», но «иногда» — «первый номер» на «краю».

💡

«Вывеска» снизу вверх — wrap-reverse; убедитесь, «семантике» это «услуга», не «мука».

Промежутки: gap вместо распорок

gap задаёт «щели» между элементами: row-gap, column-gap, gap. Вместо «марженов судьбы» — «честные» зазоры. Сетка «дышит» единым «ритмом». «Разделители» — через «бордеры», «не» «раздутие» отступов.

💡

.menu { gap: 16px; } — «меню» с «воздухом», без «margin на последнем» — «чистое» правило.

Строки и столбцы вместе: align-content

При wrap «строки» много — align-content «выравнивает» ряды: center, space-between. «Отдельные» элементы — align-items; «ряды» — align-content. Полная «карта» флекса: обе оси × оба уровня. «Опрятная» «группировка» переносов.

💡

align-content: center — «кучка» рядов по центру блока: «коллаж», «не» «растянутая» сетка.

Визуальный порядок: свойство order

order «перемещает» элемент «по позиции» вдоль оси: 0 (по умолч.), -1 «первым». DOM «не трогается» — «вид» «меняется». «Внимание» для доступности: «читают» DOM, а не order. «Красивый» «сдвиг» «внимательно» «проверять».

💡

«Форма»: кнопка в DOM «после», «показ» «первой» — order: -1: «правки» «без» HTML.

Управление потоком: смена направления у пунктов

Двунаправленность: один ряд «слева-направо», другой — «сверху-вниз» «внутри». direction «родителя» задаёт «блок»; flex-direction — «ряд». «Смешанные» раскладки «из» осей — «могучесть» флекса. «Комбинируйте» row/column «по ярусам».

💡

Вертикальное «меню» в горизонтальную «шапку»: row-родитель, column-внутренность — «партал» структур.

Вложенные флексы: шлюз компонентов

Флекс «внутри» флекса — «естественная» стройка: карточка (column) с «строкой-кнопками» (row). Каждый «уровень» — «свой» контейнер. Глубина «по смыслу», не «бездонность». «Компонентная» «сила» — «умножение» флексов.

💡

«Карточка» column + «действия» row: «внутренняя» строка «не» «подчиняется» внешней «оси».

Выталкивание margin: auto во флексе

margin-left: auto на элементе «выталкивает» его «вправо»: «строчка» «раскалывается». Кнопки «в конец», логотип «в начало». «Двойной» auto — «центрирование» вряда. «Massо» «вправо» — проще, чем «джиттер» в justify.

💡

.menu .cta { margin-left: auto; } — «призыв» вправо, «пункты» влево: «шипучая» шапка.

Сдвиг одного: margin на элементе

Отдельный элемент «сдвигается» «своим» margin (top/bottom/left). Не трогая «братьев» и «родителя». «Визуальные» «ямы» «дышат» точечно. «Микросдвиги» — «круглые», margin — «их» лошадка. «Скромность» «правки» — «мастера» стиль.

💡

Иконка «прижалась» к концу строки: margin-left: auto у «одного» — «простая» «арматура».

Практика: карточки в потоке с wrap и gap

Соберите «поток» карточек: flex-wrap + gap + minmax (flex: 1 1 220px). «Перетекают» при сужении. Без media — уже «резина». «Карточки» «дышат» «табличкой» «ровки». Практика «wrap» — «первая ступень» адаптива.

💡

flex: 1 1 220px + gap: 16px — «живая» колонка; «зазор» — «встроенный» «ритм» потока.

Шапка на флексе: логотип, меню, действие

Классика: логотип слева, навигация по центру, кнопка справа. align-items: center «выравнивает» «все» по вертикали. Внутри — «вложенное» меню-флекс. Шапка — «образцовая» сцена «флекс-приёма».

.header { display: flex; align-items: center; }

💡

«Три зоны»: логотип + nav (flex:1) + кнопка: «легкий» горизонт, «всё» «по местам».

Горизонтальное меню: равномерные пункты

Меню «на всю ширину»: justify-content: space-between или «равные» через flex: 1. Пункты «растягиваются» под «одинаковые» зоны. Клики «крупные» — «удобные» мишени. «Широкое» меню «авто-центруется» — «пляжем» «для» табов.

💡

ul { flex: 1; justify-content: space-around; } — вариант «меню-линейки» с «квартирами» пунктов.

Поисковая строка: поле + кнопка

«Строка поиска»: input flex: 1 + кнопка рядом. «Растущее» поле, «постоянная» кнопка. «Круглые» углы «сливаются» на границе — border-трюки. Ввод «во весь ряд» — «расходно» «пространством» «пользуется».

💡

input { flex: 1; min-width: 0; } — «поле» дышит, «кнопка» встаёт рядом «без» разрывов.

Герой по центру: весь экран

«Герой» — блок «во весь экран»: height: 100vh; flex; justify+align центр. Заголовок и подпись «прибиты» к середине. «Фон»-фото «да» в заливе. «Первый экран» лендинга — «пара» строк флекса.

💡

min-height: 100vh; display: flex; align/justify центр — «впечатляющий» вход без «единиц» и «странности».

Основной макет: колонка-ядро и сайдбары

«Статья + сайдбар»: сторона — фикс. ширина, статья — flex: 1 (остаток). Одна «линия» раскладки «page». Распад «на узком»: flex-wrap + «минимум» сайдбара. «Двухколончатый» «макет» — «типовой» рецепт.

💡

.content { flex: 1; min-width: 0; } + aside { width: 240px; } — «статья» заберет «остаток» строки.

Список иконок: равные «плитки»

«Ряд иконок» с «подписями» — «сторона» flex-wrap + равные ширины. Символы «по центру» своих плиток. «Красивые» «связки» функционала: «иконка» «над» текстом (column). «Тултипы-ровня» — «дыхание» «объектов».

💡

.icon-block { flex-direction: column; align-items: center; } — «иконка сверху, буква снизу» «в центре».

Аватар и текст: анатомия подписи

«Аватар + текст» — «медиа-объект»: картинка слева, текст «прилегает». flex: 0 0 nguyen-размер + flex: 1 контент. «Имя» и «роль» «столбиком» внутри column. «Человек» «в графе» «в» «строке» «данных» — «сами» «собой».

.author { display: flex; gap: 10px; }

💡

Аватар flex: none; текст flex: 1: «длинный» текст «не» «толкает» картинку — «порядок» тонкий.

Строка статистики: числа в один ряд

Статистика: «подписчики», «посты», «лайки» — три «пары» (число+подпись) в row. Каждая — column «по центру». «Разделители» между — li+li::before или border. «Цифры» «равны» «по ширине» — «баланс» информации.

💡

«Три метрики» в ряд с gap и сепараторами — «панель» «профиля»: «осведомление» мгновенное.

Каркас страницы: header, main, footer на flex

Тело-«колонна»: body display: flex; flex-direction: column; min-height: 100vh. main flex: 1 — «растёт», «дожимая» footer вниз. Футер «прилипает» к низу даже при «пустой» странице. «Прилипающий» футер — «классическая» роль флекса.

💡

body { display: flex; flex-direction: column; } main { flex: 1; } — футер «пришит» к «полю» окна.

Практика: страница на флекс-каркасе

Соберите «полный» макет: шапка, hero, «сетка» контента, сайдбар, footer. Все вертикали/горизонтали — флекс. Прогоните «сужение» окна — «перестройте» wrap. «Практика» — «тело» урока «флекс-раскладки».

💡

«Целый» макет на флексах «изнутри-наружу»: «могучая» геометрия «одного» инструмента.

Практика: каталог-сетка на wrap

Каталог: «карточки» flex: 1 1 240px + wrap + gap. «Авто» — «две» или «три» колонки по «ширине». Без media — «поток» сам «решит» число. «Каталог» — «обиход» товарных «площадок»: «замыслы» в flex-переносе.

💡

flex-wrap: wrap; gap: 20px; .card { flex: 1 1 240px; } — «полки» «перестраиваются» «сами».

Практика: сайдбар и широкая лента

Лента (feed) + сайдбар «списком»: sidebar «застыл», лента — flex: 1. На «узком»: sidebar «ныряет» вниз через wrap+order. «Лента» — «движение» «контента»; «боковушка» — «повторяющееся» — «правильный» «слой».

💡

aside { flex: 1 1 260px; } + feed { flex: 3 1 0; } — «широкая» главная «зона», «аккуратный» бок.

Практика: форма с полями в ряд

Форма-«строка»: имя, почта, кнопка «одной линией». Поля flex: 1, кнопка — «по сабже». На телефоне — column «стекает». «Поля» «в линию», «отправка» «рядом» — «удобные» «сценарии» в «ширину».

💡

«Строка формы» → wrap + min-width полей: «не» «сжимаются» в «бессловесную» тесноту.

Практика: медиа-объект в тексте

«Медиа-объект»: картинка, текст, «действие» снизу-вниз. «Миниатюра» + «абзац» + «ссылка» в колонне. «Повтор», «вариация» строк — «лента» «статей». «Медиа-объект» — «модуль» многих «перечней».

💡

article { display: flex; gap: 14px; } + «текст» flex: 1 — «статья-строчка» с «картинкой» слева.

Практика: кнопки растянутые по подписи

Группа кнопок «равной» ширин (flex: 1) — однородные «мишени». Выравнивание «по всей» строке — «аккуратные» «ряд», «любое» число. Цели «одинаковые», «клики» — «лондонские». «Настроение» — «модульность» компонента.

💡

.btns { display: flex; } .btns button { flex: 1; } — «две» кнопки «половинят» строку: «выбор» «наравне».

Практика: пагинация на флексе

Пагинация: «предыдущий», «цифры», «следующий» — в один ряд. «Активный» page — «выделен» классом. Числа flex none + center. «Навигация» по страницам «раз» — «обычной» строкой флекс.

💡

.pagination { display: flex; gap: 8px; justify-content: center; } — «цифры» по центру «страницы».

Практика: профиль-панель в колонку

Панель профиля: аватар, имя, описание, «действия» — column, «по центру» или «влево». «Кнопки» row «под» столбцом. «Вертикальный» профиль — «приём» многих «страниц» (соцсети). «Колонка» flex — «осадок» «профилей».

💡

.profile { display: flex; flex-direction: column; align-items: center; } — «портретная» «центрующаяся» «свадьба».

Практика: лента действий-кнопок

«Соц-ряд»: «поделиться», «нравится», «сохранить» — кластер кнопок-иконок. justify-content: space-between или «рыхлый» center. Иконки + «количество» — «по-строчечные» пары. «Ряд действий» — «живой» UI «ориентация».

💡

.actions { display: flex; gap: 18px; } — «тихие» кнопки «в группе»: «равен» «вес» «элементов».

Практика: чекбоксы в вертикальном флексе

Ряд «чекбоксов»: column-флекс с label+input «парой» в строчке. Выравнивание «лейблов» по «оси» — gap «выдыхает». Много «вариантов» ответов — «столбец» «спокойный». «Формы» «легкие» «с» флекс-колонкой.

💡

.checks { display: flex; flex-direction: column; gap: 8px; } — «анкета» «дышит» снизу вверх «легко».

Практика: центрированный блок CTA

CTA-«плитка»: заголовок, текст, кнопка — центр «в» середине. width-ограничение (max-width) + column + center. «Призыв» «к действию» — «выровненные» «центры». «Последний» «вздох» продающей «секции» — флекс-центр.

💡

.cta { display: flex; flex-direction: column; align-items: center; text-align: center; } — «золотое» «сечение».

Инспектор флекса: DevTools-разметка

DevTools «рисует» flex-сетку: пунктирные «оси» и «ориентиры». Иконка «flex» у элемента — «кнопка входа». Клик — «показать» линии раскладки. «Инспектор» — «глаза» для «почему так» — «наполовину» решенная «задача».

💡

«Включите» отображение «ряда» в DevTools: «видна» ось, «остался» «один шаг» до «правки».

Панель свойств flex в инспекторе

Панель «flex» показывает: направление, перенос, justify, align — «слайдеры» значений. «Переключите» и «смотрите» живой результат. «Игра» в DevTools — «тренировка» «понимания» «без» перезагрузки. «Приборы» «обучают» быстрее письма.

💡

«Покрутите» justify/align в панели — «интуиция» осей «накачивается» без чтения «доки».

Чтение коэффициентов: что видит браузер

grow: 2 «в глазах» браузера — «вдвое больше» места, чем «сосед с 1». Соотношения — «и», не «сумма-равняй». «Логика» «пропорций»: 1:1:2 — «две» «половины» плюс «одна». «Счисления» «простые», «результаты» «сильны».

💡

«Колонки 1:2» — flex: 1 и flex: 2: «широкая» зона «вдвое» «глубже» узкой.

Разбор «сломанного» флекса

«Не работает» → «проверьте»: display: flex «на родителе»? «Прямые» ли дети? «Перебит» ли basis? Инспектор «подсветит» «виноватого». «Диагностика» — «план», не «метод тыка». Пять «проверок» — «старт» «ремонтов».

💡

«Список диагностики»: children «в» контейнере, basis/grow, wrap, min-width. «Порядок» — «лекарство».

Честные границы: чего не умеет flex

Флекс «одномерен»: «сетка» строк и столбцов «разом» — grid. «Выравнивание» по «строкам» «всей» «сетки» — не флекс. «Раскладка» «простая» строка — флекс; «сложная» «матрица» — grid. «Честность» границ — «мудрость» выбора.

💡

«Строка и колонка одинаково» ← сетка; «одна ось» ← флекс. Слушайте «водораздел» «сложности».

Когда флекс — выбор: критерии

Выбирайте flex, когда «одна ось» важнее (ряд/столбец) и «распределение» свободного. Простая «шапка», кнопки, «медиа-объект». При «двух осях» одинаково «значимых» — grid. Критерий «оси» — «вопрос о намерении».

💡

«Строка» данные — flex; «доска» матрица — grid. «Осевой» тест: «вытяните» — «линия» или «план»?

Иерархия флексов: вложенность осмысленно

«Пузырь» флекс-уровней: страница (column) → карточки (row) → карточка (column) → кнопки (row). «Иерархия» — «карта» раскладки. «Глубина» — «по компонентам», не «до бесконечности». «Правило»: каждый «уровень» отвечает «своей» оси.

💡

«Заводная» иерархия — «прочитывается» «сквозь» классы: «лист» описания «плоский» «для» глаз.

Контент против контейнера: кто диктует

Ширина «элемента» — «спор»: basis-«мечта» vs контент-«максимум» vs grow-«простор». «Побеждают» ограничители (min/max) и shrink. Владейте «правом» «не» «раздавиться» контентом: min-width: 0. «Сила» «правителя» — в «presetах».

💡

Длинные «строки» в карточке «ломают» — room: «передайте» min-width: 0: «контейнер» «верховодит».

Логические свойства с флексом

Логические «свойства» (margin-inline, padding-block) «следят» за направлением текста. В flex «направления» тоже «логичны» при RTL. «Биодиагноз» «направлений» — «дружба» с «арабским» UI. «Современные» интернеты «в RTL» — «неистово» по «умолчанию».

💡

margin-inline-start «вместо» margin-left — «зеркально» «в RTL»; флекс «сам» «зеркалит» ряд.

Flex-итог одного макета: маленькая сборка

Возьмите «сырою» страницу: разгоните «шапку», «ряд», «карточки», «футер» флексом. Смотрите «перестройку» на «узком». «Сборка» — «2 часа» — «флекс-грамотность» в «памяти». «Практическая» «копилка» — «ваш» «инструмент».

💡

«Макет-flex» без «grid» — «здорово»; «положите» «распечатку» «осей» — «обучение» зримое.

Колонки на мобильных: перенос наступил

На узком экране «ряд» колонок «стекается»: flex-wrap «опускает» или @media меняет direction. «Зелёная» зона: main, sidebar — «столбик». «Расчёт» «перестройки» — «контент», не «магия». «Мобильная» «перестройка» — «стандарт» адаптива.

💡

@media (max-width: 700px) { .cols { flex-direction: column; } } — «одна» строка «решает» мобильный.

Направление и медиа: связка наступает

«Один» макет «живёт» в «режимах»: row на «широком», column на «узком». Медиазапрос меняет direction и порядок. «Логика» «перестроек» — «макросмысл» каждого экрана. «Записывайте», «какой» вид «для» «какой» ширины.

💡

.pair { flex-direction: row; } @media-узкий { .pair { flex-direction: column; } } — «дуплекс» «напротив».

Сворачиваемое меню: идея и CSS

«Гамбургер» — «меню» прячется, «разворачивается» по клику. Без JS — «через» checkbox-хаки; с JS — «класс-Тглаз». «Сворачиваемость» — «комбинация» flex + скрытия. «Навигация» мобильного «вида» — «главная» «повестка» adaptive.

💡

«Гамбургер» нужен, когда «пункты» не «влезают»; иначе — «просто» wrap-меню без «кнопки».

Гибкие карточки через flex и проценты

Карточки «по процентам» (width: 33%) «дышат» с «контейнером»; flex «дописывает» гибкость. Смесь % + flex: 1 — «и резина, и граница». Узкие — wrap перестроит. «Гибкость» пишут «по уровням» — «главная» «тема» сеток.

💡

flex: 1 1 30% — «расти», «но» «переноситься» «после 30%»: «плавная» «процентизация».

Размер шрифта в ряду: vertical rhythm

Раскладка «ряда» «не» «врозь» с «текст-мерой»: высоты, строки, отступы «в ритме». flex «раскладывает», типографика «задаёт» «дыхание». «Синхронизация» «строк» — «красивые» карточки «в» «списочке». «Ритм» — «второй глаз» верстки.

💡

Высота «кнопок-в-ряду» «вместе» с полями и строкой — «пальцы» «одинаковый» «жонглёр».

Отступы-ритм: gap в адаптивном дизайне

gap «меняется» по «экранам»: большим «просторам» — «шире» «щели». Медиа «перенастраивают» gap одной строкой. «Ритм» «полей» «плавает» с «экраном». «Адаптивный» gap — «микрофича» «макета»: «дыхание» «блока».

💡

.grid { gap: 12px; } @media широкий { .grid { gap: 24px; } } — «простор» «по ширине окна».

Портрет и ландшафт: повороты экрана

Ориентация влияет на раскладку: @media (orientation: portrait). «Телефон» вертикаль — «один» столбец; горизонталь — «побольше». «Не» «запоминайте» «детали» — «проверяйте» «оба» вида. «Поворот» — «частая» ситуация «реальной» жизни.

💡

Портрет: column; ландшафт: row — «смелая» «манера» «в» «дизайн-решениях» «риска».

Микросетки: флекс внутри карточки

Карточка «составная»: заголовок, теги, цена — «своё» микроблоки. row-флекс «для» тегов и «цены», column — «общая» ось. «Правильная» «вложенность» — «структура» «карточки». «Микро» внутри «макро» — «иерархия» «раскладок».

💡

.card { flex: column } + .card-footer { margin-top: auto } — «цена» «прижата» низ: «формула» карточек.

Плавный адаптив: flex-маятник экрана

«Резина» «от» flex (проценты, wrap) + «изломы» @media — «двухступенчатый» адаптив. «Меньше» запросов — «мягкие» переходы. «Плавность» — «свойство» «упругости» флекса. «Смотрите» «сужение» — «инструменты» «DevTools».

💡

«Почти не пишу media — flex «сделал»: «первой» «волны» хватает для 80% «узких».

Практика: «дышащий» лендинг

Лендинг-«дыхание»: flex-шапка, wrap-карточки, «центр»-герой, «прижат»-footer. Прогоните «от 320 до 1920» в DevTools — «ритм» не «ломается». «Практика» — «прощание» с лендингом «на флексах».

💡

«Диапазон» ширин — «скоростной» проход: «хитрости» видны «мгновенно» — «исправляйте» на «месте».

Типичные ошибки flex: разбор

Ошибки: flex «не» на «контейнере», «прямые» дети, «забытый» min-width, «перемудренный» order, «все» в nowrap. Каждая «штука» — «знакомо» «мучает». «Список-фразы» — «антидот» «ночных» «диагнозов».

💡

«Сортировка» Diag-fail: «родитель flex», «дети» — «элементы»; «иначе» — «спина» «не та».

Чек-лист хорошего flex-макета

Пять «проверок»: оси «правильные», gap «вместо» марженов, min-width «у гибких», центр «через» flex, опечатки «нет». Прогон — «минута», «экономия» — «часы». «Чек» — «рутина» «мастеров» «раскладки».

💡

«Лист» на «стену»: asis/gap/min/центр/тип — быстрая «правка» flex-компонента «почти» «без» кофе.

Flex против grid: предпросмотр

Grid — «двумерный» «каркас»: строки и столбцы «логично» сразу. Flex — «одноосный» «поток». «Проект» «с большими» «сетками» — grid; «ряд» «частностей» — flex. «Смешивание» — «норма» «современных» «макетов».

💡

«Каркас» — grid, «внутрь» карточек — flex: «два» инструмента «служат» «вместе» «двум» целям.

Градусник навыка: самооценка flex

«Оцените»: могу «выровнять» центр? «растянуть» колонку? «перенести» ряд? «вытолкнуть» кнопку? Четыре «навыка» — «база» флекс-«зрелости». Без «шапки» и «карточек» — «сдача» «экзамена» «практикой».

💡

«Быстро» соберите «шапку-ряд-карточку-футер» «в слепом» «режиме» — «градусник» «покажет» «правду».

Свой CSS-фреймворк мини-утилит

Сверните «утилиты»: .row, .column, .center, .grow — «свои» классы-«полторы» строки. Повторные «фразы» — «в классы». «Микро-фреймворк» «держит» «единый» стиль. «Без» «тяжёлых» библиотек — «волшебный» «флекс-набор».

💡

.row { display: flex; gap: var(--g); } — «пять» базовых классов — «спина» «половины» «страниц» проекта.

Удобство чтения flex-кода

«Флекс-код» «читается», когда «родитель» и «дети» рядом «видны». Имена классов «по роли»: — .toolbar, .row-actions. Свойства «пакуются» в «логичные» блоки. «Коллега» «входит» «в» «макет» без «дебагов» — «ценность» «стилей».

💡

«Комплексный» блок — «полтора» экрана? «Разбивайте» «на» «компоненты»: «память» «восстановит» «части».

Умеренность флекса: не «гипно»-фанатизм

«Всё» через flex «не бывает»: «местами» проще «блоки», «позишн» или «sade». «Раздутые» флекс-цепочки «громоздки». «Инструмент» — «по задаче»: «редкий» «ряд» — флекс, «гора» — «оглядитесь». «Мера» — «признак» «мастерства».

💡

«Простой» заголовок «после» «картинки» без «флекса» — «нормально»; flex «не» «догма».

Flex в жизни большого проекта

В «крупных» системах flex «живёт» в «компонентах»: кнопки, меню, поля, карточки. «Сетки» — grid, «потоки» — flex. «Консистентность» компонентов — «флекс-стандарт» команды. «Архитектура» «раскладок» — «другие» «слои». «Изученное» — «фундамент» «проектов».

💡

Дизайн-система: кнопка-«флекс-центр», «поле»-«флекс-строка»: «пилюля» «единого» «строя».

Контрольная: стресс-тест флекса

Задание: «дашборд» — шапка, «три» карточки «с» цифрами, «график», «сайдбар». Всё «flex», «резиново», «перестраивается». Прогоните «ширины» 360→1600. «Стресс-тест» «прошёл» — «урок» «раскладки» «усвоен».

💡

«Дашборд» — «железный» «ТЕСТ»: если «пережили» «350px» — «вы» «знаете» «флекс».

Изюминки flex: открытия за урок

«Открытия»: auto-центр, gap-«ритм», min-width«-спаситель», order-«перестановка», margin-auto. «Десятка» «мелочей» — «мощь» «в деталях». Каждый «проект» «растёт» на «изюминках». «Заметки» — «шпаргалка» «будущих» «правок».

💡

Сведите «изюминки» в «карточки-шпаргалки»: «браузер» «мгновенно» «в» «руках» — «арсенал» «растет».

Итоги урока 6: флекс в ладони

Урок Flexbox «дал» «ладонь» раскладки: оси, выравнивание, распределение, рост и сжатие. Компоненты собираются «строками» и «столбиками» мгновенно. База для «страниц», «шапок» и «форм» готова.

💡

«Флекс» — «рабочая лошадка» раскладок: один инструмент для «половины» типовых сцен.

Чек-пропорции: grow/shrink/basis на интуиции

grow — «аппетит» к месту, shrink — «уступчивость» в тесноте, basis — «стартовый» рост. «Интуиция» троицы — «быстрая» «раскладка» без калькулятора. «Проверяйте» «словом»: «расти», «не сжиматься», «отсюда». «Понимание» — «память» движений.

💡

flex: 1 — «все равны»; flex: none — «стоять»; flex: 2 — «вдвое». Три «диалекта» — «словарь» рядов.

Домашнее задание: профиль-дашборд

Соберите «личный» дашборд: шапка с поиском, карточки «статистик», лента, сайдбар. Каждый «блок» — flex-компонент. «Перестройка» на мобильном — wrap/media. «Дашборд» — «практический» «итог» «флекс»-урока.

💡

«Дашборд» «накапливает» весь «багаж»: оси, шкалы, переносы, «мир» «плотности» — «проверено».

Дальше: двухмерные сетки (урок 7 — обзор)

Grid добавляет «второе» измерение: строки и столбцы «вместе». «Доска» из «ячеек» — «мощь» для «галерей» и «панелей». Урок 7 «открывает» Grid после «флекс-базы». «Инструменты» «растут» — «мировое» «полотно».

💡

Flex «наполнил» строку; Grid «засеет» площадь: «двудонная» «раскладка» «под» «повесткой».

Раскладки в реальных проектах

Реальный «веб»: flex «в» шапках и кнопках, grid «в» каталогах, «свободная» «пресса»-компоновка. «Читаете» чужой CSS — «видите» «пары». «Наблюдение» — «банк» «паттернов». «YouTube-проекты» — «историческая» «мудрость» «кода».

💡

«Практика разбора» чужой раскладки — «метод» «номер один» «роста» «после» базы.

Предупреждение: не «превращайте» всё во флекс

Не «всё» — флекс: «текстовые» сцены простым «потоком». «Флекс-слои» «внутри» «всего» — «густая» вложенность. «Простота» — «архитектурный» «цель». «Не» «переписывайте» «рабочие» «раскладки» «из» «баловства».

💡

«Работает простым flow?» — «оставьте»; флекс – для «ряда/вертикали», не «мода» для «всего».

Советы от практики: пять заповедей

1) контейнер «тверд»; 2) gap — «не» margin; 3) min-width «гибким»; 4) ось «одна» «задача»; 5) инспектор «включай». «Пять заповедей» — «мгновенная» «диагностика» «половины» «флекс-проблем».

💡

«Чти» заповеди — «меньше» «наградят» «правками» «найти» «неуловимую» «шину».

Маленький глоссарий флекс-терминов

Контейнер, элемент, ось, justify, align, wrap, gap, grow, shrink, basis, order. «Говорите» «с» коллегами «этими» «словами» — «точность» «общения». «Словарь» — «общий» «язык» «вёрстки» «в» «команде».

💡

«Говорю: гибкий элемент растет-сжимается с basis 200» — «коллега» «мгновенно» «представит» код.

Неделённая тема: высоты и «прижатие»

«Прижатие» вниз карточки: margin-top: auto у «последнего» элемента. «Выравнивание» по «вертикали» «ряда». «Нулевая» строка «до» контента — «дыхание». «Микро-техника» — «частый» «спасатель» «карточек».

💡

.card .bottom { margin-top: auto; } — «действие» «у» низа карточки, «неважно» «высота» «текста».

Заключение урока 6: раскладка — мысль

flex «научил» «мыслить» раскладками: «ось + распределение + выравнивание». «Компоненты» «становятся» «живыми» и «отзывчивыми». Курс «обрастает» «инструментами» — дальше «JavaScript» оживит «страницы».

💡

«Раскладка» — «инфраструктура»; «следующее» — «поведение». Урок 7 откроет «мир» JavaScript.

Заголовок 6000: квиз со связкой <input> + <textarea> (атрибут aria-labelledby)

Задание 6000 на тему «квиз». Урок пары: <input> и <textarea>, атрибут «aria-labelledby» и «aria-current». Практика: лендинг курса. Форматив группируют fieldset+legend; у полей видимое label.. Визуальное правило: логичный порядок полей. Свяжите «на скринридере проверьте имя». Доступность «квиз» читается как имя, затем пояснение.

💡

Свяжите «в» фразе на скринридере проверьте имя; Форматив группируют fieldset+legend; у полей видимое label..

Заголовок 6001: расписание со связкой <meter> + <dl> (атрибут aria-describedby)

Задание 6001 на тему «расписание». Урок пары: <meter> и <dl>, атрибут «aria-describedby» и «aria-controls». Практика: каталог уроков. Имя у элемента — всегда одно предложение смысла; label и ссылка имени связаны.. Визуальное правило: стрелки по сворачиваемому меню. Проверьте «тяните фокус после действия». Доступность «расписание» читается как имя, затем пояснение.

💡

Проверьте «в» фразе тяните фокус после действия; Имя у элемента — всегда одно предложение смысла; label и ссылка имени связаны..

Заголовок 6002: регистрация со связкой <header> + <footer> (атрибут aria-relevant)

Задание 6002 на тему «регистрация». Урок пары: <header> и <footer>, атрибут «aria-relevant» и «aria-label». Практика: прогресс-бар ДЗ. Имя у элемента — всегда одно предложение смысла; label и ссылка имени связаны.. Визуальное правило: стрелки по сворачиваемому меню. Добавьте «на скринридере проверьте имя». Доступность «регистрация» читается как имя, затем пояснение.

💡

Добавьте «в» фразе на скринридере проверьте имя; Имя у элемента — всегда одно предложение смысла; label и ссылка имени связаны..

Заголовок 6003: демо со связкой <input> + <textarea> (атрибут aria-live=polite)

Задание 6003 на тему «демо». Урок пары: <input> и <textarea>, атрибут «aria-live=polite» и «aria-pressed». Практика: трек наставника. Заголовки выстраиваются иерархией h1>h2>h3 без пропусков уровня.. Визуальное правило: видимая рамка фокуса. Добавьте «на скринридере проверьте имя». Доступность «демо» читается как имя, затем пояснение.

💡

Добавьте «в» фразе на скринридере проверьте имя; Заголовки выстраиваются иерархией h1>h2>h3 без пропусков уровня..

Заголовок 6004: чат со связкой <legend> + <caption> (атрибут aria-atomic=true)

Задание 6004 на тему «чат». Урок пары: <legend> и <caption>, атрибут «aria-atomic=true» и «aria-modal=true». Практика: вопрос-ответ модуля. Живые регионы aria-live озвучивают изменения без фокуса.. Визуальное правило: фокус на ближайший заголовок после валидации. Убедитесь «озвучьте переход без мыши». Доступность «чат» читается как имя, затем пояснение.

💡

Убедитесь «в» фразе озвучьте переход без мыши; Живые регионы aria-live озвучивают изменения без фокуса..

Заголовок 6005: вход со связкой <textarea> + <table> (атрибут role=tab)

Задание 6005 на тему «вход». Урок пары: <textarea> и <table>, атрибут «role=tab» и «aria-atomic=true». Практика: расписание группы. Имя у элемента — всегда одно предложение смысла; label и ссылка имени связаны.. Визуальное правило: начало: фокус на первую ошибку. Обеспечьте «на скринридере проверьте имя». Доступность «вход» читается как имя, затем пояснение.

💡

Обеспечьте «в» фразе на скринридере проверьте имя; Имя у элемента — всегда одно предложение смысла; label и ссылка имени связаны..

Заголовок 6006: личный кабинет со связкой <button> + <label> (атрибут aria-haspopup)

Задание 6006 на тему «личный кабинет». Урок пары: <button> и <label>, атрибут «aria-haspopup» и «role=button». Практика: каталог уроков. Декоративные иконки прячут aria-hidden; смысл остаётся в тексте.. Визуальное правило: фокус виден в рамке 3px. Добавьте «озвучьте переход без мыши». Доступность «личный кабинет» читается как имя, затем пояснение.

💡

Добавьте «в» фразе озвучьте переход без мыши; Декоративные иконки прячут aria-hidden; смысл остаётся в тексте..

Заголовок 6007: подписка со связкой <ul aria-label> + <button> (атрибут aria-owns)

Задание 6007 на тему «подписка». Урок пары: <ul aria-label> и <button>, атрибут «aria-owns» и «aria-describedby». Практика: вопрос-ответ модуля. Имя у элемента — всегда одно предложение смысла; label и ссылка имени связаны.. Визуальное правило: стрелки по сворачиваемому меню. Продумайте «проверьте сообщение об ошибке». Доступность «подписка» читается как имя, затем пояснение.

💡

Продумайте «в» фразе проверьте сообщение об ошибке; Имя у элемента — всегда одно предложение смысла; label и ссылка имени связаны..

Заголовок 6008: демо со связкой <figure> + <input> (атрибут role=button)

Задание 6008 на тему «демо». Урок пары: <figure> и <input>, атрибут «role=button» и «aria-activedescendant». Практика: анкета студента. Декоративные иконки прячут aria-hidden; смысл остаётся в тексте.. Визуальное правило: фокус не застревает в модалке. Свяжите «на скринридере проверьте имя». Доступность «демо» читается как имя, затем пояснение.

💡

Свяжите «в» фразе на скринридере проверьте имя; Декоративные иконки прячут aria-hidden; смысл остаётся в тексте..

Заголовок 6009: программа со связкой <footer> + <meter> (атрибут aria-atomic=true)

Задание 6009 на тему «программа». Урок пары: <footer> и <meter>, атрибут «aria-atomic=true» и «aria-modal=true». Практика: лендинг курса. Скринридер прочтёт имя без контекста страницы; ориентиры навигации помогают.. Визуальное правило: проговаривание при return. Проверьте «в режиме вкладок доберитесь до цели». Доступность «программа» читается как имя, затем пояснение.

💡

Проверьте «в» фразе в режиме вкладок доберитесь до цели; Скринридер прочтёт имя без контекста страницы; ориентиры навигации помогают..

Заголовок 6010: рассылка со связкой <header> + <footer> (атрибут aria-keyshortcuts)

Задание 6010 на тему «рассылка». Урок пары: <header> и <footer>, атрибут «aria-keyshortcuts» и «aria-live=polite». Практика: кабинет ученика. Состояние раскрытия передают aria-expanded и aria-контролы честно.. Визуальное правило: фокус не застревает в модалке. Проверьте «убедитесь в уровне заголовка». Доступность «рассылка» читается как имя, затем пояснение.

💡

Проверьте «в» фразе убедитесь в уровне заголовка; Состояние раскрытия передают aria-expanded и aria-контролы честно..

Заголовок 6011: гайд со связкой <th scope> + <header> (атрибут aria-modal=true)

Задание 6011 на тему «гайд». Урок пары: <th scope> и <header>, атрибут «aria-modal=true» и «aria-live=assertive». Практика: форма записи на интенсивы. Скринридер прочтёт имя без контекста страницы; ориентиры навигации помогают.. Визуальное правило: проговаривание при return. Продумайте «в режиме вкладок доберитесь до цели». Доступность «гайд» читается как имя, затем пояснение.

💡

Продумайте «в» фразе в режиме вкладок доберитесь до цели; Скринридер прочтёт имя без контекста страницы; ориентиры навигации помогают..

Заголовок 6012: оплата со связкой <label> + <fieldset> (атрибут aria-describedby)

Задание 6012 на тему «оплата». Урок пары: <label> и <fieldset>, атрибут «aria-describedby» и «aria-controls». Практика: расписание группы. Порядок Tab соответствует визуальному чтению; видимая рамка обязательна.. Визуальное правило: логичный порядок полей. Проверьте «тяните фокус после действия». Доступность «оплата» читается как имя, затем пояснение.

💡

Проверьте «в» фразе тяните фокус после действия; Порядок Tab соответствует визуальному чтению; видимая рамка обязательна..

Заголовок 6013: презентация со связкой <a> + <select> (атрибут aria-hidden=true)

Задание 6013 на тему «презентация». Урок пары: <a> и <select>, атрибут «aria-hidden=true» и «role=tab». Практика: страница тарифов. Состояние раскрытия передают aria-expanded и aria-контролы честно.. Визуальное правило: начало: фокус на первую ошибку. Проверьте «озвучьте переход без мыши». Доступность «презентация» читается как имя, затем пояснение.

💡

Проверьте «в» фразе озвучьте переход без мыши; Состояние раскрытия передают aria-expanded и aria-контролы честно..

Заголовок 6014: запись со связкой <figure> + <input> (атрибут aria-activedescendant)

Задание 6014 на тему «запись». Урок пары: <figure> и <input>, атрибут «aria-activedescendant» и «aria-keyshortcuts». Практика: страница тарифов. Декоративные иконки прячут aria-hidden; смысл остаётся в тексте.. Визуальное правило: фокус виден в рамке 3px. Свяжите «проверьте сообщение об ошибке». Доступность «запись» читается как имя, затем пояснение.

💡

Свяжите «в» фразе проверьте сообщение об ошибке; Декоративные иконки прячут aria-hidden; смысл остаётся в тексте..

Заголовок 6015: прогресс со связкой <main> + <details> (атрибут role=tab)

Задание 6015 на тему «прогресс». Урок пары: <main> и <details>, атрибут «role=tab» и «aria-atomic=true». Практика: лендинг курса. Имя у элемента — всегда одно предложение смысла; label и ссылка имени связаны.. Визуальное правило: фокус на ближайший заголовок после валидации. Обеспечьте «тяните фокус после действия». Доступность «прогресс» читается как имя, затем пояснение.

💡

Обеспечьте «в» фразе тяните фокус после действия; Имя у элемента — всегда одно предложение смысла; label и ссылка имени связаны..

Заголовок 6016: баллы со связкой <ul aria-label> + <button> (атрибут aria-describedby)

Задание 6016 на тему «баллы». Урок пары: <ul aria-label> и <button>, атрибут «aria-describedby» и «aria-controls». Практика: вопрос-ответ модуля. Заголовки выстраиваются иерархией h1>h2>h3 без пропусков уровня.. Визуальное правило: проговаривание при return. Свяжите «на скринридере проверьте имя». Доступность «баллы» читается как имя, затем пояснение.

💡

Свяжите «в» фразе на скринридере проверьте имя; Заголовки выстраиваются иерархией h1>h2>h3 без пропусков уровня..

Заголовок 6017: карточка товара со связкой <header> + <footer> (атрибут role=region)

Задание 6017 на тему «карточка товара». Урок пары: <header> и <footer>, атрибут «role=region» и «aria-valuetext». Практика: карточка вебинара. Состояние раскрытия передают aria-expanded и aria-контролы честно.. Визуальное правило: начало: фокус на первую ошибку. Продумайте «убедитесь в уровне заголовка». Доступность «карточка товара» читается как имя, затем пояснение.

💡

Продумайте «в» фразе убедитесь в уровне заголовка; Состояние раскрытия передают aria-expanded и aria-контролы честно..

Заголовок 6018: программа со связкой <textarea> + <table> (атрибут aria-activedescendant)

Задание 6018 на тему «программа». Урок пары: <textarea> и <table>, атрибут «aria-activedescendant» и «aria-keyshortcuts». Практика: прогресс-бар ДЗ. Декоративные иконки прячут aria-hidden; смысл остаётся в тексте.. Визуальное правило: крупный курсор в кастомном фокусе. Добавьте «на скринридере проверьте имя». Доступность «программа» читается как имя, затем пояснение.

💡

Добавьте «в» фразе на скринридере проверьте имя; Декоративные иконки прячут aria-hidden; смысл остаётся в тексте..

Заголовок 6019: модуль со связкой <button> + <label> (атрибут aria-required=true)

Задание 6019 на тему «модуль». Урок пары: <button> и <label>, атрибут «aria-required=true» и «aria-valuenow». Практика: лендинг курса. Порядок Tab соответствует визуальному чтению; видимая рамка обязательна.. Визуальное правило: начало: фокус на первую ошибку. Продумайте «на скринридере проверьте имя». Доступность «модуль» читается как имя, затем пояснение.

💡

Продумайте «в» фразе на скринридере проверьте имя; Порядок Tab соответствует визуальному чтению; видимая рамка обязательна..

Заголовок 6020: урок со связкой <meter> + <dl> (атрибут aria-label)

Задание 6020 на тему «урок». Урок пары: <meter> и <dl>, атрибут «aria-label» и «aria-expanded». Практика: страница сертификатов. Живые регионы aria-live озвучивают изменения без фокуса.. Визуальное правило: фокус виден в рамке 3px. Свяжите «озвучьте переход без мыши». Доступность «урок» читается как имя, затем пояснение.

💡

Свяжите «в» фразе озвучьте переход без мыши; Живые регионы aria-live озвучивают изменения без фокуса..

Заголовок 6021: прогресс со связкой <input> + <textarea> (атрибут role=button)

Задание 6021 на тему «прогресс». Урок пары: <input> и <textarea>, атрибут «role=button» и «aria-activedescendant». Практика: каталог уроков. Декоративные иконки прячут aria-hidden; смысл остаётся в тексте.. Визуальное правило: вкладки и shift+Tab. Проверьте «тяните фокус после действия». Доступность «прогресс» читается как имя, затем пояснение.

💡

Проверьте «в» фразе тяните фокус после действия; Декоративные иконки прячут aria-hidden; смысл остаётся в тексте..

Заголовок 6022: оплата со связкой <footer> + <meter> (атрибут aria-pressed)

Задание 6022 на тему «оплата». Урок пары: <footer> и <meter>, атрибут «aria-pressed» и «aria-invalid». Практика: каталог уроков. Заголовки выстраиваются иерархией h1>h2>h3 без пропусков уровня.. Визуальное правило: видимая рамка фокуса. Убедитесь «озвучьте переход без мыши». Доступность «оплата» читается как имя, затем пояснение.

💡

Убедитесь «в» фразе озвучьте переход без мыши; Заголовки выстраиваются иерархией h1>h2>h3 без пропусков уровня..

Заголовок 6023: форма со связкой <caption> + <main> (атрибут aria-live=assertive)

Задание 6023 на тему «форма». Урок пары: <caption> и <main>, атрибут «aria-live=assertive» и «aria-checked». Практика: страница оплаты. Форматив группируют fieldset+legend; у полей видимое label.. Визуальное правило: вкладки и shift+Tab. Добавьте «на скринридере проверьте имя». Доступность «форма» читается как имя, затем пояснение.

💡

Добавьте «в» фразе на скринридере проверьте имя; Форматив группируют fieldset+legend; у полей видимое label..

Заголовок 6024: вход со связкой <nav aria-label> + <aside> (атрибут aria-describedby)

Задание 6024 на тему «вход». Урок пары: <nav aria-label> и <aside>, атрибут «aria-describedby» и «aria-controls». Практика: анкета студента. Имя у элемента — всегда одно предложение смысла; label и ссылка имени связаны.. Визуальное правило: крупный курсор в кастомном фокусе. Свяжите «озвучьте переход без мыши». Доступность «вход» читается как имя, затем пояснение.

💡

Свяжите «в» фразе озвучьте переход без мыши; Имя у элемента — всегда одно предложение смысла; label и ссылка имени связаны..

Заголовок 6025: подписка со связкой <output> + <ul aria-label> (атрибут aria-current)

Задание 6025 на тему «подписка». Урок пары: <output> и <ul aria-label>, атрибут «aria-current» и «aria-hidden=true». Практика: страница сертификатов. Заголовки выстраиваются иерархией h1>h2>h3 без пропусков уровня.. Визуальное правило: порядок Tab по слоям. Убедитесь «озвучьте переход без мыши». Доступность «подписка» читается как имя, затем пояснение.

💡

Заголовок 6026: чек-аут со связкой <legend> + <caption> (атрибут aria-describedby)

Задание 6026 на тему «чек-аут». Урок пары: <legend> и <caption>, атрибут «aria-describedby» и «aria-controls». Практика: страница оплаты. Декоративные иконки прячут aria-hidden; смысл остаётся в тексте.. Визуальное правило: фокус на ближайший заголовок после валидации. Проверьте «проверьте сообщение об ошибке». Доступность «чек-аут» читается как имя, затем пояснение.

💡

Проверьте «в» фразе проверьте сообщение об ошибке; Декоративные иконки прячут aria-hidden; смысл остаётся в тексте..

Заголовок 6027: вебинар со связкой <label> + <fieldset> (атрибут aria-controls)

Задание 6027 на тему «вебинар». Урок пары: <label> и <fieldset>, атрибут «aria-controls» и «aria-haspopup». Практика: каталог уроков. Форматив группируют fieldset+legend; у полей видимое label.. Визуальное правило: логичный порядок полей. Свяжите «проверьте сообщение об ошибке». Доступность «вебинар» читается как имя, затем пояснение.

💡

Свяжите «в» фразе проверьте сообщение об ошибке; Форматив группируют fieldset+legend; у полей видимое label..

Заголовок 6028: корзина со связкой <progress aria-label> + <time> (атрибут aria-controls)

Задание 6028 на тему «корзина». Урок пары: <progress aria-label> и <time>, атрибут «aria-controls» и «aria-haspopup». Практика: страница тарифов. Имя у элемента — всегда одно предложение смысла; label и ссылка имени связаны.. Визуальное правило: логичный порядок полей. Продумайте «тяните фокус после действия». Доступность «корзина» читается как имя, затем пояснение.

💡

Продумайте «в» фразе тяните фокус после действия; Имя у элемента — всегда одно предложение смысла; label и ссылка имени связаны..

Заголовок 6029: каталог со связкой <ul aria-label> + <button> (атрибут aria-flowto)

Задание 6029 на тему «каталог». Урок пары: <ul aria-label> и <button>, атрибут «aria-flowto» и «aria-labelledby». Практика: страница оплаты. Скринридер прочтёт имя без контекста страницы; ориентиры навигации помогают.. Визуальное правило: фокус на ближайший заголовок после валидации. Обеспечьте «на скринридере проверьте имя». Доступность «каталог» читается как имя, затем пояснение.

💡

Обеспечьте «в» фразе на скринридере проверьте имя; Скринридер прочтёт имя без контекста страницы; ориентиры навигации помогают..

Заголовок 6030: расписание со связкой <fieldset> + <th scope> (атрибут role=alert)

Задание 6030 на тему «расписание». Урок пары: <fieldset> и <th scope>, атрибут «role=alert» и «aria-relevant». Практика: окно чата с куратором. Порядок Tab соответствует визуальному чтению; видимая рамка обязательна.. Визуальное правило: стрелки по сворачиваемому меню. Проверьте «на скринридере проверьте имя». Доступность «расписание» читается как имя, затем пояснение.

💡

Проверьте «в» фразе на скринридере проверьте имя; Порядок Tab соответствует визуальному чтению; видимая рамка обязательна..

Заголовок 6031: личные данные со связкой <progress aria-label> + <time> (атрибут aria-relevant)

Задание 6031 на тему «личные данные». Урок пары: <progress aria-label> и <time>, атрибут «aria-relevant» и «aria-label». Практика: страница сертификатов. Состояние раскрытия передают aria-expanded и aria-контролы честно.. Визуальное правило: фокус на ближайший заголовок после валидации. Добавьте «в режиме вкладок доберитесь до цели». Доступность «личные данные» читается как имя, затем пояснение.

💡

Добавьте «в» фразе в режиме вкладок доберитесь до цели; Состояние раскрытия передают aria-expanded и aria-контролы честно..

Заголовок 6032: программа со связкой <table> + <nav aria-label> (атрибут aria-live=assertive)

Задание 6032 на тему «программа». Урок пары: <table> и <nav aria-label>, атрибут «aria-live=assertive» и «aria-checked». Практика: расписание группы. Форматив группируют fieldset+legend; у полей видимое label.. Визуальное правило: логичный порядок полей. Обеспечьте «озвучьте переход без мыши». Доступность «программа» читается как имя, затем пояснение.

💡

Обеспечьте «в» фразе озвучьте переход без мыши; Форматив группируют fieldset+legend; у полей видимое label..

Заголовок 6033: карточка товара со связкой <output> + <ul aria-label> (атрибут aria-pressed)

Задание 6033 на тему «карточка товара». Урок пары: <output> и <ul aria-label>, атрибут «aria-pressed» и «aria-invalid». Практика: форма записи на интенсивы. Декоративные иконки прячут aria-hidden; смысл остаётся в тексте.. Визуальное правило: фокус виден в рамке 3px. Продумайте «в режиме вкладок доберитесь до цели». Доступность «карточка товара» читается как имя, затем пояснение.

💡

Продумайте «в» фразе в режиме вкладок доберитесь до цели; Декоративные иконки прячут aria-hidden; смысл остаётся в тексте..

Заголовок 6034: чек-аут со связкой <a> + <select> (атрибут aria-required=true)

Задание 6034 на тему «чек-аут». Урок пары: <a> и <select>, атрибут «aria-required=true» и «aria-valuenow». Практика: форма записи на интенсивы. Имя у элемента — всегда одно предложение смысла; label и ссылка имени связаны.. Визуальное правило: фокус не застревает в модалке. Продумайте «убедитесь в уровне заголовка». Доступность «чек-аут» читается как имя, затем пояснение.

💡

Продумайте «в» фразе убедитесь в уровне заголовка; Имя у элемента — всегда одно предложение смысла; label и ссылка имени связаны..

Заголовок 6035: подписка со связкой <fieldset> + <th scope> (атрибут aria-flowto)

Задание 6035 на тему «подписка». Урок пары: <fieldset> и <th scope>, атрибут «aria-flowto» и «aria-labelledby». Практика: форма записи на интенсивы. Скринридер прочтёт имя без контекста страницы; ориентиры навигации помогают.. Визуальное правило: фокус на ближайший заголовок после валидации. Добавьте «на скринридере проверьте имя». Доступность «подписка» читается как имя, затем пояснение.

💡

Добавьте «в» фразе на скринридере проверьте имя; Скринридер прочтёт имя без контекста страницы; ориентиры навигации помогают..

Заголовок 6036: вход со связкой <footer> + <meter> (атрибут aria-pressed)

Задание 6036 на тему «вход». Урок пары: <footer> и <meter>, атрибут «aria-pressed» и «aria-invalid». Практика: страница тарифов. Имя у элемента — всегда одно предложение смысла; label и ссылка имени связаны.. Визуальное правило: порядок Tab по слоям. Проверьте «озвучьте переход без мыши». Доступность «вход» читается как имя, затем пояснение.

💡

Проверьте «в» фразе озвучьте переход без мыши; Имя у элемента — всегда одно предложение смысла; label и ссылка имени связаны..

Заголовок 6037: отзыв со связкой <select> + <legend> (атрибут aria-expanded)

Задание 6037 на тему «отзыв». Урок пары: <select> и <legend>, атрибут «aria-expanded» и «aria-selected». Практика: окно чата с куратором. Имя у элемента — всегда одно предложение смысла; label и ссылка имени связаны.. Визуальное правило: фокус виден в рамке 3px. Проверьте «в режиме вкладок доберитесь до цели». Доступность «отзыв» читается как имя, затем пояснение.

💡

Проверьте «в» фразе в режиме вкладок доберитесь до цели; Имя у элемента — всегда одно предложение смысла; label и ссылка имени связаны..

Заголовок 6038: демо со связкой <progress aria-label> + <time> (атрибут role=region)

Задание 6038 на тему «демо». Урок пары: <progress aria-label> и <time>, атрибут «role=region» и «aria-valuetext». Практика: расписание группы. Форматив группируют fieldset+legend; у полей видимое label.. Визуальное правило: видимая рамка фокуса. Обеспечьте «озвучьте переход без мыши». Доступность «демо» читается как имя, затем пояснение.

💡

Обеспечьте «в» фразе озвучьте переход без мыши; Форматив группируют fieldset+legend; у полей видимое label..

Заголовок 6039: каталог со связкой <table> + <nav aria-label> (атрибут aria-describedby)

Задание 6039 на тему «каталог». Урок пары: <table> и <nav aria-label>, атрибут «aria-describedby» и «aria-controls». Практика: трек наставника. Состояние раскрытия передают aria-expanded и aria-контролы честно.. Визуальное правило: начало: фокус на первую ошибку. Продумайте «тяните фокус после действия». Доступность «каталог» читается как имя, затем пояснение.

💡

Продумайте «в» фразе тяните фокус после действия; Состояние раскрытия передают aria-expanded и aria-контролы честно..

Заголовок 6040: расписание со связкой <legend> + <caption> (атрибут aria-selected)

Задание 6040 на тему «расписание». Урок пары: <legend> и <caption>, атрибут «aria-selected» и «role=region». Практика: анкета студента. Форматив группируют fieldset+legend; у полей видимое label.. Визуальное правило: фокус на ближайший заголовок после валидации. Убедитесь «на скринридере проверьте имя». Доступность «расписание» читается как имя, затем пояснение.

💡

Убедитесь «в» фразе на скринридере проверьте имя; Форматив группируют fieldset+legend; у полей видимое label..

Заголовок 6041: квиз со связкой <label> + <fieldset> (атрибут aria-modal=true)

Задание 6041 на тему «квиз». Урок пары: <label> и <fieldset>, атрибут «aria-modal=true» и «aria-live=assertive». Практика: журнал оценок. Порядок Tab соответствует визуальному чтению; видимая рамка обязательна.. Визуальное правило: стрелки по сворачиваемому меню. Проверьте «проверьте сообщение об ошибке». Доступность «квиз» читается как имя, затем пояснение.

💡

Проверьте «в» фразе проверьте сообщение об ошибке; Порядок Tab соответствует визуальному чтению; видимая рамка обязательна..

Заголовок 6042: квиз со связкой <label> + <fieldset> (атрибут role=region)

Задание 6042 на тему «квиз». Урок пары: <label> и <fieldset>, атрибут «role=region» и «aria-valuetext». Практика: лендинг курса. Декоративные иконки прячут aria-hidden; смысл остаётся в тексте.. Визуальное правило: видимая рамка фокуса. Убедитесь «проверьте сообщение об ошибке». Доступность «квиз» читается как имя, затем пояснение.

💡

Убедитесь «в» фразе проверьте сообщение об ошибке; Декоративные иконки прячут aria-hidden; смысл остаётся в тексте..

Заголовок 6043: профиль со связкой <main> + <details> (атрибут aria-owns)

Задание 6043 на тему «профиль». Урок пары: <main> и <details>, атрибут «aria-owns» и «aria-describedby». Практика: вопрос-ответ модуля. Форматив группируют fieldset+legend; у полей видимое label.. Визуальное правило: фокус не застревает в модалке. Убедитесь «озвучьте переход без мыши». Доступность «профиль» читается как имя, затем пояснение.

💡

Убедитесь «в» фразе озвучьте переход без мыши; Форматив группируют fieldset+legend; у полей видимое label..

Заголовок 6044: гайд со связкой <meter> + <dl> (атрибут role=alert)

Задание 6044 на тему «гайд». Урок пары: <meter> и <dl>, атрибут «role=alert» и «aria-relevant». Практика: прогресс-бар ДЗ. Заголовки выстраиваются иерархией h1>h2>h3 без пропусков уровня.. Визуальное правило: проговаривание при return. Продумайте «озвучьте переход без мыши». Доступность «гайд» читается как имя, затем пояснение.

💡

Продумайте «в» фразе озвучьте переход без мыши; Заголовки выстраиваются иерархией h1>h2>h3 без пропусков уровня..

Заголовок 6045: рассылка со связкой <ol> + <a> (атрибут aria-invalid)

Задание 6045 на тему «рассылка». Урок пары: <ol> и <a>, атрибут «aria-invalid» и «role=alert». Практика: лендинг курса. Заголовки выстраиваются иерархией h1>h2>h3 без пропусков уровня.. Визуальное правило: фокус не застревает в модалке. Свяжите «тяните фокус после действия». Доступность «рассылка» читается как имя, затем пояснение.

💡

Свяжите «в» фразе тяните фокус после действия; Заголовки выстраиваются иерархией h1>h2>h3 без пропусков уровня..

Заголовок 6046: заказ со связкой <figure> + <input> (атрибут role=alert)

Задание 6046 на тему «заказ». Урок пары: <figure> и <input>, атрибут «role=alert» и «aria-relevant». Практика: журнал оценок. Форматив группируют fieldset+legend; у полей видимое label.. Визуальное правило: проговаривание при return. Обеспечьте «на скринридере проверьте имя». Доступность «заказ» читается как имя, затем пояснение.

💡

Обеспечьте «в» фразе на скринридере проверьте имя; Форматив группируют fieldset+legend; у полей видимое label..

Заголовок 6047: баллы со связкой <a> + <select> (атрибут aria-invalid)

Задание 6047 на тему «баллы». Урок пары: <a> и <select>, атрибут «aria-invalid» и «role=alert». Практика: лендинг курса. Имя у элемента — всегда одно предложение смысла; label и ссылка имени связаны.. Визуальное правило: фокус на ближайший заголовок после валидации. Добавьте «проверьте сообщение об ошибке». Доступность «баллы» читается как имя, затем пояснение.

💡

Добавьте «в» фразе проверьте сообщение об ошибке; Имя у элемента — всегда одно предложение смысла; label и ссылка имени связаны..

Заголовок 6048: прогресс со связкой <ol> + <a> (атрибут aria-expanded)

Задание 6048 на тему «прогресс». Урок пары: <ol> и <a>, атрибут «aria-expanded» и «aria-selected». Практика: лендинг курса. Скринридер прочтёт имя без контекста страницы; ориентиры навигации помогают.. Визуальное правило: фокус виден в рамке 3px. Свяжите «на скринридере проверьте имя». Доступность «прогресс» читается как имя, затем пояснение.

💡

Свяжите «в» фразе на скринридере проверьте имя; Скринридер прочтёт имя без контекста страницы; ориентиры навигации помогают..

Заголовок 6049: оплата со связкой <legend> + <caption> (атрибут aria-label)

Задание 6049 на тему «оплата». Урок пары: <legend> и <caption>, атрибут «aria-label» и «aria-expanded». Практика: прогресс-бар ДЗ. Имя у элемента — всегда одно предложение смысла; label и ссылка имени связаны.. Визуальное правило: стрелки по сворачиваемому меню. Убедитесь «проверьте сообщение об ошибке». Доступность «оплата» читается как имя, затем пояснение.

💡

Убедитесь «в» фразе проверьте сообщение об ошибке; Имя у элемента — всегда одно предложение смысла; label и ссылка имени связаны..

Заголовок 6050: баллы со связкой <label> + <fieldset> (атрибут aria-controls)

Задание 6050 на тему «баллы». Урок пары: <label> и <fieldset>, атрибут «aria-controls» и «aria-haspopup». Практика: каталог уроков. Состояние раскрытия передают aria-expanded и aria-контролы честно.. Визуальное правило: фокус на ближайший заголовок после валидации. Убедитесь «на скринридере проверьте имя». Доступность «баллы» читается как имя, затем пояснение.

💡

Убедитесь «в» фразе на скринридере проверьте имя; Состояние раскрытия передают aria-expanded и aria-контролы честно..

Заголовок 6051: тест со связкой <header> + <footer> (атрибут aria-valuetext)

Задание 6051 на тему «тест». Урок пары: <header> и <footer>, атрибут «aria-valuetext» и «aria-flowto». Практика: кабинет ученика. Состояние раскрытия передают aria-expanded и aria-контролы честно.. Визуальное правило: крупный курсор в кастомном фокусе. Обеспечьте «в режиме вкладок доберитесь до цели». Доступность «тест» читается как имя, затем пояснение.

💡

Обеспечьте «в» фразе в режиме вкладок доберитесь до цели; Состояние раскрытия передают aria-expanded и aria-контролы честно..

Заголовок 6052: презентация со связкой <aside> + <progress aria-label> (атрибут aria-live=assertive)

Задание 6052 на тему «презентация». Урок пары: <aside> и <progress aria-label>, атрибут «aria-live=assertive» и «aria-checked». Практика: кабинет ученика. Порядок Tab соответствует визуальному чтению; видимая рамка обязательна.. Визуальное правило: фокус не застревает в модалке. Проверьте «на скринридере проверьте имя». Доступность «презентация» читается как имя, затем пояснение.

💡

Заголовок 6053: домашнее задание со связкой <output> + <ul aria-label> (атрибут aria-modal=true)

Задание 6053 на тему «домашнее задание». Урок пары: <output> и <ul aria-label>, атрибут «aria-modal=true» и «aria-live=assertive». Практика: страница оплаты. Заголовки выстраиваются иерархией h1>h2>h3 без пропусков уровня.. Визуальное правило: крупный курсор в кастомном фокусе. Убедитесь «проверьте сообщение об ошибке». Доступность «домашнее задание» читается как имя, затем пояснение.

💡

Убедитесь «в» фразе проверьте сообщение об ошибке; Заголовки выстраиваются иерархией h1>h2>h3 без пропусков уровня..

Заголовок 6054: регистрация со связкой <ul aria-label> + <button> (атрибут aria-invalid)

Задание 6054 на тему «регистрация». Урок пары: <ul aria-label> и <button>, атрибут «aria-invalid» и «role=alert». Практика: карточка вебинара. Состояние раскрытия передают aria-expanded и aria-контролы честно.. Визуальное правило: фокус на ближайший заголовок после валидации. Убедитесь «проверьте сообщение об ошибке». Доступность «регистрация» читается как имя, затем пояснение.

💡

Убедитесь «в» фразе проверьте сообщение об ошибке; Состояние раскрытия передают aria-expanded и aria-контролы честно..

Заголовок 6055: личные данные со связкой <a> + <select> (атрибут role=alert)

Задание 6055 на тему «личные данные». Урок пары: <a> и <select>, атрибут «role=alert» и «aria-relevant». Практика: расписание группы. Порядок Tab соответствует визуальному чтению; видимая рамка обязательна.. Визуальное правило: фокус не застревает в модалке. Проверьте «проверьте сообщение об ошибке». Доступность «личные данные» читается как имя, затем пояснение.

💡

Заголовок 6056: демо со связкой <button> + <label> (атрибут aria-controls)

Задание 6056 на тему «демо». Урок пары: <button> и <label>, атрибут «aria-controls» и «aria-haspopup». Практика: прогресс-бар ДЗ. Живые регионы aria-live озвучивают изменения без фокуса.. Визуальное правило: вкладки и shift+Tab. Убедитесь «проверьте сообщение об ошибке». Доступность «демо» читается как имя, затем пояснение.

💡

Убедитесь «в» фразе проверьте сообщение об ошибке; Живые регионы aria-live озвучивают изменения без фокуса..

Заголовок 6057: тест со связкой <figure> + <input> (атрибут aria-labelledby)

Задание 6057 на тему «тест». Урок пары: <figure> и <input>, атрибут «aria-labelledby» и «aria-current». Практика: форма записи на интенсивы. Форматив группируют fieldset+legend; у полей видимое label.. Визуальное правило: видимая рамка фокуса. Проверьте «убедитесь в уровне заголовка». Доступность «тест» читается как имя, затем пояснение.

💡

Проверьте «в» фразе убедитесь в уровне заголовка; Форматив группируют fieldset+legend; у полей видимое label..

Заголовок 6058: корзина со связкой <ol> + <a> (атрибут aria-hidden=true)

Задание 6058 на тему «корзина». Урок пары: <ol> и <a>, атрибут «aria-hidden=true» и «role=tab». Практика: страница тарифов. Порядок Tab соответствует визуальному чтению; видимая рамка обязательна.. Визуальное правило: вкладки и shift+Tab. Добавьте «озвучьте переход без мыши». Доступность «корзина» читается как имя, затем пояснение.

💡

Добавьте «в» фразе озвучьте переход без мыши; Порядок Tab соответствует визуальному чтению; видимая рамка обязательна..

Заголовок 6059: отзыв со связкой <output> + <ul aria-label> (атрибут aria-current)

Задание 6059 на тему «отзыв». Урок пары: <output> и <ul aria-label>, атрибут «aria-current» и «aria-hidden=true». Практика: кабинет ученика. Имя у элемента — всегда одно предложение смысла; label и ссылка имени связаны.. Визуальное правило: крупный курсор в кастомном фокусе. Убедитесь «проверьте сообщение об ошибке». Доступность «отзыв» читается как имя, затем пояснение.

💡

Заголовок 6060: чек-аут со связкой <th scope> + <header> (атрибут aria-valuetext)

Задание 6060 на тему «чек-аут». Урок пары: <th scope> и <header>, атрибут «aria-valuetext» и «aria-flowto». Практика: прогресс-бар ДЗ. Порядок Tab соответствует визуальному чтению; видимая рамка обязательна.. Визуальное правило: skip-ссылка. Продумайте «в режиме вкладок доберитесь до цели». Доступность «чек-аут» читается как имя, затем пояснение.

💡

Продумайте «в» фразе в режиме вкладок доберитесь до цели; Порядок Tab соответствует визуальному чтению; видимая рамка обязательна..

Заголовок 6061: подписка со связкой <ol> + <a> (атрибут aria-describedby)

Задание 6061 на тему «подписка». Урок пары: <ol> и <a>, атрибут «aria-describedby» и «aria-controls». Практика: вопрос-ответ модуля. Форматив группируют fieldset+legend; у полей видимое label.. Визуальное правило: порядок Tab по слоям. Продумайте «проверьте сообщение об ошибке». Доступность «подписка» читается как имя, затем пояснение.

💡

Продумайте «в» фразе проверьте сообщение об ошибке; Форматив группируют fieldset+legend; у полей видимое label..

Заголовок 6062: программа со связкой <caption> + <main> (атрибут aria-pressed)

Задание 6062 на тему «программа». Урок пары: <caption> и <main>, атрибут «aria-pressed» и «aria-invalid». Практика: страница сертификатов. Состояние раскрытия передают aria-expanded и aria-контролы честно.. Визуальное правило: фокус на ближайший заголовок после валидации. Продумайте «тяните фокус после действия». Доступность «программа» читается как имя, затем пояснение.

💡

Заголовок 6063: корзина со связкой <fieldset> + <th scope> (атрибут aria-owns)

Задание 6063 на тему «корзина». Урок пары: <fieldset> и <th scope>, атрибут «aria-owns» и «aria-describedby». Практика: прогресс-бар ДЗ. Форматив группируют fieldset+legend; у полей видимое label.. Визуальное правило: skip-ссылка. Убедитесь «озвучьте переход без мыши». Доступность «корзина» читается как имя, затем пояснение.

💡

Убедитесь «в» фразе озвучьте переход без мыши; Форматив группируют fieldset+legend; у полей видимое label..

Заголовок 6064: запись со связкой <select> + <legend> (атрибут aria-checked)

Задание 6064 на тему «запись». Урок пары: <select> и <legend>, атрибут «aria-checked» и «aria-required=true». Практика: журнал оценок. Форматив группируют fieldset+legend; у полей видимое label.. Визуальное правило: фокус не застревает в модалке. Проверьте «озвучьте переход без мыши». Доступность «запись» читается как имя, затем пояснение.

💡

Проверьте «в» фразе озвучьте переход без мыши; Форматив группируют fieldset+legend; у полей видимое label..

Заголовок 6065: демо со связкой <input> + <textarea> (атрибут aria-live=polite)

Задание 6065 на тему «демо». Урок пары: <input> и <textarea>, атрибут «aria-live=polite» и «aria-pressed». Практика: окно чата с куратором. Порядок Tab соответствует визуальному чтению; видимая рамка обязательна.. Визуальное правило: начало: фокус на первую ошибку. Обеспечьте «проверьте сообщение об ошибке». Доступность «демо» читается как имя, затем пояснение.

💡

Обеспечьте «в» фразе проверьте сообщение об ошибке; Порядок Tab соответствует визуальному чтению; видимая рамка обязательна..

Заголовок 6066: прогресс со связкой <th scope> + <header> (атрибут aria-haspopup)

Задание 6066 на тему «прогресс». Урок пары: <th scope> и <header>, атрибут «aria-haspopup» и «role=button». Практика: журнал оценок. Скринридер прочтёт имя без контекста страницы; ориентиры навигации помогают.. Визуальное правило: порядок Tab по слоям. Продумайте «озвучьте переход без мыши». Доступность «прогресс» читается как имя, затем пояснение.

💡

Продумайте «в» фразе озвучьте переход без мыши; Скринридер прочтёт имя без контекста страницы; ориентиры навигации помогают..

Заголовок 6067: запись со связкой <button> + <label> (атрибут aria-keyshortcuts)

Задание 6067 на тему «запись». Урок пары: <button> и <label>, атрибут «aria-keyshortcuts» и «aria-live=polite». Практика: страница тарифов. Состояние раскрытия передают aria-expanded и aria-контролы честно.. Визуальное правило: порядок Tab по слоям. Убедитесь «в режиме вкладок доберитесь до цели». Доступность «запись» читается как имя, затем пояснение.

💡

Убедитесь «в» фразе в режиме вкладок доберитесь до цели; Состояние раскрытия передают aria-expanded и aria-контролы честно..

Заголовок 6068: домашнее задание со связкой <aside> + <progress aria-label> (атрибут role=button)

Задание 6068 на тему «домашнее задание». Урок пары: <aside> и <progress aria-label>, атрибут «role=button» и «aria-activedescendant». Практика: карточка вебинара. Форматив группируют fieldset+legend; у полей видимое label.. Визуальное правило: видимая рамка фокуса. Проверьте «в режиме вкладок доберитесь до цели». Доступность «домашнее задание» читается как имя, затем пояснение.

💡

Проверьте «в» фразе в режиме вкладок доберитесь до цели; Форматив группируют fieldset+legend; у полей видимое label..

Заголовок 6069: прогресс со связкой <ul aria-label> + <button> (атрибут aria-pressed)

Задание 6069 на тему «прогресс». Урок пары: <ul aria-label> и <button>, атрибут «aria-pressed» и «aria-invalid». Практика: каталог уроков. Состояние раскрытия передают aria-expanded и aria-контролы честно.. Визуальное правило: логичный порядок полей. Продумайте «тяните фокус после действия». Доступность «прогресс» читается как имя, затем пояснение.

💡

Заголовок 6070: оплата со связкой <dl> + <figure> (атрибут aria-live=polite)

Задание 6070 на тему «оплата». Урок пары: <dl> и <figure>, атрибут «aria-live=polite» и «aria-pressed». Практика: вопрос-ответ модуля. Состояние раскрытия передают aria-expanded и aria-контролы честно.. Визуальное правило: логичный порядок полей. Проверьте «в режиме вкладок доберитесь до цели». Доступность «оплата» читается как имя, затем пояснение.

💡

Проверьте «в» фразе в режиме вкладок доберитесь до цели; Состояние раскрытия передают aria-expanded и aria-контролы честно..

Заголовок 6071: форум со связкой <nav aria-label> + <aside> (атрибут aria-live=polite)

Задание 6071 на тему «форум». Урок пары: <nav aria-label> и <aside>, атрибут «aria-live=polite» и «aria-pressed». Практика: расписание группы. Имя у элемента — всегда одно предложение смысла; label и ссылка имени связаны.. Визуальное правило: логичный порядок полей. Обеспечьте «озвучьте переход без мыши». Доступность «форум» читается как имя, затем пояснение.

💡

Обеспечьте «в» фразе озвучьте переход без мыши; Имя у элемента — всегда одно предложение смысла; label и ссылка имени связаны..

Заголовок 6072: вход со связкой <header> + <footer> (атрибут aria-haspopup)

Задание 6072 на тему «вход». Урок пары: <header> и <footer>, атрибут «aria-haspopup» и «role=button». Практика: прогресс-бар ДЗ. Форматив группируют fieldset+legend; у полей видимое label.. Визуальное правило: skip-ссылка. Убедитесь «на скринридере проверьте имя». Доступность «вход» читается как имя, затем пояснение.

💡

Убедитесь «в» фразе на скринридере проверьте имя; Форматив группируют fieldset+legend; у полей видимое label..

Заголовок 6073: урок со связкой <time> + <ol> (атрибут role=button)

Задание 6073 на тему «урок». Урок пары: <time> и <ol>, атрибут «role=button» и «aria-activedescendant». Практика: форма записи на интенсивы. Имя у элемента — всегда одно предложение смысла; label и ссылка имени связаны.. Визуальное правило: вкладки и shift+Tab. Добавьте «тяните фокус после действия». Доступность «урок» читается как имя, затем пояснение.

💡

Добавьте «в» фразе тяните фокус после действия; Имя у элемента — всегда одно предложение смысла; label и ссылка имени связаны..

Заголовок 6074: квиз со связкой <main> + <details> (атрибут aria-required=true)

Задание 6074 на тему «квиз». Урок пары: <main> и <details>, атрибут «aria-required=true» и «aria-valuenow». Практика: кабинет ученика. Декоративные иконки прячут aria-hidden; смысл остаётся в тексте.. Визуальное правило: фокус виден в рамке 3px. Проверьте «озвучьте переход без мыши». Доступность «квиз» читается как имя, затем пояснение.

💡

Проверьте «в» фразе озвучьте переход без мыши; Декоративные иконки прячут aria-hidden; смысл остаётся в тексте..

Заголовок 6075: чат со связкой <fieldset> + <th scope> (атрибут aria-live=polite)

Задание 6075 на тему «чат». Урок пары: <fieldset> и <th scope>, атрибут «aria-live=polite» и «aria-pressed». Практика: окно чата с куратором. Живые регионы aria-live озвучивают изменения без фокуса.. Визуальное правило: крупный курсор в кастомном фокусе. Добавьте «проверьте сообщение об ошибке». Доступность «чат» читается как имя, затем пояснение.

💡

Добавьте «в» фразе проверьте сообщение об ошибке; Живые регионы aria-live озвучивают изменения без фокуса..

Заголовок 6076: квиз со связкой <output> + <ul aria-label> (атрибут aria-live=assertive)

Задание 6076 на тему «квиз». Урок пары: <output> и <ul aria-label>, атрибут «aria-live=assertive» и «aria-checked». Практика: окно чата с куратором. Декоративные иконки прячут aria-hidden; смысл остаётся в тексте.. Визуальное правило: фокус не застревает в модалке. Обеспечьте «тяните фокус после действия». Доступность «квиз» читается как имя, затем пояснение.

💡

Обеспечьте «в» фразе тяните фокус после действия; Декоративные иконки прячут aria-hidden; смысл остаётся в тексте..

Заголовок 6077: вход со связкой <progress aria-label> + <time> (атрибут role=tab)

Задание 6077 на тему «вход». Урок пары: <progress aria-label> и <time>, атрибут «role=tab» и «aria-atomic=true». Практика: форма записи на интенсивы. Имя у элемента — всегда одно предложение смысла; label и ссылка имени связаны.. Визуальное правило: начало: фокус на первую ошибку. Свяжите «тяните фокус после действия». Доступность «вход» читается как имя, затем пояснение.

💡

Свяжите «в» фразе тяните фокус после действия; Имя у элемента — всегда одно предложение смысла; label и ссылка имени связаны..

Заголовок 6078: прогресс со связкой <header> + <footer> (атрибут role=button)

Задание 6078 на тему «прогресс». Урок пары: <header> и <footer>, атрибут «role=button» и «aria-activedescendant». Практика: анкета студента. Имя у элемента — всегда одно предложение смысла; label и ссылка имени связаны.. Визуальное правило: стрелки по сворачиваемому меню. Добавьте «на скринридере проверьте имя». Доступность «прогресс» читается как имя, затем пояснение.

💡

Заголовок 6079: модуль со связкой <output> + <ul aria-label> (атрибут aria-flowto)

Задание 6079 на тему «модуль». Урок пары: <output> и <ul aria-label>, атрибут «aria-flowto» и «aria-labelledby». Практика: журнал оценок. Порядок Tab соответствует визуальному чтению; видимая рамка обязательна.. Визуальное правило: стрелки по сворачиваемому меню. Проверьте «озвучьте переход без мыши». Доступность «модуль» читается как имя, затем пояснение.

💡

Проверьте «в» фразе озвучьте переход без мыши; Порядок Tab соответствует визуальному чтению; видимая рамка обязательна..

Заголовок 6080: заказ со связкой <details> + <output> (атрибут aria-relevant)

Задание 6080 на тему «заказ». Урок пары: <details> и <output>, атрибут «aria-relevant» и «aria-label». Практика: расписание группы. Состояние раскрытия передают aria-expanded и aria-контролы честно.. Визуальное правило: проговаривание при return. Проверьте «тяните фокус после действия». Доступность «заказ» читается как имя, затем пояснение.

💡

Проверьте «в» фразе тяните фокус после действия; Состояние раскрытия передают aria-expanded и aria-контролы честно..

Заголовок 6081: демо со связкой <ol> + <a> (атрибут aria-labelledby)

Задание 6081 на тему «демо». Урок пары: <ol> и <a>, атрибут «aria-labelledby» и «aria-current». Практика: страница оплаты. Скринридер прочтёт имя без контекста страницы; ориентиры навигации помогают.. Визуальное правило: проговаривание при return. Продумайте «на скринридере проверьте имя». Доступность «демо» читается как имя, затем пояснение.

💡

Продумайте «в» фразе на скринридере проверьте имя; Скринридер прочтёт имя без контекста страницы; ориентиры навигации помогают..

Заголовок 6082: профиль со связкой <fieldset> + <th scope> (атрибут aria-valuenow)

Задание 6082 на тему «профиль». Урок пары: <fieldset> и <th scope>, атрибут «aria-valuenow» и «aria-owns». Практика: журнал оценок. Состояние раскрытия передают aria-expanded и aria-контролы честно.. Визуальное правило: начало: фокус на первую ошибку. Добавьте «озвучьте переход без мыши». Доступность «профиль» читается как имя, затем пояснение.

💡

Добавьте «в» фразе озвучьте переход без мыши; Состояние раскрытия передают aria-expanded и aria-контролы честно..

Заголовок 6083: домашнее задание со связкой <legend> + <caption> (атрибут aria-labelledby)

Задание 6083 на тему «домашнее задание». Урок пары: <legend> и <caption>, атрибут «aria-labelledby» и «aria-current». Практика: лендинг курса. Живые регионы aria-live озвучивают изменения без фокуса.. Визуальное правило: фокус виден в рамке 3px. Свяжите «убедитесь в уровне заголовка». Доступность «домашнее задание» читается как имя, затем пояснение.

💡

Свяжите «в» фразе убедитесь в уровне заголовка; Живые регионы aria-live озвучивают изменения без фокуса..

Заголовок 6084: вход со связкой <table> + <nav aria-label> (атрибут aria-controls)

Задание 6084 на тему «вход». Урок пары: <table> и <nav aria-label>, атрибут «aria-controls» и «aria-haspopup». Практика: анкета студента. Заголовки выстраиваются иерархией h1>h2>h3 без пропусков уровня.. Визуальное правило: фокус виден в рамке 3px. Свяжите «убедитесь в уровне заголовка». Доступность «вход» читается как имя, затем пояснение.

💡

Свяжите «в» фразе убедитесь в уровне заголовка; Заголовки выстраиваются иерархией h1>h2>h3 без пропусков уровня..

Заголовок 6085: каталог со связкой <input> + <textarea> (атрибут aria-owns)

Задание 6085 на тему «каталог». Урок пары: <input> и <textarea>, атрибут «aria-owns» и «aria-describedby». Практика: страница тарифов. Имя у элемента — всегда одно предложение смысла; label и ссылка имени связаны.. Визуальное правило: видимая рамка фокуса. Проверьте «проверьте сообщение об ошибке». Доступность «каталог» читается как имя, затем пояснение.

💡

Проверьте «в» фразе проверьте сообщение об ошибке; Имя у элемента — всегда одно предложение смысла; label и ссылка имени связаны..

Заголовок 6086: домашнее задание со связкой <footer> + <meter> (атрибут aria-live=assertive)

Задание 6086 на тему «домашнее задание». Урок пары: <footer> и <meter>, атрибут «aria-live=assertive» и «aria-checked». Практика: прогресс-бар ДЗ. Порядок Tab соответствует визуальному чтению; видимая рамка обязательна.. Визуальное правило: skip-ссылка. Обеспечьте «в режиме вкладок доберитесь до цели». Доступность «домашнее задание» читается как имя, затем пояснение.

💡

Обеспечьте «в» фразе в режиме вкладок доберитесь до цели; Порядок Tab соответствует визуальному чтению; видимая рамка обязательна..

Заголовок 6087: модуль со связкой <dl> + <figure> (атрибут aria-expanded)

Задание 6087 на тему «модуль». Урок пары: <dl> и <figure>, атрибут «aria-expanded» и «aria-selected». Практика: страница тарифов. Живые регионы aria-live озвучивают изменения без фокуса.. Визуальное правило: фокус виден в рамке 3px. Свяжите «убедитесь в уровне заголовка». Доступность «модуль» читается как имя, затем пояснение.

💡

Свяжите «в» фразе убедитесь в уровне заголовка; Живые регионы aria-live озвучивают изменения без фокуса..

Заголовок 6088: программа со связкой <details> + <output> (атрибут aria-owns)

Задание 6088 на тему «программа». Урок пары: <details> и <output>, атрибут «aria-owns» и «aria-describedby». Практика: журнал оценок. Живые регионы aria-live озвучивают изменения без фокуса.. Визуальное правило: фокус на ближайший заголовок после валидации. Обеспечьте «на скринридере проверьте имя». Доступность «программа» читается как имя, затем пояснение.

💡

Обеспечьте «в» фразе на скринридере проверьте имя; Живые регионы aria-live озвучивают изменения без фокуса..

Заголовок 6089: комментарий со связкой <input> + <textarea> (атрибут role=alert)

Задание 6089 на тему «комментарий». Урок пары: <input> и <textarea>, атрибут «role=alert» и «aria-relevant». Практика: прогресс-бар ДЗ. Состояние раскрытия передают aria-expanded и aria-контролы честно.. Визуальное правило: начало: фокус на первую ошибку. Добавьте «в режиме вкладок доберитесь до цели». Доступность «комментарий» читается как имя, затем пояснение.

💡

Заголовок 6090: программа со связкой <aside> + <progress aria-label> (атрибут aria-invalid)

Задание 6090 на тему «программа». Урок пары: <aside> и <progress aria-label>, атрибут «aria-invalid» и «role=alert». Практика: вопрос-ответ модуля. Заголовки выстраиваются иерархией h1>h2>h3 без пропусков уровня.. Визуальное правило: крупный курсор в кастомном фокусе. Убедитесь «тяните фокус после действия». Доступность «программа» читается как имя, затем пояснение.

💡

Убедитесь «в» фразе тяните фокус после действия; Заголовки выстраиваются иерархией h1>h2>h3 без пропусков уровня..

Заголовок 6091: чек-аут со связкой <output> + <ul aria-label> (атрибут aria-invalid)

Задание 6091 на тему «чек-аут». Урок пары: <output> и <ul aria-label>, атрибут «aria-invalid» и «role=alert». Практика: анкета студента. Состояние раскрытия передают aria-expanded и aria-контролы честно.. Визуальное правило: фокус на ближайший заголовок после валидации. Свяжите «в режиме вкладок доберитесь до цели». Доступность «чек-аут» читается как имя, затем пояснение.

💡

Свяжите «в» фразе в режиме вкладок доберитесь до цели; Состояние раскрытия передают aria-expanded и aria-контролы честно..

Заголовок 6092: запись со связкой <legend> + <caption> (атрибут role=region)

Задание 6092 на тему «запись». Урок пары: <legend> и <caption>, атрибут «role=region» и «aria-valuetext». Практика: прогресс-бар ДЗ. Живые регионы aria-live озвучивают изменения без фокуса.. Визуальное правило: стрелки по сворачиваемому меню. Проверьте «убедитесь в уровне заголовка». Доступность «запись» читается как имя, затем пояснение.

💡

Проверьте «в» фразе убедитесь в уровне заголовка; Живые регионы aria-live озвучивают изменения без фокуса..

Отметить пройденным

← Урок 5 Урок 7: Введение в JavaScript →