HTML Academy
Предыдущее задание
Флексбокс. Знакомство12/32
Вернуться в список заданий
  1. 1. Свойство display: flex, flex-элемент
  2. 2. Свойство flex-direction, главная ось
  3. 3. Поперечная ось flexbox
  4. 4. Свойство justify-content, выравнивание вдоль главной оси
  5. 5. Свойство justify-content: flex-start | flex-end
  6. 6. Свойство justify-content: space-between | space-around | space-evenly
  7. 7. Свойство align-items, выравнивание вдоль поперечной оси
  8. 8. Свойство align-items: flex-start | flex-end
  9. 9. Свойство align-items: baseline
  10. 10. Свойство align-self, эгоистичное выравнивание
  11. 11. Свойство align-self: baseline
  12. 12. Испытание: простая палитра
  13. 13. Свойство flex-wrap, перенос flex-элементов
  14. 14. Свойство flex-wrap: wrap-reverse, обратный перенос
  15. 15. Свойство align-content, выравнивание строк flex-контейнера
  16. 16. Свойство align-content: stretch и align-items
  17. 17. Свойство align-content: не-stretch и align-items
  18. 18. Свойство align-content, остальные значения
  19. 19. Свойство order, порядковый номер flex-элемента
  20. 20. Испытание: палитра посложнее
  21. 21. Идеальное центрирование, margin: auto у flex-контейнера
  22. 22. Идеальное центрирование, flex-выравнивания
  23. 23. Адаптивное горизонтальное меню, часть 1
  24. 24. Адаптивное горизонтальное меню, часть 2
  25. 25. Адаптивное горизонтальное меню, часть 3
  26. 26. Вертикальный ряд иконок
  27. 27. Вертикальный ряд иконок, часть 2
  28. 28. Вертикальный ряд иконок, часть 3
  29. 29. Сортировка элементов на CSS
  30. 30. Выравнивание блоков по высоте с помощью flexbox
  31. 31. Конспект «Флексбокс. Знакомство»
  32. 32. Испытание: сложные палитры
Следующее задание
Оформить подписку
  • Регистрация
  • Войти

Зарегистрируйтесь, чтобы проходить испытания

Регистрация займёт всего минуту и позволит сохранять прогресс обучения. Вы можете зарегистрироваться с помощью своей эл. почты и пароля, либо с помощью соцсетей.

  • ФБ
или

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

Войти и продолжить
  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Испытание: простая палитра</title> <link href="setting.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> </head> <body class="exam"> <div class="palette"> <div class="color-3"></div> <div class="color-4"></div> <div class="color-6"></div> <div class="color-2"></div> </div> </body> </html>
CSS

Что в задании вам не понравилось?

Спасибо! Мы скоро всё исправим)

Код изменился, нажмите «Обновить» или включите автозапуск.

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
  • Образец
  • Результат
  • Наложение
  • Различия
  • ?

Нажмите кнопку «Сравнить», чтобы отправить ваше решение на проверку.

Не удалось загрузить образец. Попробуйте позже.

Образец — интерфейс, который вам нужно получить.

Результат — то, как видит ваш код наш сервер. Может отличаться от того, что в мини-браузере. Сравнение происходит между этим результатом и образцом.

Наложение — полупрозрачный результат отображается над образцом.

Различия — карта различий между образцом и результатом.

0
    Выполнено 0%.
    Код был изменён
    Логотип HTML Academy
    • Наша группа в VK
    • Наш канал на YouTube
    • Наша страница в Twitter
    • Наш канал в Telegram
    Инновационный центр Сколково

    Практикум

    • Курсы для новичков
    • Подписка

    Профессии

    • Фронтенд-разработчик
    • JavaScript-разработчик
    • Фулстек-разработчик
    Курсы
    • HTML и CSS.
      Профессиональная вёрстка сайтов
    • HTML и CSS.
      Адаптивная вёрстка и автоматизация
    • JavaScript.
      Профессиональная разработка веб-интерфейсов
    • JavaScript.
      Архитектура клиентских приложений
    • React.
      Разработка сложных клиентских приложений
    • Node.js.
      Профессиональная разработка REST API
    • Node.js и Nest.js.
      Микросервисная архитектура
    • TypeScript. Теория типов
    • Алгоритмы и структуры данных
    • Паттерны проектирования
    • Webpack
    • Vite
    • Vue.js 3. Разработка клиентских приложений
    • Git и GitHub
    • Анимация для фронтендеров
    Журнал
    • Справочник по HTML
    • Учебник по Git
    • Учебник по PHP

    Информация

    • Об Академии
    • О центре карьеры

    Услуги

    • Работа наставником
    • Для вузов и колледжей
    • Для учителей

    Остальное

    • Написать нам
    • Мероприятия
    • Форум
    • Акции
    • Отзывы о курсах

    СоглашениеКонфиденциальностьСведения об образовательной организацииЛицензия № Л035-01271-78/00176657© ООО «Интерактивные обучающие технологии», 2013−2025