前言
虽然自己也做前端很多年了，但是flex的属性，用来用去也就一直用那几个属性，align-items, flex-direction,justify-content，用的也很顺手，也能解决80%的问题，看似并无不妥呀。
其他的几个属性呢？好吧，知道名字，我认识他，但是干什么用的？这个难不倒我，我能查到阮一峰老师的文章，我知道如果有人问我怎么用的，我知道去哪查了回答他，只要阮一峰老师的博客不关，我能一直查的到，哈哈哈。这就像古代两个武侠高手过招，别人用六脉神剑了，你说等一下，你这招式我见过，等我查一查资料，看怎么破解，别人会停手么？？？？
所以是时候总结一下了
还有一个问题我注意到，就是很多人不知道自己设置的这个属性，什么时候会生效？比如flex-shrink默认为1，那你知道他什么时候会起作用么？
Flex布局
首先先提一嘴
为什么要有flex布局？(这个面试经常问哈，画个重点)
- flex布局其实是为了动态响应，以前我们主要适配pc端，后来随着各种型号的手机的加入适配变的越来越困难， 如果要进行多列布局，使用flex进行响应式很方便。 如果使用了蓝湖等设计工具，这里千万不要一上来就各种复制粘贴上面的宽高，多考虑一下响应式布局，你可以建立一个思维方式，一看见多列布局，那么你的第一反应就是flex
- flex非常适合垂直居中布局，这也是我们非常常用的，要考虑到传统的postion，float等他们实现垂直居中的缺点，可能position实现个垂直居中，还要position+transform才能实现
display:flex和display:inline-flex有什么区别？
- display: flex 块级元素：当你将一个元素的display属性设置为
flex，该元素表现为块级元素。这意味着它会在页面上占据一整行的空间，即使其内容并不需要这么多空间。 - display: inline-flex 内联元素：使用
inline-flex，元素则表现为内联元素。这意味着它不会占据一整行空间，而是仅占据其内容所需的空间。
当父元素被设置为display:flex的时候，子元素的默认值是多少？flex:1 是哪几个值的缩写？
- 当父元素被设置为
display:flex的时候，那么子元素为flex: 0 1 auto; flex:1为flex-grow:1,flex-shrink:1,flex-basis:auto的缩写
align-content
这个元素使设置到父盒子的
The align-content property only applies to multi-line flex containers, and aligns the flex lines within the flex container when there is extra space in the cross-axis.
align-content属性仅仅适用于多行的flex容器，当在flex容器内的交叉轴有剩余的空间的时候align-content会进行flex线的对其
使用场景
- 必须是多行的flex容器，也就是说必须要设置
flex-wrap: wrap, 否则设置align-content无效
经常会遇到的问题？
flex-wrap: wrap 之后元素上下间距过大怎么解决？
-
原因： 当元素设置了
flex-wrap:wrap之后会有一个默认属性align-content: stretch。元素被拉伸以适应容器。 -
解决方法： 添加：
align-content：flex-start; 使元素位于容器的开头。
flex-grow 和 flex-shrink
这两个元素都是设置到子元素的
flex-grow和flex-shrink我们使用的时候主要是写数字，那么我们就来讨论一下数字对flex-grow和flex-shrink的确切意义
flex-grow
什么时候生效？
当flex容器的空间大于所有子元素的宽度总和的时候，这个时候flex-grow就会生效。
此时就会把剩余空间进行分配，这个时候，谁的flex-grow值越大，那么谁变大的越多。但是需要注意的是，flex-grow默认值是为0的
- 0 - 这个元素将放弃伸展的机会，如果有可用的空间的话。
- 1 - 这个元素将扩展，如果有可用的空间的话。
- 2或者更多 - 这个元素将看一下啊其他兄弟元素的flex-grow的值，然后做一下一下运算，例如： 如果div_1 == 1, div_2==2, 那么div_1 将有整个宽度的1/3， div_2 将有整个宽度的2/3。
flex-shrink
什么时候生效
当flex容器的空间小于所有子元素的宽度总和的时候，这个时候flex-shrink就会生效。
此时就会缩小子元素盒子，谁的flex-shrink值越大，那么谁缩小的越多。
- 0 - 这个元素将放弃缩小的机会，如果父盒子已经放不下子盒子的时候。
- 1 - 这个元素将缩小，如果没有足够的空间的时候
- 2或者更多，和flex-grow相同， 这个元素将归纳所有的兄弟元素 flex-shrink的值，然后做数学运算进行缩小
那你知道flex的各个数值都是什么意思么？
align-self
这个元素设置到子元素的
这个属性理解起来也很简单，只要搞清楚他和align-items的区别就可以了
align-self和align-items类似，默认值为auto，表示继承align-items的属性。align-self作用单个元素上, 如果设置以后会覆盖align-items的值。align-items设置在容器上，作用所有的项目。
总结
align-content主要应用于多行flex容器, 也就是必须要设置flex-wrap: 'wrap', 否则align-content无效flex-grow和flex-shrink主要搞懂各个数值代表的意义，0表示都失效，1表示都生效。align-self主要搞懂和align-items的区别，默认值是什么，如果设置值的话，会覆盖align-items的值
