本篇解释了有关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，如果觉得本文对你有帮助，请麻烦点个关注吧！谢谢！