Как расположить несколько блочных элементов горизонтально с помощью CSS (flexbox/inline-block)?

Горизонтальное расположение блочных элементов в CSS

Для размещения нескольких блочных элементов в одну строку используются два основных подхода: Flexbox и inline-block. Flexbox — это современный метод, который обеспечивает гибкое управление расположением, выравниванием и распределением пространства между элементами. Inline-block — более старый способ, при котором элементы ведут себя как строчные, но сохраняют блочные свойства (ширина, высота, отступы).

Flexbox

Родительскому контейнеру задаётся display: flex, и все дочерние элементы автоматически выстраиваются в ряд. Дополнительные свойства, такие как justify-content и align-items, позволяют управлять выравниванием.

.container {
  display: flex;
  justify-content: space-between; /* распределение элементов */
}
.item {
  width: 100px;
  height: 50px;
  background: lightblue;
}

Inline-block

Каждому элементу задаётся display: inline-block. Важно учитывать, что между такими элементами может появляться пробел из-за переносов строк в HTML. Для его устранения можно задать родителю font-size: 0 или использовать комментарии.

.item {
  display: inline-block;
  width: 100px;
  height: 50px;
  background: lightcoral;
  vertical-align: top; /* выравнивание по верхнему краю */
}

Вывод

Flexbox предпочтительнее для сложных адаптивных макетов, так как он проще в управлении и не имеет проблем с пробелами. Inline-block подходит для простых случаев, когда нужно быстро расположить элементы в строку без дополнительных стилей.