Display: block, flex, grid, hidden

Самые частые значения display и зачем каждое из них нужно.

Свойство display определяет, как элемент ведёт себя в потоке: занимает ли всю строку, выстраивает ли детей в ряд или в сетку.

block и inline-block

block делает элемент блочным — он занимает всю ширину и переносит следующий на новую строку. inline-block позволяет элементам стоять в ряд, но при этом задавать им ширину и отступы.

<a href="#" class="inline-block px-3 py-1">Ссылка-кнопка</a>

Ссылка останется в строке, но получит отступы как у кнопки.

flex и grid

Два главных режима раскладки. flex выстраивает детей в один ряд (или столбец) и даёт мощные инструменты выравнивания. grid создаёт двумерную сетку из строк и колонок. Им посвящены отдельные уроки, здесь — лишь общая идея:

<div class="flex">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

Блоки A, B, C встанут в один горизонтальный ряд, а не друг под другом, как было бы по умолчанию.

hidden — скрыть элемент

hidden убирает элемент со страницы (это display: none) — он не виден и не занимает места. Самое полезное применение — показывать или прятать элементы на разных экранах в связке с брейкпоинтами:

<nav class="hidden md:block">Меню для десктопа</nav>
<button class="md:hidden">Бургер для мобильных</button>

На узком экране меню скрыто, виден бургер; на широком (md и больше) — наоборот. Префикс md: мы разберём в разделе про адаптивность.

Памятка

Итог

• block/inline-block — базовое поведение в потоке.
• flex и grid — два режима раскладки; первый для рядов, второй для сеток.
• hidden скрывает элемент; в паре с брейкпоинтами управляет видимостью на разных экранах.