Как разместить блоки в ряд css
Ответы
Вячеслав Межуревский
10 октября 2022
Для того, что бы расположить несколько блочных элементов в линию обычно применяется 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;
}
0
0