HTML Academy
Предыдущее задание
Флексбокс. Погружение6/28
Вернуться в список заданий
  1. 1. Флекс-элементы и блочная модель
  2. 2. Особенности свойства margin
  3. 3. Выравнивание и внешние отступы
  4. 4. Направление главной оси и внешние отступы
  5. 5. Базовый размер флекс-элемента, flex-basis
  6. 6. Испытание: кубизм
  7. 7. Коэффициент растягивания элементов, flex-grow
  8. 8. Пропорциональное растягивание элементов
  9. 9. Расчёт итогового размера с flex-grow
  10. 10. Коэффициент сжатия элементов, flex-shrink
  11. 11. Пропорциональное сжатие элементов
  12. 12. Расчёт итогового размера с flex-shrink
  13. 13. flex-shrink и min-width
  14. 14. Испытание: мастер коэффициентов
  15. 15. Сокращённое свойство flex
  16. 16. Многострочный флекс-контейнер и flex-shrink
  17. 17. Многострочный флекс-контейнер и flex-grow
  18. 18. flex-basis: 100% и flex-wrap
  19. 19. Заголовок с описанием на флексбоксах
  20. 20. Заголовок с описанием, часть 2
  21. 21. «Гибкое» меню с переполнением
  22. 22. «Гибкое» меню с переполнением, часть 2
  23. 23. Поля ввода с динамической шириной
  24. 24. Карточка курса
  25. 25. Карточка курса, часть 2
  26. 26. Карточка курса, часть 3
  27. 27. Много карточек
  28. 28. Испытание: гибкий поток
Следующее задание
Оформить подписку
  • Регистрация
  • Войти

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

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

или

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

Войти и продолжить
  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Испытание: кубизм</title> <link href="course.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> <style> .palette { align-items: stretch !important; } .palette [class^="color"] { align-self: stretch !important; } </style> </head> <body class="exam"> <div class="palette"> <div class="color-olive"></div> <div class="color-yellow"></div> <div class="color-fuchsia"></div> <div class="color-aqua"></div> </div> </body> </html>
CSS
.palette div { min-width: 35px; min-height: 35px; }

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

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

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

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

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

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

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

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

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

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

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

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

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

    Курсы

    • Тренажёры
    • Подписка
    • Для команд и компаний
    • Учебник по PHP

    Профессии

    • Фронтенд-разработчик
    • React-разработчик
    Интенсивы
    • HTML и CSS.
      Профессиональная вёрстка сайтов
    • HTML и CSS.
      Адаптивная вёрстка и автоматизация
    • JavaScript.
      Профессиональная разработка веб-интерфейсов
    • JavaScript.
      Архитектура клиентских приложений
    • React.
      Разработка сложных клиентских приложений
    • PHP.
      Профессиональная веб-разработка
    • PHP и Yii.
      Архитектура сложных веб-сервисов
    • Node.js.
      Разработка серверов приложений и API
    • Анимация для фронтендеров
    • Вёрстка email-рассылок
    Блог
    • Для новичков
    • Прокачка
    • Карьера
    • Лекции и доклады

    Информация

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

    Услуги

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

    Остальное

    • Написать нам
    • Мероприятия
    • Форум

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