CSS 网格与 Flexbox

我学习CSS的主要原因是我对响应式网页设计非常感兴趣。我尝试过“浮动”方法，但后来发现它有点过时了，而且有更好的网页布局方案。

我开始使用 Flexbox 来组织布局，直到我发现了 CSS Grid。但 Flexbox 和 CSS Grid 非常相似，这让我很困惑，不知道什么时候该用哪个。所以，让我来分享一下我从这次新研究中学到的东西。

主要区别

“Flexbox 适用于一维布局，而 Grid 适用于二维布局。”

更多差异

• CSS Grid 的方法是布局优先，而 Flexbox 的方法是内容优先。
• Flexbox 布局最适合应用程序的组件和小规模布局，而 Grid 布局则适用于设计非线性的较大规模布局。
• 提示：你甚至可以组合这些布局模型。请注意，你可以在 CSS Grid 容器内使用 Flexbox 容器（反之亦然！）。

示例

不久前，我为FreeCodeCamp课程创建了一个致敬页面。它完全响应式，并使用 Flexbox 布局，方便您了解如何使用。

编辑：我也用 CSS Grid 做了同样的项目，请查看。

两者都练习！

Thomas Park创建了两个可爱的游戏来学习和练习Flexbox和CSS Grid。

当我有疑问时

CSS Tricks提供了一些关于使用Flexbox和CSS Grid 的简单指南。每当我有疑问或记不住语法时，我都会查阅它们。

浏览器兼容性

您可以在此处查看哪些浏览器支持 Flexbox 。在此处查看CSS Grid 兼容性。

另请查看在 Internet Explorer 中实现 CSS 网格

来源

• 封面照片
• 报价和信息
• 图片和信息

思考

您最常使用哪一个？

感谢您的阅读。别忘了在 dev.to 和 Twitter 上关注我！