Flexbox还是Grid—选择最佳方案的关键策略

热门技术勘探工
124 阅读6分钟

Flexbox or Grid? Key Strategies for Choosing the Best Option

随着CSS网格布局的广泛实施，一个问题在前端Web开发界变得非常突出。Flexbox还有用吗？

现在，网格和Flexbox一样被所有主要浏览器所支持。但问题的答案是，是的，Flexbox仍然是CSS的一个重要组成部分。

在本文中，我将提出一些方法，帮助你在处理网页开发项目时决定何时使用Flexbox，何时使用Grid。

什么是Flexbox？

CSS Flexbox布局，简称Flexbox，在2012年左右开始出现在浏览器中。由于多年来一直使用浮动和第三方布局库，网页设计者和开发者对这个新的CSS模块充满了热情，尽管他们花了一点时间来适应其陌生的语法并完全掌握其内部工作原理。

在一个CSS文档中，可以这样定义一个柔性容器。.container { display: flex; }.

可以向任何方向布局，并且可以 "弯曲 "它们的尺寸，要么增长以填补未使用的空间，要么缩小以避免溢出父代。子项的水平和垂直排列都可以很容易地被操纵。这些盒子的嵌套（水平在垂直内，或垂直在水平内）可以用来建立二维的布局。

自从引入Flexbox后，诸如创建等长的列而不考虑其内容量、将元素在水平和垂直方向上居中、沿水平线排列和间隔导航链接等，都变得更加容易。

将列包裹在一个灵活的容器内，就足以实现等长的列。看看吧!

请看CodePen上的Pen
Flexbox-Equal-Columnsby SitePoint（@SitePoint）
。

至于水平和垂直方向的内容居中，只需在柔性容器中添加以下几行代码即可。

.hero {
  display: flex;
  flex-direction: column;
  /* centers vertically */
  justify-content: center;
  /* centers horizontally */
  align-items: center;
}

这里有一个演示。

请参阅CodePen上SitePoint（@SitePoint）的Pen
centering-flexbox。

最后，将一堆链接排成一排从未如此简单。

.links-container {
  display: flex;
  /*  shortcut to specify direction (horizontal) and wrapping behavior */
  flex-flow: row wrap;
  gap: 1rem;
}

你可以在CodePen上看到这方面的演示。

为了熟悉Flexbox的工作原理，并作为其属性和数值的快速参考，请看下面的链接。

以上就是Flexbox的简要介绍。现在让我们继续看一下网格。

什么是CSS网格？

2017年3月，CSS网格布局开始得到广泛的浏览器支持。根据网格规范，网格布局是 --

一种新的CSS布局模型，具有强大的能力来控制盒子及其内容的大小和定位。

有了网格，在网络上构建各种强大的布局的能力大大增强，以至于CSS专家和著名的网格倡导者Jen Simmons一直在鼓励网页设计师和开发人员在他们的布局中勇于冒险，突破过度使用的普通模式。(请看她的YouTube视频*Modern Layouts: Getting Out of Our Ruts*）。

由于有了Grid，我们可以很容易地创建一个复杂的布局，而这个布局根本不需要使用太多的代码，不需要浮动或其他黑客，而且不会引起任何头痛。

这里有一个CodePen的演示。(注意，Grid只在较宽的屏幕尺寸上起作用）。

在该演示中，为了在全尺寸下为整个页面创建基本的网格，我把我的容器div ，然后把它分成了列和行。

.container {
  display: grid; 
  grid-template-columns: 1fr 1.2fr 1.5fr;
  grid-template-rows:  1fr 4fr 3fr 2fr;
}

fr 单位是CSS Grid Layout引入的一个新的灵活测量单位。fr 部分是分数的简称，因为它代表了网格容器中可用空间的一个分数。使用fr ，而不是像px 这样的固定单位，意味着让浏览器来计算创建布局所需的数学运算，我认为这在大多数情况下是比较好的。

一旦网格准备好了，就可以开始把子元素放在里面了。有几种不同的方法可以做到这一点。在上面的演示中，我使用了网格线号和grid-area属性，这只需一行代码就能完成工作。例如，这里的代码是用来布置我的主要内容的。

.main {
  /* row start, row end, col start col end */
  grid-area: 1 / 1 / 3 / 3;
}

一旦所有的部分都在网格内就位，这里就是它的样子。

Page layout using CSS Grid

关于更多的细节和方便的小抄，请查看下面的链接。

网格或Flexbox。 我应该选择哪一个？

在了解了Grid和Flexbox的功能之后，现在是时候回到最初的问题上了。在什么情况下，一个比另一个好？

几年前，Chris Coyier在Twitter上发起了一个话题，基本上也是问这个问题。

对于那些对CSS grid和flexbox都有了解的人，你最喜欢用什么方式来解释两者的区别？

- Chris Coyier (@chriscoyier)January 25, 2019

对于那些对CSS grid和flexbox都有了解的人来说，你最喜欢用什么方式来解释两者的区别？

正如你所期望的那样，确实出现了许多有趣的答案，我将其中大部分答案归纳为以下几个标题。

页面布局的网格和组件的Flexbox

"页面布局用网格，组件用Flexbox "也许是人们对这个问题最直观的回答。事实上，在为整个页面布局编码时，我对使用哪种技术不会有任何疑问。你可以用Flexbox做页面布局--事实上，在Grid出现之前，我们大多数人都是这么做的。但是，用Flexbox创建网格，从来没有感觉到真正的 "灵活"，而且也从来没有遇到过一些令人头痛的问题。而Grid则是为此而生。然而，问题是：它是否只是为此而生？

事实证明，在创建放置在宏观、页级部分的组件时，Grid也很出色。例如，在下面的演示中，表单是一个网格容器，其元素是用CSS网格属性布置的。

参见CodePen上SitePoint（@SitePoint）
的Pen
form-with-css-grid。

尽管电子邮件和密码标签的长度不同，但表单字段在水平和垂直方向上都排得很好。这就是Grid的神奇之处：它默认水平和垂直地排列网页元素，无论是页面级元素还是组件级元素。网格所具有的这种特殊性是决定何时使用Flexbox或Grid的一个有力因素。

继续阅读《Flexbox还是Grid？选择最佳方案的关键策略》，载于SitePoint。

avatar
文章
阅读
粉丝