知道何时使用 flex 或 grid

当您第一次开始学习 Web 开发时，知道何时使用 flex 或 grid 可能会非常令人困惑。他们基本上做同样的事情，但学习这些差异可以帮助你的发展事业。

很难发现这些差异以及何时使用其中一种。所以希望我能帮助你展示你在什么情况下使用网格或什么时候使用弹性。我知道有很多帖子和视频都在谈论这个特定的比较，但我希望我能帮助你理解其中的区别。

网格是为同时使用行和列的二维布局而设计的。 Flex 设计用于使用行或列的 1 方向布局。这两种方法具有相似的属性和行为，但都有自己的用例。

网格

网格非常适合创建页面结构很重要的布局。它使您可以轻松地使用不同的屏幕尺寸，而不会使您的页面看起来很时髦。

从技术上讲，我可以使用 Flex 布局来实现这种网格外观。然而，当使用 Grid 时，它让我可以更好地控制项目的宽度、它们如何环绕和沿页面向下流动，并使我的 UI 更加稳定。

在下面的示例中，我拆分了网格以展示如何使用不同的宽度来适应不同的屏幕尺寸，但仍然可以将所有内容都显示在屏幕上。根据他们正在查看的屏幕尺寸，我从 1 列一直到 3 列。

如果要在页面上显示多个项目并且结构很重要，最好使用 Grid。我知道这个例子不是最好的，但是以所示的方式使用它是我倾向于使用它的方式。

柔性

Flex 非常适合处理盒子内的物品。它使您可以利用项目周围的空白来发挥自己的优势。每个 Flex 项目的大小将决定它在其父容器中占用的大小。使用某些属性，您可以决定它们如何与兄弟姐妹交互。

Flex 非常适合容器内的布局。当我需要设置某些项目时，我一直使用 Flex，如下面的屏幕截图所示。

这种内容布局位于 X 轴上，也称为行。从技术上讲，我可以使用 Grid 来完成相同的任务，但它会增加一些工作量，并且使用 flex 我们可以轻松地调整内容在框内的显示方式，最好不要这样做。

结论

请记住这个一般的经验法则，Grid 用于在多维区域上布局内容，而 flex 仅用于一维。所以基本上，如果您需要灵活性，请使用 Flex。如果您需要结构和可预测性，请使用 Grid。

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/9662/52290200