flex属性_flex 高度对齐，三年老前端经验面经

父元素属性

1. display:flex;(定义了一个flex容器)
2. flex-direction(决定主轴的方向)
3. row（横向 默认值，从左到右）
4. row-reverse（横向 反转 从右到左）
5. column（竖直 从上到下）
6. column-reverse（竖直 从下到上）
7. flex-wrap（是否换行）
8. nowrap（默认值 不换行）
9. wrap（换行）
10. wrap-reverse（倒叙换行 第一排在下面）
11. flex-flow（是flex-direction和flex-wrap的合并简写 row wrap）
12. justify-content（设置主轴方向上的对齐方式 ）
13. flex-start（默认值、弹性盒子的元素回向起始位置对齐）
14. flex-end（弹性盒子将会向结束位置对齐）
15. center（弹性盒子回向中间对齐，该行的子元素也会中间对齐）
16. space-between（先贴边，再均匀平分剩余空间）
17. space-around（弹性盒子元素会平均的分布在行内，两端保留子元素和子元素之间的间距的一半）
18. space-evenly可以使每个元素之间和元素距离边距的距离都相等
19. align-items （设置弹性盒子在垂直主轴元素的对齐方式）
20. flex-start（垂直于主轴开始位置）
21. flex-end（垂直于主轴的结束位置）
22. center（垂直于主轴的中间位置）
23. baseline（）
24. stretch（当子盒子没有设置高度时，会拉伸的和父元素一样高）
25. algin-content（设置弹性盒子侧轴的对齐方式 在换行的情况下生效 适用于多行侧轴的排列）
26. flex-start（垂直主轴开始对齐）
27. flex-end（垂直主轴结束对齐）
28. center（垂直主轴中间对齐）
29. space-around（垂直主轴平分剩空间）
30. space-between（先贴边再平分剩余空间）
31. strenth（垂直主轴子元素未设置高度会拉伸与父元素一样高）

子元素的属性

1. order（默认情况下是正常排列，order值越小越靠前，还可以是负数）
2. flex-grow（子元素的占比 类似于flex：1，根据弹性盒子元素所设置的拓展因子作为比率来分配剩余空间）
3. flex-shrink（子元素总宽度大于父元素，子元素跟根据flex-shrink:0 1 2按比率进行搜索，根据弹性盒子设置的收缩因子收缩空间）

最后

今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！

可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。