• Теория
  • Теория

Карточка курса, часть 3

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

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

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

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

Минимальный вид табов
  • index.html
HTML
HTML

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

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

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Флексбокс. Погружение» тренажёра «Погружение в техники раскладок» можно после регистрации и оформления подписки.