Вебинары Разобраться в IT Реферальная программа
Программирование Аналитика Дизайн Маркетинг
ПРИХОДИТЕ УЧИТЬСЯ НОВОЙ ПРОФЕССИИ ЛЕТОМ СО СКИДКОЙ ДО 70% Забронировать скидку
10 Июл 2023
2 мин
2420

Размещение элементов в две строки с помощью Flexbox

Часто веб-разработчики сталкиваются с задачей расположить элементы на странице так, чтобы они динамически изменяли свой размер и подстраивались

Часто веб-разработчики сталкиваются с задачей расположить элементы на странице так, чтобы они динамически изменяли свой размер и подстраивались под размер окна браузера. Рассмотрим, как это можно сделать с помощью Flexbox, укладывая элементы в две строки по четыре в каждой.

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

Пример кода

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
</div>

Стилизация с помощью Flexbox

Чтобы расположить элементы как нужно, можно использовать CSS Flexbox. Сначала задаем родительскому контейнеру свойство display: flex;, что делает его flex-контейнером. Затем, чтобы элементы могли переноситься на новую строку, добавляем свойство flex-wrap: wrap;.

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

Теперь, чтобы уложить ровно 4 элемента в одну строку, каждому элементу задаем свойство flex-basis: 25%;. Это свойство задает начальный размер flex-элемента перед распределением свободного пространства.

.item {
  flex-basis: 25%; 
}

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

Добавить комментарий

Подарок
Забрать подарок