Флексбокс, часть 2 / Много карточек [27/28]
×

Много карточек [27/28]

На последнем шаге мы поработаем с раскладкой карточек.

Сделаем так, чтобы карточки переносились на новую строку, если им не хватает места в контейнере. А если свободное место на строке осталось, то карточки будут его занимать.

А чтобы было видно, как будут вести себя несколько карточек, мы добавили специальную обёртку с зумом.


Выполнить задание
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Много карточек</title> <base href="/assets/course113/"> <link href="style.css" rel="stylesheet"> <link href="course.css" rel="stylesheet"> </head> <body class="subtle"> <div class="zoomer"> <section class="cards"> <article class="card"> <h1 class="card-heading">2D-трансформации</h1> <div class="card-meta"> <div class="card-category"> <span class="card-icon icon-tag">Категория: </span> <span>HTML, CSS</span> </div> <div class="card-duration"> <span class="card-icon icon-time">Время прохождения: </span> <span>2 часа</span> </div> </div> <div class="card-content"> <figure class="card-figure"> <img src="img/course-2.png" alt="Кекс" class="card-img"> <figcaption> <p>Будем крутить, наклонять, перемещать, уменьшать и увеличивать объекты, а также взрывать их фаерболами.</p> </figcaption> </figure> <button class="card-button">Пройти курс</button> </div> </article> <article class="card"> <h1 class="card-heading">Анимация</h1> <div class="card-meta"> <div class="card-category"> <span class="card-icon icon-tag">Категория: </span> <span>HTML, CSS</span> </div> <div class="card-duration"> <span class="card-icon icon-time">Время прохождения: </span> <span>2 часа</span> </div> </div> <div class="card-content"> <figure class="card-figure"> <img src="img/course-4.png" alt="Кекс" class="card-img"> <figcaption> <p>В курсе рассмотрены основы анимации на CSS.</p> </figcaption> </figure> <button class="card-button">Пройти курс</button> </div> </article> <article class="card"> <h1 class="card-heading">Плавные переходы</h1> <div class="card-meta"> <div class="card-category"> <span class="card-icon icon-tag">Категория: </span> <span>HTML, CSS</span> </div> <div class="card-duration"> <span class="card-icon icon-time">Время прохождения: </span> <span>2 часа</span> </div> </div> <div class="card-content"> <figure class="card-figure"> <img src="img/course-1.png" alt="Кекс" class="card-img"> <figcaption> <p>В этом курсе вы научитесь плавно менять CSS-свойства, будете создавать красивые и функциональные элементы форм в стиле Material Design.</p> </figcaption> </figure> <button class="card-button">Пройти курс</button> </div> </article> <article class="card"> <h1 class="card-heading">Мастерская</h1> <div class="card-meta"> <div class="card-category"> <span class="card-icon icon-tag">Категория: </span> <span>HTML, CSS</span> </div> <div class="card-duration"> <span class="card-icon icon-time">Время прохождения: </span> <span>2 часа</span> </div> </div> <div class="card-content"> <figure class="card-figure"> <img src="img/course-5.png" alt="Кекс" class="card-img"> <figcaption> <p>Это прикладной курс, в котором вы будете создавать сложные элементы интерфейса и крутые эффекты.</p> </figcaption> </figure> <button class="card-button">Пройти курс</button> </div> </article> <article class="card"> <h1 class="card-heading">CSS-фильтры</h1> <div class="card-meta"> <div class="card-category"> <span class="card-icon icon-tag">Категория: </span> <span>HTML, CSS</span> </div> <div class="card-duration"> <span class="card-icon icon-time">Время прохождения: </span> <span>2 часа</span> </div> </div> <div class="card-content"> <figure class="card-figure"> <img src="img/course-3.png" alt="Кекс" class="card-img"> <figcaption> <p>В курсе вы разберётесь, как применять фильтры к разным элементам, а также комбинировать и анимировать их.</p> </figcaption> </figure> <button class="card-button">Пройти курс</button> </div> </article> </section> </div> </body> </html>
.cards { display: flex; width: 1000px; margin: 0 auto; } .card { display: flex; max-width: 70%; margin: 10px; padding: 20px; flex-direction: column; } .card-meta { display: flex; } .card-category { flex-grow: 1; } .card-content { display: flex; flex-direction: column; flex-grow: 1; } .card-img { width: 100%; } .card-button { margin-top: auto; } /* Стили для зума */ .zoomer { position: absolute; top: 0; left: 0; box-sizing: border-box; width: 200%; padding: 20px; transform: scale(0.5); transform-origin: 0 0; }
HTML Academy
  1. Разрешите перенос флекс-элементов в блоке .cards.
  2. Затем у карточки .card удалите максимальную ширину, задайте ей базовый размер 300px
  3. и коэффициент растягивания 1.
  4. После этого уменьшите ширину .cards до 700px. Обратите внимание, как перестроятся карточки.
Теория Проверить Следующее задание
Идёт запись на курс Продвинутый JavaScript #3, который стартует 26 сентября.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.