我继续发表Rachel Andrew关于Flexbox CSS技术功能的文章
该系列中的先前文章：
- 创建Flexbox容器时会发生什么 。
- 您需要了解有关Flexbox中对齐的所有信息 。
- Flexbox：这个柔性盒有多大？ 。
我们在Smashing Magazine上展示了Flexbox系列的结尾。 在这篇文章中，鉴于我们现在有了CSS Grid Layout ，我将花一些时间思考使用Flexbox的实际选择是什么，我将就何时以及如何使用什么提供一些建议。
本系列的较早版本
如果您还没有选择其他文章，那么本质上这是最后一篇文章，因此请首先查看它们。 我首先描述了创建flex容器时发生的情况 。 在本系列的第二篇文章中，我研究了对齐方式以及如何沿flexbox中的主轴和横向轴对齐元素。 在第三篇文章中，我将介绍Flexbox的大小调整工作原理以及浏览器如何确定flex的大小。 既然我们已经完全了解Flexbox的工作原理，那么我们就可以回想一下最好的用例。
我应该使用网格还是Flexbox？
这仍然是在布局设计培训中仍被问到的主要问题，总的来说，我相信随着人们越来越习惯使用新方法，这成为一个您不需要经常问自己的问题。 随着经验的增长，您将了解要使用哪种布局方法。
但是，如果您刚刚开始理解此思想，请记住CSS Grid Layout和Flexbox都是CSS。 如果指定display: grid或display: flex ，则通常使用更多的共同点而不是不同点。 Grid和Flexbox都使用Box Alignment规范中的属性。 两者都基于“ 内部和外部调整CSS”规范中详细描述的概念。 。
询问您的设计应使用Grid还是Flexbox就像询问您的设计应使用字体大小还是颜色。 如果需要，您可能应该同时使用两者。 如果您使用的是错误的，没有人会追逐您。
因此，我们不在Vue.js和React ， Bootstrap或Foundation之间进行选择。 我们使用CSS来完成布局，并且需要使用对我们正在设计的特定部分最有意义的CSS粒子。 复查每个组件并确定最适合它的组件，或哪个元素组合最适合它。
它可以是Grid ，也可以是Flexbox 。 这可以是一个外部Grid容器，其中某些网格元素变得灵活或可逆。 如果项目需要，则嵌套flex元素没有问题。
Flexbox到底是什么？
Flexbox规范描述了布局方法，如下所示：
“ Flex布局看起来与块布局类似。它缺乏许多可用于块布局的复杂文本或面向文档的属性，例如浮点数和列 。相反，它获得了用于空间分配和内容对齐的简单而强大的工具，长期需要哪些Web应用程序和复杂的网页。”
我认为这里的关键词是“空间分配和内容对齐”。 Flexbox就是要拿一堆物品（大小不同）并将它们放入容器中（容器本身可以是可变大小）。 Flexbox很软。 他尝试为我们的元素创建最佳布局，为较大的元素提供更多的空间，为较小的元素提供更少的空间，从而保持内容的可读性。
如果人们发现Flexbox复杂而神秘，那通常是因为他们试图将Flexbox用作网格系统 ，试图重新获得对空间大小和分布的控制。 当您执行此操作时， Flexbox可能看起来很奇怪且复杂，因为您在与Flexbox的功能（即 具有其固有的灵活性。
因此，非常不适合于灵活布局的模板就是那些我们对每个元素的完美尺寸都不太感兴趣的模板。 我们只希望这些元素彼此相邻出现。
也有一些您想换行的模式，但是您不需要严格的网格。 如果我们以原始的Grid vs Flexbox为例 ，在网格中使用重复自动填充语法，然后在行包装Flex容器中使用，则我们将立即看到这两种方法之间的区别。
在“ 网格”示例中， 网格元素按行和列排列。 轨道的列数更改时（取决于空间），元素将始终转到下一个可用的网格单元。 实际上，如果存在其他空单元格，则无法请求网格元素包围轨道以填充自动流场景。
在flex示例中，结果元素分隔了它们之间的剩余空间，因此我们不使用水平和垂直对齐。
如果将flex-basis设置为auto ，并且增加了任何flex-elements，那么其余的flex-elements也将提供额外的空间，以使行与行之间的对齐方式可以不同。
这是一个非常生动的示例，说明了我们希望在Grid Layout上使用Flexbox的位置。 如果我们要包装元素，但要逐行占用它们所需的空间。 这与网格有很大的不同。 这样的模板可以是一组标签（您希望同时显示一个或两个单词以及一组元素），这些标签占用了您所需的空间，并且没有严格地插入严格的网格中。
目前， Flexbox还是将元素在容器内垂直和水平居中的最佳方法。
将来（如果浏览器支持灵活布局之外的Box Alignment属性），我们可以在不向容器添加display：flex的情况下做到这一点。 但是，目前，您所需要做的就是增加一条CSS行，这不是问题。
Flexbox在小型一维组件上表现出色。 表单字段，图标或其他信息的集合可以轻松地排列，并且可以灵活设置，而不必仔细调整每个元素的大小。
您还可以在需要将内容带到容器底部以防止其弹出的情况下选择Flexbox 。 在下面的示例中，我使容器成为flex容器，将内容显示为一列，然后让中间部分增长，将页脚推向组件。
在开发过程中，我发现Flexbox可用于许多小任务，正确执行对齐并在项目之间分配空间。 当然，您可以将一维网格容器用于其中一些任务，而不必担心您决定做什么。
但是，我认为在需要添加我在设计中未曾期望的其他元素的情况下， Flexbox将是最好的。 例如，如果我有一个使用Grid的导航组件，那么我将为所有元素创建足够的轨道，因为如果元素“太多”，我不希望创建新行。 使用flexbox足够长的时间后，我将使用flex-basis 0（或auto ）允许元素灵活，然后元素本身将新的同伴放入该行中，从而为其释放空间。
什么时候不应该使用Flexbox？
我们考虑了一些考虑因素，我认为您应该首选Flexbox而不是Grid布局，因此现在我们可以看看Flexbox可能不是最佳选择的一些地方。 我们已经看过我们的Flexbox与网格示例，其中元素水平和垂直对齐，并与逐行占据空间的元素对齐。 而这种差异是首先要考虑的。
网格示例具有二维布局。 同时按行和列布局。
示例Flexbox是一维布局。 我们打包了折线，但在空间中的放置是逐行进行的。 每行基本上在Flex方向上充当新的Flex容器。
因此，如果您的组件需要二维布局，则最好使用Grid而不是Flexbox 。 无论是大还是小组件都没有关系。 如果您从本文中吸取一件事，请从脑海中删除一个想法，出于某种原因， 网格仅用于主页的布局，而Flexbox仅用于组件。 您可以拥有一个需要二维布局的微型组件，以及一个更适合一维布局的主页结构。
网格可能被视为最佳解决方案的另一个好地方是使用宽度或将flex-basis设置为flex-elements的长度单位，以使其与另一行flex-elements对齐，或者只是以某种方式限制灵活性。 通常，这表明您确实需要二维布局方法，或者表明网格容器中的控件更适合您的布局。
例如，我们可以使我们的灵活布局看起来更像一个Grid ，从而限制了元素的灵活性。 将flex-grow设置为0并以百分比计算元素的大小，类似于我们确定浮动“网格”中元素的大小的方式。 如果您发现这样做，我建议网格布局是最好的方法，因为它是针对这种类型的布局而设计的。
综上所述，请记住，通常没有明确的正确或错误答案。 有时，您唯一可以做的就是尝试不同的方法，然后看看哪种方法最适合该组件。 请记住，您还可以在一个断点处使用Flexbox切换布局方法， 而在另一个断点处使用网格切换。
因此，curl缩！
我希望这个Flexbox系列对您有所帮助，并已展示了如何理解一些针对弹性物品的对齐和校准算法，使它们的使用变得更加轻松。
如果您有任何未解决的问题或模板在使用的布局方法方面似乎没有明显的答案，请发表评论。