CSS网格与Flexbox：实用指南
使用CSS网格和FlexBox，CSS最终提供了两个强大的布局系统，这些系统大规模提高了您定义布局的方式。经过几十年来使用表格，绝对定位，浮点和其他平庸的布局系统，Flexbox和Grid在一起为网页的复杂布局，灵活性清理布局代码，使其更容易理解。最终，它允许您专注于构建伟大的用户体验，而不是制作基本布局工作。
然而，为什么会有两种布局系统，它们的目的是什么?什么时候应该使用Flexbox vs. Grid?让我们简要回顾一下这两种布局系统，然后讨论它们的用例和何时使用它们。
最后更新于11月2020年11月
本教程教您如何使用新的CSS3 FlexBox框模型更有效地创建响应Web布局！|由彼得·Sommerhoff
探索课程Flexbox快速指南
这Flexbox规范自2009年以来已进化，目前是W3C（万维网联盟）的候选建议。所有现代浏览器都已根据Caniuse.com支持它：
因此，除非您有要求支持特定的旧浏览器版本，否则FlexBox绝对可以在生产中使用。
FlexBox允许您轻松创建内容焦点的线性布局。解释这意味着什么，区分之间的方法是有用的柔性容器这适用于灵活的布局系统和Flex项目包含在其中。换句话说，父Flex容器包含许多子Flex项目：
有一旦您完成此操作，FlexBox会为您提供强大的属性，可控制此Flex容器中的布局。
对于此和以下示例，假设我们有这个超级简单的HTML标记：
项目＃1 项目＃2 项目＃3 项目＃4
要在容器上激活FlexBox，只需添加：
.flex {显示：Flex;}
就是这样。有了这个，您可以应用Flex布局系统的所有强大功能。
改变主轴方向
让我们来看看一些实际的例子，你可以通过Flexbox实现不同的布局。
例如，您可以使用Flex-Direction更改布局的主轴：
弯曲方向：行（默认）
这是默认值，因此，与上述相同的布局。它类似于带有浮动的容器：左但是当然，与Flexbox更多样化。
弯曲方向：列
在列布局中，它将元素从上到下一行对齐。每个Flex项目将自动占用整个宽度。
对齐项目
除了基本布局方向外，Flexbox允许您精细控制Flex容器内的所有Flex项目的对齐。其中，有徽章内容属性，可让您控制沿主轴的元素的间距：
证明 - 内容：Flex-start（默认）
默认情况下，所有伸缩项目都朝向主轴的起点，因此在本例中，是向左对齐。如果您设置了flexdirection: row-reverse，则主轴的起点将在右侧。
证明 - 内容：Flex-End
这里，所有Flex项目朝向主轴的末端对齐。对于弯曲方向：行反向，这将是左侧，并且对于弯曲方向：列，它将是底部。了解Flex属性之间的这些交互非常重要。幸运的是，他们非常合乎逻辑和直观。
证明 - 内容：中心
正如您所期望的那样，通过将此属性设置为Center，所有项目与主轴的中心对齐。
证明 - 内容：空间
使用空间，您可以均可沿着所有Flex项目之间的主轴分配可用空间。它还包括在开始和结束时的空格。
证明 - 内容：空间 - 之间
几乎像空间 - 但不包括主轴的开始和结尾处的空间。
包装物品
我想要覆盖的最后一个例子是包装项目，因为这将导致我们到CSS网格。
简而言之，您可以告诉您的Flex容器将其元素包装成额外的行（或列）将Flex项目打破，否则溢出。这不是默认行为：
Flex-Wrap：nowrap（默认）
在这里，白色边框表示父Flex容器Div.flex。如您所见，默认行为是让Flex项目溢出其容器。在这些情况下，您可能希望减少物品数量或使用Flex Wrap：
Flex-Wrap：包裹
使用此一行代码，容器将溢出到附加行（或列）的项目包裹物品。
正如您所看到的，这看起来像一个很好的网格。但是，FlexBox不会在网格的布局上给您微粒控制。它真的代表了一个线性的一维设计。所有它正在做的只是将溢出的元素倒入额外的线条。
另一种思考的方法是：如果有更多空间，则Flex容器将返回其所需的单行布局。这是与CSS网格的根本差异。
这只是Flexbox的一些基本功能的选择。此处显示的所有示例都使用工作的属性柔性容器，但很多控制Flex项目也是。
通过所有Flexbox术语，功能和用例，请查看逐步指南，请退房我完成课程：
为了获得课程和Flexbox的味道，观看本课程预览视频系列：
CSS Grid快速指南
CSS网格布局系统是W3C的更新候选推荐，但已经具有大约95％的浏览器支持，同时：
您可以将CSS网格视为CSS Flexbox的大姐姐。作为CSS的第一种适当的基于网格的布局机制，它允许您轻松且干净地实现甚至复杂的页面布局。
术语网格已经提示了它可以实现二维布局。换句话说，您可以精细控制行和您的布局列（Whereas Flexbox工作很棒，符合单行或列）：
在我们深入进入网格和Flexbox之间的差异之前，他们的不同用例以及如何在实践中将它们结合起来，让我们先查看网格布局系统的基本功能。
对于此和以下示例，请再次假设我们有这个简单的HTML标记：
现在让我们来看看一些常见的网格布局。
定义行和列
要创建一个简单的网格布局，如上面的例子，你需要定义所需的行和列的尺寸:
.grid {显示：网格;网格模板 - 行：50px 80px;网格模板列：50px 100px 50px;grid-gap: 5 px;}
这将在50px和80px中设置有两行的网格;和三列50px，100px和50px大小：
网格间隙清楚地显示每个网格细胞。顾名思义，它只是在每个网格行和列之间添加5px的间隙。
您还可以将网格模板行和网格模板列缩写为一个属性：
.grid {显示：网格;网格模板:50px 80px / 50px 100px 50px;grid-gap: 5 px;}
在这里，我们首先定义行，然后是斜杠，然后是列定义。
将物品放在网格上
通常，您希望某些网格项目跨越多行或列。这可能是浮动布局等古典方法棘手的棘手。
使用CSS网格，这是一个魅力：
/*相同的*/ .grid{显示:网格;网格模板:50px 80px / 50px 100px 50px;grid-gap: 5 px;} /*第二项应该跨越行2，列2到3 */ .grid div:n -child(2) {grid-row-start: 2;grid-row-end: 3;grid-column-start: 2;grid-column-end: 4;}
这会产生以下布局：
第二行中，第二个子
而不是在第1行和第2列中，而不是在第1行和第2列中。请注意，网格行端和网格列端是独占的。所以网格列尾：4表示网格项目将结束前第4列（第3栏末端）。
再次，我们可以总结这些属性：
.grid div：nth-child（2）{网格排：2/3;网格柱：2/4;}
如您所见，您可以在多个CSS网格属性中使用斜杠。
网格区域
一个更有个性的特征，我想提到这里是网格区域。一种网格区域是网格中的一个任意细胞矩形：
您可以基本上为网格中的区域提供名称，然后将分配元素放在这些区域中。例如，您可以在几行代码中使用标题，内容，侧边栏和页脚定义整个布局，如下所示：
#site {显示：网格;网格模板：“H H H H”80PX“C C C S”300PX“F F F F”50PX / 1FR 1FR 1FR 1FR;grid-gap: 5 px;#HOMER {网格区：H;#content {网格区域：c;#sideBar {网格区：S;#footer {网格区：F;}
我们在这里迈出了一大步，所以让我们一步一步一步。最有趣的部分是网格模板。它使用缩写语法来定义以下所有内容：
- 有三行。我们在斜杠之前通过一行代码定义了每行。
- 第一行的高度为80px。
- 第二行高度为300px。
- 第三行高度为50px。
- 有四列。我们通过网格区域名称定义了这些，例如“H H H H”。如果您想要六列，您必须使用“H H H H H H”并相应地调整其他两行。
- 每列应占用相同的空间。我们在斜杠后定义了列尺寸。在这里，我们使用特殊的FR单元来指定每列应占用可用空间的“1分”。
- 名称有四个网格面积H那C那S.， 和F。
- 查看代码中字母的定位。它们代表你的网格。例如，网格区域H将占用整个第一行。另一方面，s将只占用一个网格单元，即行2中的第4列。
- 名称是指“标题”，“内容”，“侧栏”和“页脚”。您也可以使用更长的名称;他们不一定是单个字母。
- 最后，您只需将命名的网格区域分配给元素。
- 例如，#Header应放在网格区域h中。
结果是此布局：
注意，控制不同屏幕尺寸的行为是多么容易。如果您想要一个固定大小的侧边栏，只需给该列一个固定的px值。当然，您仍然可以像往常一样使用媒体查询来实现彻底的响应行为。
这篇文章仅划伤了CSS网格提供的表面的表面。如果您想实际概述所有功能以及大量的实践活动，看看我的完整的CSS网格课程：
再次，您可以观看我的免费视频系列，以获得课程和CSS网格的味道：
CSS网格与Flexbox
现在你有一个坚实的概述窗口和CSS网格，问题仍然存在：你应该什么时候使用？网格是否使FlexBox冗余？他们的用例是什么？
你已经知道他们最根本的差异：
- FlexBox用于线性，1D布局
- 网格用于基于网格的2D布局
标签Atkins，W3C规格的贡献者之一，在这个www风格的电子邮件线程中说得很好回来于2013年（突出我自己）：
FlexBox是一维布局- 如果它们被连接在一起，则需要在直线（或虚线）中所需的任何东西。
网格用于二维布局。它可以用作低功耗的Flexbox替代品（我们试图确保单列/行网格与FlexBox非常类似，但这不使用其全功率。
FlexBox适用于许多布局，以及大量的“页面组件”元素，因为大多数都是基本线性的。网格适用于整体页面布局以及在其设计中没有线性的复杂页面组件。
这两者可以任意组成，所以一旦它们都被广泛支持，我认为大多数页面将由外网组成，用于整体布局，为组件的嵌套Flexboxes和网格的混合页面，最后块/内联/表布局在页面的“叶子”，其中文本和内容直播。
简而言之，网格和Flexbox的一个地方。
实际上，您应该合并两者都是为了构建整个页面布局，从整个网格布局到直线或非线性复合组件，进一步下降到简单的块或内联元素。
用例
让我们通过查看一些混凝土用例，大致自上而下：
- “我想贯彻我的整个网站的线框布局。”
- 使用CSS网格为此2D布局。
- 考虑使用网格区域进行可读代码，可将主站点组件分配给网格区域。
- “我想精细控制物品的对齐。”
- 使用CSS FlexBox此通常为1D布局。它允许您精细控制Flex项目对齐，理由，大小，订单，总体方向和占用剩余空间的策略。
- “我想为我的页面组件执行布局。”
- 如果组件是线性的，请使用Flexbox。
- 如果组件具有类似网格的布局，请使用CSS网格。您可以为其子组件使用FlexBox（或基于网格的布局）。
- “我想拥有重叠的物品。”
- 使用CSS网格，因为它允许您重叠行和列项目跨度。
总结
与以前的方法相比，Flexbox和CSS网格都会大量提高您定义布局的方式。均享受宽大的浏览器支持约为95％。
网格最适合二维布局，您需要正确控制行和列。FlexBox非常适合1维线性布局。