在css中display: flex用于创建弹性盒子布局的属性。它能够改变子元素的宽度、高度、顺序，即使这些子元素的原始大小都是未知的，也能让它们在不同的屏幕尺寸和设备上良好显示。
容器属性
flex-direction
子元素的排列方向
row（默认值）：横向从左到右排列（左对齐），默认的排列方式。row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。column：纵向排列。column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。
justify-content
子元素在主轴上对齐方式
flex-start（默认值）：子元素在主轴的起始位置对齐。在flex-direction: row时，子元素会靠左对齐；在flex - direction: column时，子元素会靠顶部对齐。flex-end：子元素在主轴的结束位置对齐。子元素在主轴的起始位置对齐。在flex-direction: row时，子元素靠右对齐；在flex-direction: column时，子元素靠底部对齐。center：子元素在主轴上居中对齐。这是很常用的一个值，比如要将一个登录表单在页面中心水平（或垂直）对齐时可以使用。space-between：子元素在主轴上均匀分布，第一个子元素在起始位置，最后一个子元素在结束位置。在一个包含多个按钮的工具栏布局中，使用这个属性可以让按钮之间有均匀的间隔，并且两端对齐。space-around：子元素在主轴上均匀分布，每个子元素两侧都有相同的间隔。与space-between不同的是，它在第一个子元素之前和最后一个子元素之后也会有间隔。\
效果图展示：
align-items
子元素在交叉轴上对齐方式（交叉轴是与主轴垂直的轴）
stretch（默认值）：如果子元素没有设置高度（在flex - direction: row时）或者宽度（在flex - direction: column时），子元素将被拉伸以填充整个容器在交叉轴上的空间。例如，在一个垂直布局的容器中，子元素如果没有设置宽度，它们会被拉伸到和容器一样宽。flex-start：子元素在交叉轴的起始位置对齐。在水平主轴的布局中，子元素会靠顶部对齐。flex-end：子元素在交叉轴的结束位置对齐。在水平主轴的布局中，子元素会靠底部对齐。center：子元素在交叉轴上居中对齐。baseline：子元素按照它们的基线对齐。这在处理文本内容或者有内部文本基线的元素时比较有用，比如让多个文本元素的第一行文字基线对齐。
flex-wrap
子元素换行方式
nowrap（默认值）：子元素不换行，会尽量压缩在一行（或一列）中。如果容器空间不足，子元素可能会被挤压变形，有可能会溢出容器。wrap：子元素在必要时换行。容器空间不足时，子元素溢出的部分会被放置到新行。wrap-reverse：子元素在必要时反向换行。在垂直布局中，子元素会从下往上换行。
align-content
align-content 属性用于修改 flex-wrap 属性的行为。当flex-wrap设置为wrap或者wrap-reverse时，用于对齐多行（或多列）的子元素在交叉轴上的分布方式。
stretch（默认值）：多行（或多列）子元素会被拉伸以填充交叉轴上的空间。flex-start：多行（或多列）子元素在交叉轴的起始位置对齐。flex-end：多行（或多列）子元素在交叉轴的结束位置对齐。center：多行（或多列）子元素在交叉轴上居中对齐。space-between：多行（或多列）子元素在交叉轴上均匀分布，第一行（或第一列）在起始位置，最后一行（或最后一列）在结束位置。space-around：多行（或多列）子元素在交叉轴上均匀分布，每行（或每列）两侧都有相同的间隔。
flex-flow
flex-direction 和 flex-wrap 的简写
flex-grow
子元素在容器有多余空间时的伸展比例。
假设有一个容器内有三个子元素，它们的flex-grow属性分别设置为 1、2、3。当容器有多余空间时，第一个子元素会占据容器多余空间的 1/6（因为总共比例是 1+2+3=6），第二个子元素会占据 2/6，第三个子元素会占据 3/6。
flex-shrink
子元素在容器空间不足时的收缩比例。
假设有一个容器内有三个子元素，它们的flex-shrink属性分别设置为 1、2、3。当容器空间不足时，它们收缩的比例会按照这个值来计算。
例如，总共需要收缩 100px 的空间，那么第一个子元素收缩的空间为 100 * 1/(1 + 2 + 3) px，第二个子元素收缩 100 * 2/(1 + 2 + 3) px，第三个子元素收缩 100 * 3/(1 + 2 + 3) px。
flex-basis
子元素在主轴方向上的初始大小。
如果flex-basis设置为100px，子元素的初始大小为 100px，然后再根据flex-grow和flex-shrink属性来调整大小。它可以是一个长度值（如px、em等），也可以是一个百分比。
order
改变子元素的排列顺序。
默认情况下，子元素按照它们在 HTML 中的顺序排列。但是通过设置order属性，可以改变这个顺序。
例如，有三个子元素，它们的order属性分别设置为 2、1、3，那么它们在容器中的排列顺序会是第二个子元素排在最前面，然后是第一个子元素，最后是第三个子元素。
align-self
在子元素上使用，会覆盖容器的 align-items 属性。元素继承了align-items的属性
auto（默认值）：元素继承了它的父容器的align-items属性。
flex
flex属性其实是一种简写，是flex-grow，flex-shrink和flex-basis的缩写形式。 默认值为0 1 auto。
flex:auto与 1 1 auto 相同。
flex:none与 0 0 auto 相同
