本篇解释了有关flexbox的知识点内容，重点介绍父元素（flex容器）和子元素（flex元素）的不同及可能的属性。
背景
Flexbox Layout弹性布局模块的目的在于提供一种更有效的方式来布置、调整和页面元素在容器中分配空间，即使是未知大小或者动态的，所以称为flex。
flex布局背后的主要思想是让元素在容器内改变宽高和顺序，以更好的填充空间（主要是为了自适应）。flex布局与方向无关，不像常规布局（基于垂直和水平块布局），缺乏灵活性，无法适应大型项目和复杂的应用程序（特别是改变方向、调整大小、拉伸、缩小等方面）。
- 注意：Flexbox布局最适合组件和小规模的布局，Grid更适合大规模的布局。
知识点
如图，父元素容器，内部包含的是子元素
- display
这里定义了一个flex容器，是否内联取决于给定的值，为所有子元素提供灵活的自适应，css列对flex容器没有影响
- order
默认按顺序排列
- flex-direction
建立主轴，从而定义Flex项目放置在Flex容器中的方向
- row（默认）：从左到右ltr; 从右到左rtl
- row-reverse：从右到左ltr; 从左到右rtl
- column：同样row但从上到下
- column-reverse：同样row-reverse但从下到上
- flex-grow
它规定了元素应占用的Flex容器内可用空间的大小。如果所有项都flex-grow设置为1，则容器中的剩余空间将平均分配给所有子项。如果其中一个孩子的值为2，则剩余空间占用的空间是其他孩子的两倍（或者至少会尝试），负数无效
- flex-wrap
默认情况下，flex项目都会尝试一行。你可以更改它并允许元素根据需要使用此属性进行换行。
- nowrap （默认值）：所有弹性项目都在一行上
- wrap：flex项目将从上到下包裹到多行。
- wrap-reverse：flex项目将从下到上包裹多行
- flex-shrink
定义了Flex元素在必要时缩小的能力，负数无效
- flex-flow（适用于：parent flex容器元素）
这是一个简写flex-direction和flex-wrap属性，它们共同定义了flex容器的主轴和交叉轴。默认是row nowrap
- flex-basis
定义了在分配剩余空间之前元素的默认大小。它可以是长度（例如20％，5rem等）或关键字；如果设置为0，则不考虑内容周围的额外空间。如果设置为auto，则根据其flex-grow值分配额外空间。
- justify-content
定义了沿主轴的对齐。当线路上的所有弹性项目都不灵活，或者灵活但已达到其最大尺寸时，它有助于分配剩余的额外空闲空间。当它们溢出线时，它还对对齐施加一些控制。
- flex-start （默认值）：元素朝起始行打包
- flex-end：元素被打包到最后一行
- center：元素沿着线居中
- space-between：元素均匀分布在线上; 第一项是在起始行，最后一项是在结束行
- space-around：元素均匀分布在线条周围，空间相等。请注意，视觉上空间不相等，因为所有元素在两侧都有相等的空间。第一个元素将在容器边缘上有一个空间单位，但在下一个元素之间有两个单位的空间，因为下一个元素有自己适用的间距。
- space-evenly：元素的分布以便任何两个项目之间的间距（和边缘的空间）相等。
- flex
它是flex-grow, flex-shrink和flex-basis组合。第二个和第三个参数（flex-shrink和flex-basis）是可选的。默认是0 1 auto。建议使用此属性
- align-self
允许align-items为各个弹性项覆盖默认对齐（或指定的对齐）
注意：float，clear和vertical-align对弹性项目没有影响
- align-items
定义了如何沿当前行的横轴布置弹性项目的默认行为。可以将其视为justify-content横轴的版本（垂直于主轴）
- stretch （默认）：拉伸以填充容器（仍然尊重最小宽度/最大宽度）
- flex-start：元素的交叉开始边距边缘放置在交叉起始线上
- flex-end：元素的跨端边缘位于交叉线上
- center：元素以横轴为中心
- baseline：元素对齐，例如其基线对齐
- align-content
当横轴上有额外空间时，这会对齐flex容器的线条，类似于主轴justify-content内各元素的对齐方式。
注意：当只有一行弹性元素时，此属性不起作用。
- flex-start：行打包到容器的开头
- flex-end：行打包到容器的末尾
- center：行包装到容器的中心
- space-between：线条均匀分布; 第一行是容器的开头，而最后一行是在容器的最后
- space-around：线条均匀分布，每条线周围的空间相等
- stretch （默认值）：线条拉伸以占用剩余空间
兼容性
总结一下
本篇大致通过图文的形式介绍了flex布局的基本知识点，可能不是很全面，要想学习更多关于flex布局的知识，可以参考https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex，如果觉得本文对你有帮助，请麻烦点个关注吧！谢谢！