弹性布局flex知识点和常用点

弹性容器属性：

justify-content:弹性元素们在主轴上的对齐方式
align-items:弹性元素们在侧轴上的对齐方式
flex-wrap:决定弹性元素溢出容器时的换行方式
align-content:用于修改换行后（设置了flex-wrap），在多行情况下，行与行之间的对齐方式。

弹性子元素属性：

order:规定了弹性子元素的排列。从小到大排列，可以通过改变个别元素order的大小来改变其在容器中的排列情况。
align-self:用于单独设置自身在侧轴的对齐方式。

flex

flex:指定弹性子元素如何分配空间（flex-grow flex-shrink flex- basis）
flex-grow: 值只能为数字，不能为单位和百分数
flex-shrink：值只能为数字，不能为单位和百分数
flex- basis： 值不能为数字，可以为单位和百分数
1.如果为3个值的话，必须2个是数字，一个是单位或者百分数，顺序可以改变
2.匹配优先级：flex-grow > flex-shrink > flex- basis
3.比如：
flex:1 === 1,1,0%
flex:auto === 1,1,auto
flex:none === 0,0,auto
flex:0% === 1,1,0%
flex:1,2 === 1,2,0%

flex-basis

flex-basis:属性用于设置或检索弹性盒伸缩基准值。
可以设置大小，也可以设置百分比（参考对象为容器）。默认值为auto,即子元素width的大小。子元素在同时设置了width和flex-basis时，会以flex-basis的值为宽度和换行标准。当flex-basis的值为auto时，容器的换行和宽度参考标准会变为width的值。

flex-grow

flex-grow: 定义项目的放大比例：各个子元素默认为0；当有剩余空间时，不进行分配。如果设置个别子元素为1或以上，则该子元素分配完剩余空间。元素之间还可以通过设置flex-grow的大小来按照比例进行剩余空间的分配。当没有剩余空间且不能换行时，该属性失效。

flex-shrink

flex-shrink: 定义了项目的缩小比例：各个子元素默认值为1，当空间不足且不能换行时，各个元素会等比例缩小，如果设置个别元素的值为0，则该元素不缩小，其他几个元素会等比例缩小。如果个别元素设置大于1的数，则按照一定的比例再缩小，其他元素按照比例分配空间。

常见问题

align-items，子元素为单行或者多行都生效，注意：在多行情况下设置属性，会将空间平分给多行，然后在各行中进行对齐方式。比如现在容器中有两行子元素，如果设置align-items:center，会将空间平均分给两行，并且在各行中进行居中对齐。不管容器是否设置固定高度。

align-content：只在多行情况下生效，并且需要父容器高度固定且有多余空间才生效。设置属性值时都是把容器当成一个整体来进行排序对齐的。

有一个特殊情况：即在容器高度固定时，子元素只有一行的情况下，且设置换行flex-wrap：wrap，则align-content属性也会生效。

flex布局 想要控制元素之间的距离时，尽量用margin:auto；不要用具体数字
多个元素时设置"margin"值为"auto"值，自动获取弹性容器中剩余的空间。会在父元素中完全居中。

设置display：flex布局 布局和文字就不会在缩小窗口时候因为挤压而换行乱飘动了，因为flex布局默认不换行 flex-wrap：nowrap。

块元素垂直居中问题可以采用 flex 解决。

而行内元素垂直居中问题解决如下：

1）单行

该元素 css 属性 line-height 的值与该元素的父级元素 css 属性 height 一致即可。

2）多行

设置该元素 css 属性：display: table-cell; vertical-align: middle;，还需设置该元素的父级元素 css 属性：display: table;。