Как в моём случае «отрабатывает» justify-content: space-around?

Question

[Darya Shvakh]

Добрый день.
Это не - дежавю, это ту би континиум.)
Есть Элемент Страницы - Блок
Заголовок у блока "Обыск в кабинете вице-мэра" (из сегодняшней новостной ленты)) - фиксированный (не прокручивается при скролле). Немного "вывалился" но не о том вопрос.
Внутри блока - второй блок который прокручивается при скролле.
В этом блоке - 15 заголовков.
При применении св-ва justify-content: space-around к "родителю" список заголовков (доступных для обзора, в поле "родителя") начинается с номера - 7 ( 7 Следователи организовали обыск в кабинете первого).

justify-content: space-around -- Флексы равномерно распределяются по всей строке. Пустое пространство перед первым и после последнего элементов равно половине пространства между двумя соседними элементами.

Объясните пожалуйста.
Почему в моём случае они (равномерно распределились-это понятно) не отображаются все полностью в области просмотра "родителя".
Спасибо!

Comments

[Darya Shvakh]

Тимур Турсунбаев, Добрый день!
И по моему Вы - правы!
Подождём другие мнения.
Вы бы не могли, вынести свой комментарий в ответ!
Спасибо!

Answer 1

[WapSter]

Могу сделать предположение, space-around не дружит со свойством скролл и не видит границ от которых ему нужно отталкиваться. Думаю если сделать обертку вокруг заголовков которая будет скроллится и иметь определенную высоту, то ситуация исправиться. Но лучше убрать свойство justify content
UPD: Перенес

Comments

[Darya Shvakh]

Тимур Турсунбаев, Вы правы на 100%.
Если удалить skrol у "родителя" всё - ОК.
Сейчас нужно публиковать 3-ий пост:
"Почему justify-content: space-around не "дружит" со скролом.

UPD: Перенес

Спасибо!))

Answer 2

[MamaLuyba]

и снова здравствуйте!
видимо, это свойство служит для работы со строками, а не столбцами - отсюда и такое странное поведение.
если выставить justify-content: start - то все нормально показывает.

Comments

[hzzzzl]

не совсем, просто флекс по умолчанию рисуется по горизонтали (row)
https://developer.mozilla.org/ru/docs/Web/CSS/flex...

justify-content и align-content делают то же самое, просто одно выравнивает по одной оси (верт или гориз), а другое - по другой
https://developer.mozilla.org/en-US/docs/Web/CSS/C...

и оси переключаются через флекс-дирекшен

[Darya Shvakh]

hzzzzl, Добрый день.
Ну - да.
.....но чёт яснее про "мой случай" - не стало.)
Спасибо!

[Darya Shvakh]

MamaLuyba,
и снова здравствуйте
!)
justify-content: - должен работать с флекс-элементами, строка это или столбец - одинаково.
Т.е. ....равномерно распределять по флекс-контейнеру.
Или - нет?)
Спасибо!
P/S Но одно утешает, что и Вы согласны с "диагнозом", поведение - странное!)

[MamaLuyba]

Darya Shvakh, а зачем тогда копаться в диагнозах?:)
не проще ли взять работающий метод?

[Darya Shvakh]

MamaLuyba,
Вот в этом основная проблема всей Российской медицины, она ориентированна на снятие симптоматики, а проблема в перспективе переходит в хроническую стадию.))

[Darya Shvakh]

Чёт один коммент - слетел.
Ну да ладно.

[Darya Shvakh]

MamaLuyba, ну просто и цель поста - разобраться!
Спасибо за неравнодушие!)

[hzzzzl]

Darya Shvakh, а кодепен я подробнее только сейчас посмотрел :)

в общем, по ходу, если контент не влезает в контейнер (как здесь все заголовки не влезают в box-text-text skrol ), то when there isn't enough space, space-around behaves like center
то есть просто центрирует все элементы, и поэтому просто получается так что список начинается с 7.. если окно по вертикали стянуть и отзумить, то будет список начинаться с других цифр

https://stackoverflow.com/a/34455480

[Darya Shvakh]

hzzzzl, Вам Огромное Спасибо, за Участие!
Но в данном случае Тимур Турсунбаев, - прав, дело в скролле.
P/S Очень Познавательно!