Как конвертировать простую CSS сетку в версию Flexbox без странного эффекта - PullRequest
0 голосов
/ 28 января 2019

Я пытаюсь получить макет страницы, похожий на https://material.angular.io. Я использовал angular / flex-layout для создания комбинированного макета flexbox / grid, который работает практически так, как задумано.Самые внутренние контейнеры (навигация и контент) были помещены в сетку CSS, но, поскольку он в основном использовался только как двухмерный контейнер, я подумал, что смогу легко заменить этот контейнер на column-flexbox.Но только это приводит к этому странному эффекту при прокрутке вниз:

enter image description here

Поле навигации слева должно быть липким и не выдвигаться ниже панели инструментов заголовка.

Можно ли использовать flexbox только для этого типа макета?

1 Ответ

0 голосов
/ 01 февраля 2019

Похоже, что некоторые атрибуты angular / flex-layout были неправильно настроены вместе с некоторыми стилями CSS.Я снова начал и мне удалось создать версию, которая ведет себя одинаково для CSS Grid и Flexbox:

https://stackblitz.com/edit/material-angular-io-behavior-with-bootstrap

На второй панели инструментов есть кнопка, которая позволяет переключаться между сеткой CSS иверсия flexbox на лету.

...