Итоги

В этом уроке вы сверстали верхнюю часть главной страницы приюта и узнали, что:

• У каждого значения display есть свой класс: block, inline-block, inline, flex, grid. hidden — это display: none: элемент не показывается и не занимает места.
• flex делает flex-контейнер. flex-row (по умолчанию) и flex-col задают направление его главной оси.
• gap-* задаёт промежутки между flex-элементами и ячейками сетки числами шкалы отступов; gap-x-* и gap-y-* задают их по отдельности.
• justify-* распределяет элементы вдоль главной оси (justify-content): justify-start, justify-center, justify-end, justify-between, justify-around, justify-evenly.
• items-* располагает их по поперечной оси (align-items): items-stretch (по умолчанию), items-start, items-center, items-end, items-baseline.
• flex-wrap переносит элементы, которым не хватает места, на следующую строку. grow и flex-1 заставляют элемент расти в свободное место, а shrink-0 не даёт ему сужаться.
• grid вместе с grid-cols-* делает сетку из столбцов одинаковой ширины (repeat(2, minmax(0, 1fr))). col-span-*, col-span-full и row-span-* растягивают элемент на несколько ячеек.
• Чтобы центрировать элементы по обеим осям, используйте flex items-center justify-center и высоту, например min-h-96. Единственного потомка можно центрировать и так: grid place-items-center.
• relative, absolute, fixed и sticky задают position, а top-*, right-*, bottom-*, left-* и inset-* — смещения. Абсолютно позиционированный элемент размещается в ближайшем предке с заданным позиционированием, обычно с relative.
• sticky top-0 удерживает шапку вверху окна, а z-* решает, какой элемент окажется сверху.
• Как и в прошлых уроках: когда два класса задают одно свойство, порядок в атрибуте class не решает, какой победит, поэтому заменяйте класс, а не добавляйте второй.

У вашей страницы теперь есть макет, но она пока никак не реагирует на посетителя. Дальше — ещё один небольшой проект: галерея для фотоконкурса, с карточками и собственным макетом. А затем в уроке Наведение, фокус и другие состояния вы сделаете так, чтобы кнопки и ссылки на вашей странице менялись, когда над ними мышь или по ним щёлкают.

Перед тем как идти дальше, небольшое упражнение. Мы добавили внизу страницы подвал с тремя колонками информации и рядом с авторским правом и ссылкой наверх. Пока в нём всё идёт одно под другим.