- Теория
- Теория
Карточка курса, часть 3
Карточки выстроились в один ряд и теперь их высота одинакова. Это произошло потому, что их родительский элемент — флекс-контейнер с поперечным выравниванием stretch
.
Сейчас мы сделаем так, чтобы кнопки «Пройти курс» выравнивались по нижнему краю карточки. Для этого:
- Зададим блоку
.card-content
положительный коэффициент растяжения, чтобы он занял всё свободное место в карточке. - Превратим блок
.card-content
в флекс-контейнер с главной осью, направленной сверху вниз. - Зададим кнопке автоматический отступ сверху, чтобы она прижалась к концу главной оси блока
.card-content
.
Вспомните, как на первом шаге мы сделали карточки флекс-контейнерами. Без этого нельзя было бы растянуть вложенные блоки «в высоту» с помощью flex-grow
.
Минимальный вид табов
- index.html
HTML
HTML
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.
100%