Мне был предоставлен следующий макет (см. Ссылку), но я не уверен на 100%, какой подход выбрать для макета.Я потратил 6 часов на игры с grid и flexbox, но продолжаю думать: «Этот бит должен быть grid, а не flexbox, а этот бит должен быть flexbox, а не grid», и я возвращался вперед и назад.Это немного сбивает с толку, поэтому я искал несколько советов.
На скриншоте, который нужно будет щелкнуть, чтобы увидеть.Серые части пользовательского интерфейса присутствуют всегда, основной столбец навигации может расширяться и выдвигать то, что справа от него.Как показано, это будет меню, основанное на значках, а в развернутом виде будут отображаться ярлыки значков.
По этой причине на высоком уровне логотип и главная навигационная панель - это один столбец, а все справа - другой столбец.Следовательно я отображаю сетку на этом.«Строки» внутри первого столбца - это два элемента flex-элемента, в которых родительский элемент отображает: flex, flex-direction: column на нем.Первый элемент имеет минимальную высоту, а «второй» элемент имеет изгиб 1, чтобы заполнить оставшуюся высоту контейнера, равную высоте области просмотра.Это тогда создает визуальный ряд.Я придерживаюсь аналогичной схемы во втором столбце, но второй «ряд» сам по себе является гибкой оболочкой для «строк», которые он содержит, таких как оранжевые, синие секции.
Оранжевые и синие полосы не всегда будутпоказано в зависимости от страницы и того, что происходит на ней, но пользовательский интерфейс должен обслуживать их без проблем.
Я повторил этот шаблон для внутреннего раздела из двух столбцов (зеленые / розовые области), где внешний контейнер отображает сетку свсего две колонки, 1 строка.Тогда все внутри отображается: flex, flex-direction: column.
Мне все кажется одномерным, поскольку у меня действительно есть только одна фактическая строка в каждом столбце, когда пользовательский интерфейс разбит.Мне кажется странным определять сетку только с одной реальной строкой, поэтому я подумал, что все это должна быть просто гибкая коробка, поскольку у меня нет, насколько я могу судить, двухмерного макета.Это действительно имеет значение?Я опытный CSS-разработчик, но не работаю с сеткой, поэтому сейчас у меня в голове немного путаницы.
Все это, к сожалению, тоже должно работать с IE10 и быть доступным, поэтому мне нужно установить минимальные высотына всех битах, выглядящих как строки, если в них есть текст, поскольку пользователь может увеличить размер шрифта.
Как и в случае с главной навигационной панелью, зеленая боковая панель по умолчанию скрыта, но нажатие кнопки приведет к ее скольжению.в, чтобы просмотреть и подтолкнуть розовую колонну.
Если вы видели этот интерфейс, как он должен быть разбит?Любые советы или идеи будут приветствоваться.Спасибо.
Каркас макета макета пользовательского интерфейса