В последнее время все то и дело используют свойства flex в CSS. И это здорово. То, что раньше требовало от разработчика применения техники танца с бубном, и нескольких методик медитации, сейчас решается буквально 3-мя строчками кода. Сегодня рассмотрим как выровнять последний ряд по сетке при justify-content: space-between
Итак, разберемся как выровнять последний ряд по сетке при justify-content: space-between
Задача: у нас есть набор элементов, которые нужно вывести в виде таблицы. Для этого мы у родительского элемента сделаем display: flex, а у дочерних элементов (ячеек таблицы) – flex-basis: 32%.
<style>
.parent{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.parent .child{
flex-basis: 32%
}
</style>
<div class=”parent”>
<div class=”child”>cell 1</div>
<div class=”child”>cell 2</div>
<div class=”child”>cell 3</div>
<div class=”child”>cell 4</div>
<div class=”child”>cell 5</div>
</div>
И всё. В результате мы получим что-то на подобии вот этого:
То есть сетку по 3 ячейки в ряд. Свойство justify-content: space-between распределит ячейки по всей ширине родителя, flex-basis: 32% сделает все ячейки шириной 32% от ширины родителя, а flex-wrap: wrap перенесет ячейки, которые не влазят в ряд на следующую строку.
Но есть тут и подводный камень. Как видно на картинке, второй ряд ячеек распределён по ширине, из-за чего в центре образовалась пустота. И это из-за свойства justify-content: space-between. Как это преодолеть?
Очень просто. Для этого нужно добавить в родитель ещё один псевдоэлемент, ширина которого будет равна ширине ячейки, он будет также участвовать в сетке, но при этом не будет видимым, если в сетке будет 6 элементов, а не 5.
Рассмотрим это на доработанном примере кода:
<style>
.parent{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.parent:after{
flex-basis: 32%;
content: “”;
}
.parent .child{
flex-basis: 32%
}
</style>
<div class=”parent”>
<div class=”child”>cell 1</div>
<div class=”child”>cell 2</div>
<div class=”child”>cell 3</div>
<div class=”child”>cell 4</div>
<div class=”child”>cell 5</div>
</div>
И всё. после этой модификации первоначального кода у нас получится вот такая вот сетка:
Сегодня мы разобрались как выровнять последний ряд по сетке при justify-content: space-between
Естественно, это всё можно и нужно тестировать на адаптивность, а для этого нужно использовать разные телефоны. Но что делать, если на тестовом аппарате треснуло стекло? Можно с легкостью купить новое здесь: https://www.mobilife.com.ua/category/displei-ekrany-dlya-telefonov-doogee
Также рекомендуем прочитать:
Купите мне кофе