Как разместить блоки в ряд css

Для того, что бы расположить несколько блочных элементов в линию обычно применяется flexbox. Особенно это актуально когда блоки должны располагаться вдоль одной из осей - только горизонтально или только вертикально. Если требуется сетка, где блоки должны размещаться как на шахматной доске, то правильнее применять grid-модель для распределения контента. Рассмотрим пример.

Исходный HTML файл

<div class="container">
  <div>123</div>
  <div>456</div>
  <div>789</div>
  <div>1011</div>
  <div>1213</div>
</div>

Для начала надо определить (или создать) родительский элемент для всех блочных элементов которые необходимо позиционировать в ряд. В нашем случае это div-элемент с классом container. Затем описать правила, изменить display, и выбрать способ распределения блоков внутри flex-контейнера с помощью justify-content и align-items.

.container {
  display: flex;
  /* крайние блоки прижмуться к краям родительского элемента, 
     остальные равномерно займут пространство между ними. */
  justify-content: space-between;
}