Frontend Academy · Урок

Display: основы block, inline, flex и grid

Переключайтесь между значениями display и смотрите, как block, inline, flex и grid по-разному располагают содержимое.

«Display: основы block, inline, flex и grid» — бесплатный урок Frontend Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.

Свойство display

Свойство display — самое важное свойство CSS для раскладки. Оно определяет, как элемент участвует в потоке раскладки и как располагаются его дочерние элементы. Наиболее часто используются значения: block, inline, inline-block, flex, grid и none.

display: block

Блочные элементы занимают всю ширину контейнера и начинаются с новой строки. Примеры: <div>, <p>, <h1>. Для блочных элементов можно задавать ширину, высоту, внешние и внутренние отступы.

.card {
  display: block;
  width: 100%;
  margin-bottom: 24px;
}

display: inline

Строчные элементы располагаются внутри текста — они не начинают новую строку. Примеры: <span>, <a>, <strong>. Ширина, высота и вертикальные внешние отступы не влияют на строчные элементы.

span { display: inline; color: blue; }
/* Setting width: 200px on a span does nothing */

display: inline-block

inline-block объединяет оба поведения: элемент располагается в строке, как текст, но принимает ширину, высоту и вертикальные внешние отступы, как блок. Это удобно для кнопок и значков, которые должны находиться в одной строке с текстом.

.badge {
  display: inline-block;
  padding: 4px 8px;
  background: #e2e8f0;
  border-radius: 4px;
  font-size: 0.75rem;
}

display: none

display: none полностью удаляет элемент из раскладки — он не занимает места. Используйте visibility: hidden, чтобы скрыть элемент, сохранив занимаемое им пространство.

Флексбокс — одномерная раскладка

display: flex превращает элемент во флекс-контейнер. Его непосредственные дочерние элементы становятся флекс-элементами, которые располагаются в строку (по умолчанию) или столбец. Флексбокс отлично подходит для распределения пространства и выравнивания элементов.

.nav {
  display: flex;
  justify-content: space-between; /* horizontal */
  align-items: center;            /* vertical */
  gap: 16px;
}

Основные свойства Флексбокса

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 24px;
}

Сетка CSS — двумерная раскладка

display: grid превращает элемент в контейнер сетки. Определяйте строки и столбцы с помощью grid-template-columns и grid-template-rows. Сетка идеально подходит для раскладки страниц и сеток карточек.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

Единица fr

Единица fr (доля) распределяет доступное пространство. grid-template-columns: 1fr 2fr 1fr создаёт три столбца, при этом средний получает вдвое больше пространства, чем остальные.

.layout {
  display: grid;
  grid-template-columns: 240px 1fr; /* sidebar + main */
  gap: 32px;
}

Выбор между Флексбоксом и сеткой

Используйте Флексбокс для одномерных раскладок (ряд кнопок, стопка карточек). Используйте сетку для двумерных раскладок (каркас страницы, фотогалерея с явно заданными строками и столбцами). Оба подхода могут сосуществовать на одной странице.

display: none против visibility: hidden

display: none: удаляет элемент из раскладки, он недоступен программам чтения с экрана. visibility: hidden: элемент невидим, но продолжает занимать место и присутствует в дереве доступности. opacity: 0: элемент невидим, занимает место и доступен.

Быстрая проверка

Вам нужно создать адаптивную сетку карточек с несколькими строками и столбцами. С какого значения display лучше всего начать?

Итоги: значения display

block занимает всю ширину. inline располагается вместе с текстом. inline-block объединяет оба поведения. flex располагает дочерние элементы в одном измерении. grid располагает дочерние элементы в двух измерениях. none удаляет элемент из раскладки. Освойте эти значения — и Вы будете управлять любой раскладкой в интернете.

Часто задаваемые вопросы

Урок «Display: основы block, inline, flex и grid» бесплатный?

Да — полный текст урока «Display: основы block, inline, flex и grid» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.

Чему я научусь в уроке «Display: основы block, inline, flex и grid»?

Переключайтесь между значениями display и смотрите, как block, inline, flex и grid по-разному располагают содержимое. Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Frontend Academy?

Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Display: основы block, inline, flex и grid»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Frontend Academy?

Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

Селекторы и каскад
Цвета, типографика и блочная модель
Display: основы block, inline, flex и grid
Позиционирование: relative, absolute, fixed, sticky

← Назад к Frontend Academy