Grid和Flexbox哪个好用

本篇内容介绍了“Grid和Flexbox哪个好用”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

10年积累的成都网站设计、成都网站制作经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站设计后付款的网站建设流程，更有宽甸免费网站建设让你可以放心的选择与我们合作。

这个话题已经争论了很多次，哪个更好?

对您的网站布局和内容使用Grid(网格)系统还是Flexbox?让我们深入了解两者之间的主要区别以及何时使用它们。

Grid用于二维布局，Flexbox用于一维布局。

网格布局——二维

网格布局(即Bootstrap或CSS网格)用于二维布局。这意味着什么?这意味着，如果您要同时创建包含行和列的布局，请使用网格系统。

对于布局将包含页面内容的页面容器来说，这是一个完美的解决方案。

Flexbox ——一维

将Flexbox用于一维布局，这意味着内容会沿一个方向(水平或垂直)移动。

以Navbar为例——您可能具有Logo和页面链接，这些Logo和页面链接水平排列成一行(单向)。使用Flexbox将以更少的代码行为您提供更大的灵活性和对内容的控制。

使用网格系统进行页面布局，将Flexbox用于页面内容。

这里的一般规则是Flexbox会基于内容，而网格基于布局。

Flexbox —内容之王

让我们看一个简单的示例，以帮助我们了解如何将这两个概念一起使用。

让我们从上方使用导航栏，从头开始。这是原始的HTML：

现在，在使用Flexbox之前，这些元素将像这样简单地相互堆叠。

让我们贴上一个 display: flex 看看会发生什么。

nav {   display: flex; }

惊人的!现在，我们将元素很好地排成一行。

让我们把“SIGN IN”(登录)扔到最右边。

nav > div:nth-child(4) {   margin-left: auto; }

真正酷的是，我们把它留给项目来决定它们如何放置。我们不需要做任何其他事情，只需要给它一个 display: flex;

现在，我们可以使用网格系统实现同样的结果--但让我在这里告诉你其中的区别。在这个例子中，我将使用Bootstrap网格系统来创建我们的行和列。

这是我们的HTML

   Home