WebDEV(@webb_dev). 💡 Современные и эффективные CSS-раскладки▍Часть 13Перед прочтением рекомендуем ознакомиться с первой

💡 Современные и эффективные CSS-раскладки

▍Часть 13

Перед прочтением рекомендуем ознакомиться с первой, второй, третьей, четвёртой, пятой, шестой, седьмой, восьмой, девятой, десятой и одиннадцатой частями.

Из прошлой части: В нашем случае внутри карточек выбран режим раскладки Flexbox, с вертикальным расположением элементов, заданным с использованием flex-direction: column ...

Это размещает заголовок, описание и блок изображения в одну колонку внутри родительской карточки. Затем применяется свойство justify-content: space-between, прикрепляющее первый (заголовок) и последний (блок изображения) элементы к краям, а блок описания между ними.

.parent {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

Видео-демонстрацию смотрите ниже под этим постом.

В следующей части рассмотрим стилизацию с помощью Clamp.

#советы #coding #css