Как поставить элементы в ряд

Короткий ответ

Блочные элементы стоят друг под другом. display: flex на родителе выстраивает их в ряд:

<div style="display: flex; gap: 8px;">
  <div style="padding: 12px; background: lavender;">One</div>
  <div style="padding: 12px; background: honeydew;">Two</div>
  <div style="padding: 12px; background: lightyellow;">Three</div>
</div>

Перенос на новую строку

Если элементов много, flex-wrap: wrap переносит лишние вниз, вместо того чтобы сжимать:

<style>
  .tags { display: flex; flex-wrap: wrap; gap: 8px; width: 240px; }
  .tags span { padding: 4px 10px; background: gainsboro; border-radius: 12px; }
</style>
 
<div class="tags">
  <span>css</span><span>html</span><span>flexbox</span><span>grid</span><span>animation</span>
</div>

Картинка рядом с текстом

Частый случай — аватар и подпись. align-items: center выравнивает их по центру по вертикали:

<div style="display: flex; align-items: center; gap: 10px;">
  <img src="/media/photo-200x200.jpg" alt="" width="48" height="48" style="border-radius: 50%;">
  <span>Anna Smith</span>
</div>

Частая ошибка

display: flex пишут на самих элементах вместо родителя — и ничего не меняется. Flexbox включается на контейнере, а выстраиваются его прямые дети.

Функции из этого ответа

display — Определяет, как элемент ведёт себя в потоке и как раскладывает содержимое.
flex-wrap — Могут ли flex-элементы переноситься на новые строки.
gap — Промежутки между элементами во flexbox и grid.
align-items — Выравнивает элементы поперёк главной оси — в ряду это по вертикали.