Условие
В style.css настройте контейнер .row: три синих блока должны стоять в один горизонтальный ряд, по центру (и по горизонтали, и по вертикали) и с отступом 16px между ними. У вас должно получиться так же, как во вкладке «Результат» - смотрите там конкретный итог задания.
Что нужно сделать
- Сделайте так, чтобы три блока выстроились в один ряд.
- Поставьте блоки по центру контейнера - и по горизонтали, и по вертикали.
- Сделайте отступ между блоками 16px.
Подсказка для новичка
Сначала включите раскладку в ряд у родителя, затем выровняйте детей по центру и задайте расстояние между ними. Имена свойств - в «Дополнительной информации».
Стартовый код
Допишите решение в редакторе слева, сверьте с вкладкой «Результат» и нажмите Проверить. Кнопка «Помощник» подставит решение по шагам.
Вот так должно получиться
Три блока в ряд · по центру · отступ 16px
Как пользоваться IDE
- Предпросмотр — как выглядит ваша страница.
- Результат — какой итог должен получиться.
- Описание задачи — полное условие и справка.
- Задание — краткие шаги 1–2–3 снизу.
- Помощник — подсказки по шагам.
- Черновик — ссылка на ваш код.
- Сброс кода — стартовый шаблон.
Свойства этой задачи
<!DOCTYPE html>- документ HTML5.<html lang="ru">- корень страницы;lang="ru"- язык русский.<head>- служебная часть: кодировка,<title>, подключение CSS.<meta charset="UTF-8" />- кодировка текста.<link rel="stylesheet" href="style.css" />- подключениеstyle.css.<body>- видимое содержимое; внутри - ряд.rowи три.item..row- серый контейнер (уже естьwidth,height,background,border; сюда же - Flexbox)..item- синий квадрат с цифрой (уже есть размер, цвет, выравнивание текста).display: flex- включить Flexbox у родителя.justify-content- выравнивание по главной оси (горизонталь при ряду).align-items- выравнивание по поперечной оси (вертикаль при ряду).gap- отступ между flex-элементами.
Слева два файла: style.css (здесь решаете задание) и index.html (готовая разметка, менять не нужно). Ниже - разбор подробнее: всё, что есть на странице.
Файл style.css - что уже написано
В стартовом
style.css
два блока-правила:
.row { ... }
и
.item { ... }.
Точка перед именем - селектор класса. Вам нужно дописать Flexbox у
.row.
Правило .row
-
width: 400px- ширина серого блока 400 пикселей. -
height: 120px- высота 120 пикселей. -
background: #eee- светло-серый фон (HEX). -
border: 2px solid #333- рамка: толщина2px, сплошная линияsolid, цвет#333. -
Сюда же дописывают решение:
display: flex,justify-content: center,align-items: centerиgap: 16px.
Правило .item
-
width: 60px/height: 60px- квадрат 60×60 пикселей. -
background: #2563eb- синяя заливка (HEX). -
color: #fff- белый цвет текста (цифры 1, 2, 3). -
text-align: center- текст по центру по горизонтали. -
line-height: 60px- высота строки равна высоте блока, поэтому цифра визуально по центру по вертикали.
Что такое Flexbox
Flexbox - способ раскладки: родитель с
display: flex
становится flex-контейнером, а прямые дети (.item) -
flex-элементами. По умолчанию они выстраиваются в ряд
(слева направо). Свойства
justify-content
и
align-items
задают, где лежат дети внутри контейнера.
-
display: flex- включить flex-раскладку у.row. Без этогоjustify-content/align-items/gapне дадут нужного эффекта «в ряд по центру». -
justify-content: center- сдвинуть элементы к центру по горизонтали (главная ось приflex-direction: rowпо умолчанию). -
align-items: center- выровнять элементы по центру по вертикали (поперечная ось). -
gap: 16px- одинаковый зазор 16 пикселей между соседними .item (не путать сmarginу каждого ребёнка).
Коротко: у
.row
-
display: flex,
центр по обеим осям и
gap: 16px.
HTML не трогайте. Сверьте вид с вкладкой
«Результат».