В этой статье расскажем как же просто использовать flexbox для создания отзывчивой сетки под разные экраны.
Допустим нам необходимо на странице сайта сделать простую разметку с товарами, которая будет хорошо смотреться на разных экранах пользователей.
Для начала создадим обычный блок div с указанием ему параметра стиля display:flex. Flex - это сокращённое свойство, определяющее способность гибкого элемента растягиваться или сжиматься для заполнения собой доступного свободного пространства.
<div style=" display:flex; justify-content: center; gap: 10px; flex-wrap: wrap;">
</div>
Параметр justify-content: center отвечает за отцентровку всех дочерних элементов.
Flex-wrap:wrap - параметр отвечает за перенос дочерних элементов на новую строку при уменьшении экрана.
Gap: 10px отвечает за расстояние между дочерними элементами.
Таким образом, нам осталось добавить только дочерние элементы внутри основного div и наша разметка будет отлично выглядеть на различных устройствах.
Стили не стал выносить в отдельный файл для наглядности.
Полный код:
<div style=" display:flex; justify-content: center; gap: 10px; flex-wrap: wrap;">
<div style="display: flex;justify-content: center; width: 200px;border: 1px solid gray;"><span>11</span></div>
<div style="display: flex;justify-content: center; width: 200px;border: 1px solid gray;"><span>22</span></div>
<div style="display: flex;justify-content: center; width: 200px;border: 1px solid gray;"><span>33</span></div>
<div style="display: flex;justify-content: center; width: 200px;border: 1px solid gray;"><span>44</span></div>
<div style="display: flex;justify-content: center; width: 200px;border: 1px solid gray;"><span>55</span></div>
</div>