Свойство CSS display определяет, как элемент отображается на странице. Основные значения:

block — элемент занимает всю ширину контейнера, начинается с новой строки. Пример: <div>, <p>.
inline — элемент занимает только необходимую ширину, не переносится на новую строку. Пример: <span>, <a>.
inline-block — сочетает свойства inline и block: элемент располагается в строке, но можно задавать ширину и высоту.

Flexbox

Flexbox — это модель компоновки для упрощения расположения элементов в контейнере, особенно для адаптивных интерфейсов.

Механика работы:

Контейнер с display: flex становится flex-контейнером.
Его дочерние элементы — flex-элементы, которые располагаются вдоль главной оси (по умолчанию — горизонтально).

Основные свойства контейнера:

flex-direction — направление главной оси (row, column, row-reverse, column-reverse).
justify-content — выравнивание элементов по главной оси (flex-start, center, space-between и др.).
align-items — выравнивание по поперечной оси (flex-start, center, stretch и др.).
flex-wrap — перенос элементов на новую строку (nowrap, wrap, wrap-reverse).

Основные свойства элементов:

flex-grow — насколько элемент может расширяться.
flex-shrink — насколько элемент может сжиматься.
flex-basis — базовый размер элемента.

Пример:

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.item {
  flex-grow: 1;
  flex-basis: 100px;
}

Это позволяет легко создавать гибкие и адаптивные макеты без использования float или позиционирования.

Расскажи про свойство display: какие значения бывают, чем отличаются block, inline, inline-block? Расскажи подробнее про flexbox: механика работы, основные свойства

Flexbox