1.父元素设置成dispaly:flex。子元素并不会跟着改变display属性为flex
2.align-content的优先级要align-item的要高，即设置了align-content之后，align会失效。但是为什么还会存在align-item呢？网上大佬们的解释是align-content只能作用于多根轴线，这里就比较模糊了，因为我的子项目是一行，但是在容器上以下设置也是会起作用
flex-wrap: wrap
align-content: center;
根据官方定义：
- align-items：
-
- 作用对象：弹性盒子容器(flex containers)；
- 描述：该属性可以控制弹性容器中成员在当前行内的对齐方式。当成员设置了align-self 属性时，父容器的 align-items 值则不再对它生效；
- w3c标准原文：链接
- align-content：
-
- 作用对象：多行弹性盒子容器(multi-line flex containers)；
- 描述：当弹性容器在正交轴方向还存在空白时，该属性可以控制其中所有行的对齐方式。Note：该属性无法作用于单行 (flex-wrap: no-wrap) 弹性盒子；
- w3c标准原文：链接
所以重点在flex-wrap: wrap，只有存在这个属性的时候，align-content才会生效。
3.子事项同样可以设置为display：flex，成为容器，但是作为子事项依然遵循它的容器的排列规则
4.对于子事项上的属性大体可分为3类
-
项目大小：就是flex的缩写属性，
flex属性是flex-grow,flex-shrink和flex-basis的简写，默认值为0 1 auto。后两个属性可选。变大，缩小，以及设置相应的准确宽度或高度（1，0） -
项目顺序：order：数值越小，排列越靠前，默认为0。
-
独立的对齐方式：align-self，属性允许单个项目有与其他项目不一样的对齐方式，可覆盖
align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
align-self: auto | flex-start | flex-end | center | baseline | stretch;
5.对于容器：
- 规定主轴的方向：flex-direction
flex-direction: row（默认值） | row-reverse | column | column-reverse;
- 是否允许多行展示：flex-wrap 如果是默认值，就算子项目在一行被挤变形，也还是要放在一行中，俗称：愣头青
nowrap（默认值） | wrap | wrap-reverse;
-
flex-flow 上面两个的缩写
-
对齐方式：
-
主轴的对齐方式：justify-content
flex-start（默认值）：与主轴的起点对齐flex-end：与主轴的终点对齐。center： 居中space-between：与主轴轴两端对齐，轴线之间的间隔平均分布space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
-
交叉轴的对齐方式： align-items align-content
flex-start：与交叉轴的起点对齐。flex-end：与交叉轴的终点对齐。center：与交叉轴的中点对齐。space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。stretch（默认值）：轴线占满整个交叉轴。
-
以上参考内容链接：www.ruanyifeng.com/blog/2015/0… zhuanlan.zhihu.com/p/87146411
