Как сделать flex-контейнер и зачем нужен display: flex?

Flex-контейнер — это просто любой элемент, которому вы задали display: flex. После этого его прямые дети автоматически становятся flex-элементами и выстраиваются в ряд.

<div class="row">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

.row {
  display: flex;        /* стал флекс-контейнером */
  gap: 12px;            /* промежутки между детьми */
}

Что меняется: блоки 1 2 3, которые без флекса встали бы друг под другом (блочные элементы занимают всю ширину), теперь стоят в одну строку рядом. Появляются новые рычаги управления:

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

Важно: флекс действует только на непосредственных потомков. Внуки уже не управляются этим контейнером — для них нужен свой display: flex.