Флексбокс, часть 2 / Карточка курса, часть 3 [26/28]
×

Карточка курса, часть 3 [26/28]

Карточки выстроились в один ряд и теперь их высота одинакова. Это произошло потому, что их родительский элемент — флекс-контейнер с поперечным выравниванием stretch.

Сейчас мы сделаем так, чтобы кнопки «Пройти курс» выравнивались по нижнему краю карточки. Для этого:

  • Зададим блоку .card-content положительный коэффициент растяжения, чтобы он занял всё свободное место в карточке.
  • Превратим блок .card-content в флекс-контейнер с главной осью, направленной сверху вниз.
  • Зададим кнопке автоматический отступ сверху, чтобы она прижалась к концу главной оси блока .card-content.

Вспомните, как на первом шаге мы сделали карточки флекс-контейнерами. Без этого нельзя было бы растянуть вложенные блоки «в высоту» с помощью flex-grow.


Выполнить задание
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Карточка курса, часть 3</title> <base href="/assets/course113/"> <link href="style.css" rel="stylesheet"> <link href="course.css" rel="stylesheet"> </head> <body class="subtle"> <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> </section> </body> </html>
.cards { display: flex; } .card { display: flex; flex-direction: column; max-width: 70%; margin: 10px; padding: 20px; } .card-meta { display: flex; } .card-category { flex-grow: 1; } .card-content { } .card-img { width: 100%; } .card-button { } /* Декоративные обводки */ .card > * { outline: 2px solid rgba(0, 128, 0, 0.3); outline-offset: 1px; } .card-content > * { outline: 2px solid rgba(0, 0, 0, 0.5); outline-offset: -3px; }
HTML Academy
  1. Для .card-content задайте коэффициент растягивания 1,
  2. затем раскладку флексбокса
  3. и направление главной оси сверху вниз.
  4. А для кнопки .card-button задайте внешний отступ сверху auto.
Теория Проверить Следующее задание

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

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

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

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