标签：flex 布局 Flex 何时 网格 grid 使用 Grid
知道何时使用 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
标签：flex,布局,Flex,何时,网格,grid,使用,Grid 来源： https://www.cnblogs.com/amboke/p/16648359.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。