当你站在面试官的角度二（flex布局）

前言

本文章的一些问题都是我在复习知识点的时候本身站在面试官的角度思考或是在网上查找所得。正所谓人最大的敌人就是本身，因此站在面试官的角度战胜本身，也许你就吧，正在奋斗的咱们。

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

总结

其实吧，写这篇文章以前，我也没面试过，写的这些都是创建在理论和想象基础上，能够参考，可是千万别去死记，由于我也不知道我面对面试的时候，会不会有写文章时这么淡然。因此，纸上得来终觉浅，得知此事要躬行，实践是最好的老师，加油加油。