Какие знаешь значения свойства display?

Какие знаешь значения свойства display?

Основное свойство CSS

display — это одно из самых важных свойств CSS, которое определяет как элемент отображается на странице. Оно контролирует участие элемента в потоке (flow) документа и его размеры.

Главные значения

1. display: block

Элемент занимает всю доступную ширину и начинается с новой строки.

.container {
  display: block;
}

/* Примеры блочных элементов по умолчанию: */
/* <div>, <p>, <h1>-<h6>, <ul>, <ol>, <section>, <article>, <header>, <footer> */

Характеристики:

• Занимает 100% ширину родителя
• Начинается с новой строки
• Можно установить width и height
• Margin, padding работают со всех сторон

2. display: inline

Элемент занимает только нужное ему место и находится в одной строке с другим контентом.

.link {
  display: inline;
}

/* Примеры инлайновых элементов: */
/* <a>, <span>, <strong>, <em>, <img>, <button> */

Характеристики:

• Занимает только нужное место
• Игнорирует width и height
• Вертикальные margin/padding работают странно
• Горизонтальные margin/padding работают

3. display: inline-block

Комбинирует поведение inline и block. Элемент находится в строке, но можно установить размеры.

.box {
  display: inline-block;
  width: 200px;
  height: 100px;
  margin: 10px;
}

Характеристики:

• В одной строке с другим контентом
• Можно установить width и height
• Margin и padding работают полностью
• Есть небольшое пространство между элементами

4. display: none

Элемент полностью скрывается и не участвует в потоке документа.

.hidden {
  display: none; /* Скрыт и место для него не зарезервировано */
}

/* Отличие от visibility: hidden */
vis {
  visibility: hidden; /* Скрыт, но место зарезервировано */
}

5. display: flex

Включает Flexbox — мощную систему для выравнивания и распределения элементов.

.container {
  display: flex;
  justify-content: center; /* Выравнивание по горизонтали */
  align-items: center; /* Выравнивание по вертикали */
  gap: 20px; /* Промежуток между элементами */
}

/* HTML */
<div class="container">
  <div>Элемент 1</div>
  <div>Элемент 2</div>
  <div>Элемент 3</div>
</div>

Частые свойства:

• flex-direction — направление (row, column)
• justify-content — выравнивание основной оси
• align-items — выравнивание поперечной оси
• flex-wrap — переносить ли элементы
• gap — промежуток между элементами

6. display: grid

Включает CSS Grid — двумерную систему раскладки.

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 3 одинаковые колонки */
  grid-gap: 20px; /* Промежуток */
}

/* Или более сложно */
.grid {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-auto-rows: minmax(200px, auto);
}

Уникально для Grid:

• Двумерная раскладка
• grid-template-columns и grid-template-rows
• grid-column и grid-row для позиционирования
• Очень мощно для сложных макетов

Таблица сравнения

Примеры использования

Навигация (flex)

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #333;
}

Центрирование (flex или grid)

/* Flex способ */
.centered {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

/* Grid способ */
.centered {
  display: grid;
  place-items: center;
  height: 200px;
}

Карточки (flex + flex-wrap)

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.card {
  flex: 0 0 calc(33.333% - 15px); /* 3 карточки в строку */
}

/* Адаптивно */
@media (max-width: 768px) {
  .card {
    flex: 0 0 calc(50% - 10px); /* 2 карточки на планшете */
  }
}

Сложная раскладка (grid)

.layout {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: 60px 1fr 60px;
  gap: 10px;
}

.header { grid-column: 1 / -1; } /* Во всю ширину */
.sidebar-left { grid-row: 2; }
.main { grid-row: 2; }
.sidebar-right { grid-row: 2; }
.footer { grid-column: 1 / -1; } /* Во всю ширину */

Редкие значения

.element {
  display: inline-flex; /* flex, но inline */
  display: inline-grid; /* grid, но inline */
  display: flow-root; /* Новый формирующий контекст */
  display: contents; /* Игнорировать сам элемент, показать только детей */
  display: table; /* Поведение table */
}

Заключение

Знание display критично для frontend разработчика:

• block — базовая раскладка
• inline — текстовые элементы
• inline-block — когда нужны оба поведения
• flex — для одномерной раскладки (навигация, выравнивание)
• grid — для двумерной раскладки (макеты)
• none — скрытие элементов

В современных проектах используй flex и grid вместо float и position. Это стандарт 2025 года.