Grid vs Flex用于实现圣杯式布局

Question

[当存在Sidebar时，我希望我的布局以此为起点：

[Sidebar不存在时为此：

为了获得这种效果，我相信三个现代选择是：

1. 仅网格：具有一个像这样grid或[]]利用class的https://codepen.io/rajsinghusa/pen/ExPaXqR

2. Grid + Flex：具有3行的grid布局，其中两个flex项用于中排。或者，

3. 仅Flex：使用flex创建3行，然后在其中创建两列中间一行。

这三个实现的局限性有何不同？

[我希望我的布局在存在补充工具栏时从此开始：不存在补充工具栏时：为了获得这种效果，我相信三个现代的选择是：单独使用网格：拥有一个利用...的网格]]

鉴于您的实现细节，我要说的唯一区别就是语义。这三个选项将很好地工作，对于您的用例，我认为grid是我要使用的选项，因为很容易看到不同布局上正在发生的事情。

并排看两个声明，它非常清楚布局是如何工作的：

"header header" "sidebar main" "footer footer"
"header header" "main main" "footer footer"

鉴于此用例，使用选项2或3没有明显的好处。

要记住的重要一件事是与flex相比，网格的行为如何：

网格基于容器，Flexbox基于内容

在flexbox布局中，单元格的大小（flex-item）是在flex-item本身内部定义的，在网格布局中，定义了一个单元格（网格项）的大小在网格容器内。

来源：https://www.webdesignerdepot.com/2018/09/grid-vs-flexbox-which-should-you-choose/

取决于您希望布局如何表现，如何适应不同的屏幕分辨率或不同的内容，请牢记这一差异。我再次认为grid在这方面会提供更多选择。

Answer 1

鉴于您的实现细节，我要说的唯一区别就是语义。这三个选项将很好地工作，对于您的用例，我认为grid是我要使用的选项，因为很容易看到不同布局上正在发生的事情。