Часто веб-разработчики сталкиваются с задачей расположить элементы на странице так, чтобы они динамически изменяли свой размер и подстраивались под размер окна браузера. Рассмотрим, как это можно сделать с помощью Flexbox, укладывая элементы в две строки по четыре в каждой.
В качестве примера возьмем ситуацию, когда на странице есть 8 блоков, которые необходимо расположить в две строки. Все блоки находятся в общем родительском контейнере.
Станьте веб-разработчиком с нуля за 15 месяцев на курсе онлайн-университета Skypro. Преподаватели — практикующие эксперты из VK, «Альфа-Банка», Skyeng и других крупных компаний. В программе нет лишней теории, зато много практических заданий, а результаты курсовых можно положить в портфолио. Специалисты центра карьеры помогут с резюме, сопроводительными письмами и собеседованиями.
Пример кода
<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%;
}
Так восемь элементов располагаются в две строки по четыре в каждой, динамически подстраиваясь под размер окна браузера.
На курсе Skypro «Веб-разработчик» научитесь писать код и тестировать его под руководством опытных наставников. Освоите все необходимые знания и навыки, чтобы стартовать в профессии уверенным младшим специалистом. Программу реально освоить, даже если вы никогда раньше не программировали и ничего не знаете об IT, а материалы курса и регулярные обновления будут доступны навсегда.
Добавить комментарий