Как расположить блоки горизонтально CSS

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

Пример с display: inline-block:

HTML:

<div class="container">
  <div class="block red"></div>
  <div class="block green"></div>
  <div class="block blue"></div>
</div>

CSS:

.container {
  text-align: center; /* не обязательно, добавляет выравнивание по центру */
}

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

.red {
  background-color: red;
}

.green {
  background-color: green;
}

.blue {
  background-color: blue;
}

Пример с display: inline-flex (требуется обернуть блоки в еще один div):

HTML:

<div class="container">
  <div class="flex-container">
    <div class="block red"></div>
    <div class="block green"></div>
    <div class="block blue"></div>
  </div>
</div>

CSS:

.container {
  text-align: center; /* не обязательно, добавляет выравнивание по центру */
}

.flex-container {
  display: inline-flex;
}

.block {
  width: 100px;
  height: 100px;
  margin: 10px;
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

.blue {
  background-color: blue;
}

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