Как преобразовать простую сетку CSS в версию Flexbox без странного эффекта
Я пытаюсь получить макет страницы, похожий на https://material.angular.io. Я использовал angular/flex-layout для создания комбинированного макета flexbox/grid, который работает почти так, как задумано. Самые внутренние контейнеры (навигация и контент) были размещены внутри сетки CSS, но, поскольку они в основном использовались только как двумерные контейнеры, я подумал, что могу легко заменить их на column-flexbox. Но только это приводит к этому странному эффекту при прокрутке вниз:
Поле навигации слева должно вести себя как липкое и не располагаться ниже панели инструментов заголовка.
Можно ли использовать только flexbox для такого макета?
Ответы 1
Похоже, что некоторые атрибуты angular/flex-layout были неправильно настроены вместе с некоторыми стилями CSS. Я начал снова, и мне удалось создать версию, которая ведет себя одинаково для CSS Grid и Flexbox:
https://stackblitz.com/edit/material-angular-io-behavior-with-bootstrap
На второй панели инструментов есть кнопка, которая позволяет переключаться между сеткой CSS и версией flexbox на лету.