Скрыть элементы flexbox в зависимости от условия (Angular 8)

Question

Как мне go скрыть и показать элементы в контейнере flexbox, если они достигли конца этого контейнера?

Так что, когда элементы достигают конца контейнера, скрывают элементы, но создать кнопку, которая при нажатии будет отображать остальные скрытые элементы.

Answer 1

В зависимости от ваших потребностей, я вижу 2 решения:

• В решении CSS просто задайте свой контейнер фиксированного размера, и пусть элементы переполняются, но скрывайте их, используя overflow: hidden. Затем вы можете добавить действие пользовательского интерфейса, чтобы добавить / удалить класс css, который бы убрал ограничение размера, чтобы отображались все элементы. Однако не существует простого способа узнать, не переполнен ли компонент, и ваша кнопка для отображения всех элементов будет видна в любое время.
• В решении javascript вам потребуется получить элемент контейнера. Например, получите его размер и дочерний размер, а затем проверьте, не переполняются ли элементы. Затем вы можете контролировать, должна ли кнопка быть видимой или нет.