.actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }Действия остаются сгруппированными, могут переноситься и не выходят за контейнер.
УРОК 60 ИЗ 100
Создайте гибкую панель действий
Объедините Flexbox, перенос, интервалы и выравнивание в адаптивном компоненте.
ШАГ 1 · ИЗУЧИТЕ
Как это работает
Надёжная панель действий сохраняет порядок HTML, разрешает новые строки на узких экранах и распределяет равномерные интервалы. justify-content: flex-end группирует действия у конца главной оси без абсолютного позиционирования.
.actions { display: block; flex-wrap: nowrap; gap: 0; justify-content: flex-start; }Без flex-контейнера свойства Flexbox не создают нужный адаптивный компонент.
ШАГ 2 · ПРИМЕНИТЕ
Ваше задание
Заполните четыре объявления для flex-панели с переносом, gap 12px и выравниванием по концу.
index.htmlCSS
Безопасный результатизолировано
Черновик хранится только в этом браузере.HTML и CSS разрешены · скрипты и сеть заблокированы
ШАГ 4 · ПРОВЕРЬТЕ
Что должно пройти
0%не проверено
- ○Панель является flex-контейнером.
- ○Действия могут перейти на новую строку.
- ○Действия разделены на 12px.
- ○Группа выровнена по концу главной оси.
- ○Целевой элемент присутствует на странице.
Объясните логику решения
display включает Flexbox, wrap разрешает новые строки, gap разделяет действия, а justify-content управляет группой по главной оси.