В последнее время все то и дело используют свойства 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>

И всё. В результате мы получим что-то на подобии вот этого:

Как выровнять последний ряд по сетке при justify-content: space-between

То есть сетку по 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

Сегодня мы разобрались как выровнять последний ряд по сетке при justify-content: space-between

Естественно, это всё можно и нужно тестировать на адаптивность, а для этого нужно использовать разные телефоны. Но что делать, если на тестовом аппарате треснуло стекло? Можно с легкостью купить новое здесь: https://www.mobilife.com.ua/category/displei-ekrany-dlya-telefonov-doogee

Понравилась или помогла статья?
Купите мне кофеКупите мне кофе