Как поставить блоки в ряд CSS

В CSS есть несколько способов расположить блоки в ряд. Рассмотрим два наиболее распространенных способа:

1. Использование свойства display с значение inline-block

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

.block {
  display: inline-block;
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

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

2. Использование свойства display с значение flex

С помощью свойства display: flex можно определять расположение блоков в ряду, правый блок окажется рядом с левым. Свойство flex позволяет гибко управлять размерами блоков и их расположением.

.container {
  display: flex;
}

.block {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

В этом примере, блоки .block будут расположены в ряд благодаря свойству display: flex, заданному родительскому контейнеру .container. Они имеют ширину и высоту по 100 пикселей и границы, чтобы их можно было увидеть. Вы также можете использовать свойства justify-content и align-items, чтобы настроить горизонтальное и вертикальное выравнивание блоков, когда они используют flexbox.

Какой метод использовать, зависит от требований к макету и дизайну. В некоторых случаях может понадобиться использование обоих методов совместно, чтобы достичь нужного результата.