前言
本文章的一些问题都是我在复习知识点的时候自己站在面试官的角度思考或是在网上查找所得。正所谓人最大的敌人就是自己，所以站在面试官的角度打败自己，也许你就吧，正在奋斗的我们。
flex布局的一些小问题
面试官： flex布局用过没，讲讲 flex 布局的属性
我： 用过，布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现，所以2009年，w3c提出了一种新的布局方案，就是flex布局，他可以完整，简便，响应式地实现各种页面布局，目前它已经得到各种浏览器的支持。
而flex布局任何一个容器都能用，连行内元素都能使用flex布局（display:inline-flex)
面试官： 我这里插一下，-webkit-flex有什么作用？
我： 额。。。，我给您举个例子吧，就比如我们现在出现的市场的手机，大部分都是都是充电接口和耳机接口一体的，而且最可气的是，当你买手机的时候，他还不送原装耳机，所以当你在上班想摸鱼看电影的时候，咳咳..口误口误，是听歌放松一下的时候，看着桌上圆孔耳机的时候，你会默默流泪地想起你需要一个耳机转接器。 webkit-flex其实也是差不多，当你想在webkit内核的浏览器上使用flex布局时，你必须加上display:-webkit-flex，这条语句
注释：戏剧性的话语，会迅速拉近你和面试官的距离
面试官： 好的，我知道了，你继续讲flex的一些属性吧！
我： 关于flex布局的属性： flex布局的属性，一般分为两大类：容器的属性，项目的属性
而容器的属性总体有6大属性：flex-direction，flex-wrap，flex-flow，justify-content， align-items，align-content
项目也有六大属性了：order,flex-grow,flex-shrink,flex-basis,flex,align-self
分析：（在这里说六大属性的时候，你说前面几个基础属性的时候你可以快速一点衔接，但是说比较重要的属性的时候你可以停顿一下，装作一时没想起，如果几秒后面试官问你：还有吗？你可以说出，如果没问，你也可以说出来，然后面试官就会对这最后一个属性印象深刻，然后他就有很大可能叫你介绍一下这个属性，这是，你就从棋子变成了棋手了） 注释：人往往会忽视太容易得到的东西，而对于很难得到的东西刻苦铭心，这是人的劣根性。 在这里，我会让“面试官”把所有的属性都问一遍，别问我为什么这么做，我只是想复习一遍flex布局
面试官： 那你给我介绍一下所有**属性呗！
我： flex-direction是决定主轴的方向，它有四个值对应四个方向，row是默认值，使主轴是水平的，而且是自西向东的，而row-reverse刚好相反，它设定的主轴是自东向西，column是从北到南，column-reverse是从南到北
我： 对于flex-wrap属性，这让我想起了大一的时候食堂吃饭的时候，我不知道那些人怎么可以那么快，每当我和室友晃悠到食堂的时候，看见那么长的队伍时，我内心是绝望的，但是有时候队伍太长了，食堂阿姨就会恍如天使般的对我们招手，叫我们另起一队。而flex-wrap也是起到这么一个作用，当一条轴线排不下的时候，如何换行。
flex有三个值nowrap是默认值，不换行，wrap换行第一行在上面，wrap-reverse换行，第一行在下面
我： flex-flow其实就是flex-direction和flex-wrap的简写形式，默认值为：row nowrap；然后后面的我刚刚上面说了，上面查去
我： justify-content属性定义了主轴上的对齐方式，有五个值
- flex-start 是左对齐
- flex-end 右对齐
- space-between是两端对齐，项目之间的间隔都相等
- space-around 每个项目两边的距离是相等的，所以项目之间的距离是项目和边框距离的两倍。
我： align-items是定义项目在交叉轴上如何对齐的，有五个值
- flex-start 是交叉轴的起点对齐
- flex-end 交叉轴的终点对齐
- center 交叉轴中点对齐
- baseline 项目的第一行文字的基线对齐
- stretch 如果项目未设置高度，或者设置的为auto，将填满整个容器的高度
我： align-content 定义了多根轴线的对齐方式
- flex-start 与交叉轴的起点对齐
- flex-end 与交叉轴的终点对齐
- center 与交叉轴的中点对齐
- space-btween 与交叉轴的两端对齐，轴线之间的间隔平均分配
- space-around 每根轴线两边的间隔都是相等的，所以轴线之间的间隔是轴线和边框的间隔的两倍
- stretch 轴线占满整个交叉轴
我： order 定义项目排列顺序 数值越小，排列越靠前 默认为零
我： flex-gorw定义项目的放大比例，默认值为0，即就算存在剩余空间也不放大，如果所有项目数值为1的话就是所有项目等分剩余空间，如果有一个项目的flex-grow属性为2，其余项目都为1时，则前者占据的剩余空间是后者的两倍。
我： flex-shrink 定义了项目的缩小比例，默认值为1，即如果空间不足的话，所有项目等比例缩小，如果有一个项目的flex-shrink的属性为0，其他项目的为1，则空间不足时，前者不缩小，后者等比例缩小。
我： 属性定义了，在分配多余空间之前，项目占据的主轴空间（main size），浏览器根据这个属性计算出主轴是否有剩余空间，它的默认值为auto即项目本身的大小，它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
flex属性是flex-grow，flex-shrink和flex-basis的简写，默认值为0 1 auto，该属性有两个快捷值auto（1 1 auto）和none(0 0 auto)
align-self属性的话，它允许单个项目与其他项目不一样的对齐方式，可覆盖align-items的属性，默认值为auto，表示继承父元素的属性，如果没有父元素，则等同于stretch，该属性可能取6个值，除了auto，其他都与align-items属性完全一致。
注释：当面试官面对千篇一律的回答时，你用清新脱俗的话语会让你成为一股清流，流淌在他心间。
面试官： 当flex-basis属性的百分比大于100%时，会占据外边距嘛
我： 不会，如果项目具有margin值，margin值会存在，即margin值的那部分空间会占据，无论总flex-basis是10000%，margin值也不会被移除。
面试官： 你给我说一下flex-shrink的计算规则
我：
- flex-shrink仅在内容默认宽度之和大于容器的时候才会有效
- 容器内子容器的content、border、padding都要参与计算才能得到正确的收缩指数值
- border和padding即使参与了计算，但宽度始终不会改变，假如收缩后的总宽度仍然超过容器宽度，则会超出盒子，即使设置box-sizing为border-box也不能使border和padding收缩
假设有一个id为content容器中有5个小盒，content容器定宽500px，
每个小盒的初始内容宽度是120px + 边框3px * 2 = 126px，
现在前三个小盒flex-shrink数值为1，后两个数值为2，下面计算：
小盒初始宽度总和与content容器宽度差值
Δ = 126 * 5 - 500 = 130
收缩指数
Δt = 130 ÷ （1 * 3 + 2 * 2）
前三个盒子宽度
box = 126 - Δt
后两个盒子宽度
box1= 126 - 2Δt
总结
其实吧，写这篇文章之前，我也没面试过，写的这些都是建立在理论和想象基础上，可以参考，但是千万别去死记，因为我也不知道我面对面试的时候，会不会有写文章时这么淡然。所以，纸上得来终觉浅，得知此事要躬行，实践是最好的老师，加油加油。
