css - 使用 CSS flexbox 和 grid 布局此 ui 的最佳方法

Question

我已经获得了以下布局（请参阅链接），但我不能 100% 确定我应该采用哪种方法进行布局。我已经花了 6 个小时来玩 grid 和 flexbox，但我一直在想“这个位应该是 grid 而不是 flexbox，这个位应该是 flexbox 而不是 grid”，我一直在反复思考。它有点令人困惑，所以我正在寻找一些建议。

在需要点击的屏幕截图中才能看到。UI 的灰色部分始终存在，主导航栏可以展开并将其右侧的内容推到上面。如图所示，它将是一个基于图标的菜单，展开后将显示图标标签。

出于这个原因，在高层次上，徽标和主导航是一列，右侧的所有内容都是另一列。因此我在此显示网格。第一列中的“行”是两个 flex 项元素，其中父项具有 display: flex, flex-direction: column。第一个项目只有一个最小高度，“第二个”项目上有一个 flex 1 以填充容器的剩余高度，该高度等于视口高度。然后，这会创建一行的视觉效果。我在第二列中遵循类似的模式，但第二个“行”是它自己的一个 flex 包装器，用于包含橙色、蓝色部分等“行”。

橙色和蓝色条不会总是根据页面和页面上发生的情况显示，但 ui 必须无缝地满足它们。

我对内部两列部分（绿色/粉红色区域）重复了这种模式，其中外部容器是显示网格，只有两列，1 行。然后里面的所有东西都是 display: flex, flex-direction: column。

对我来说，一切似乎都是一维的，因为当 ui 被分解时，我在每一列中只有一个实际的行。定义一个只有一个实际行的网格对我来说似乎很奇怪，因此我认为它应该只是弹性框，因为据我所知，我真的没有任何二维布局。它真的重要吗？我是一位经验丰富的 CSS 开发人员，但没有使用网格，所以我现在脑子里有点困惑。

不幸的是，这一切都必须与 IE10 一起使用并且可以访问，因此如果用户可能会增加字体大小，我必须在所有行查找位上设置最小高度（如果它们中有文本）。

与主导航一样，默认情况下绿色侧面板是隐藏的，但是单击一个按钮会使其滑入以查看并将粉红色列轻推。

如果你看到这个 UI 应该如何分解？任何建议或见解都将受到欢迎。谢谢你。

模拟 UI 布局线框

标签： cssflexboxcss-grid