25、简述弹性盒子 flex 布局及 rem 布局?(必会)

rem 是 CSS3 新增的一个相对单位，相对于根节点(html)字体大小的值，r 就是 root html{font-size:10px} ，则 2rem=20px，通过它就可以做到只修改根元素的大小，就能成比例地调整所有的字体大小，只依赖 html字体的大小。

适配方案步骤：

1、首先动态计算 html 的 font-size

2、将所有的 px 换算成 rem(计算过程请看下面代码和注释（注意：rem 的换算是根据设计图稿的像素计算的，下面的计算只是动态计算 html 的 font-size 大小），请看下面的注意事项：

注意：

1、必须动态地去设置 html 的大小，才能适配

2、根据页面的宽度除以一个系数，把算出的这个值赋给 html 的 font-size 属性，rem 换算值是根据 psd 设计图的宽度/系数的 rem 系数以 640px 设计稿和 750px 的视觉稿，网易这样处理的：

这样不管是 750px 设计稿还是 640px 设计稿，1rem 等于设计稿上的 100px。故 px 转换 rem 时：1rem = 1px * 0.01;

在 750px 设计稿上：

故对于设计稿上任何一个尺寸换成 rem 后，在任何屏下对应的尺寸占屏幕宽度的百分比相同。故这种布局可以百分比还原设计图

（2.1）为什么要除一个数字，原因是：一个页面里，不可能全都是整屏的元素，肯定有一行中放多个元素。所以就把一行分成 n 份。

（2.2）不除一个数字的话，那 1 个 rem 就是屏幕的宽度，这个值太大，如果一个元素的宽度比它小的话，就不方便计算。

（2.3）这个系数，自己定。多少都可以，但是建议给一个能整除的值（这个能整除的数，还要根据设计稿能整除的数。）

3、对于切的图片，尺寸是根据设计图的尺寸宽度的，显示起来会很大，如果是 Img 标签，可以设置宽度为切出的图片尺寸，换算成 rem，如果是 background-img，用background-size 属性，设置设计图尺寸宽高，换算成 rem 进行图片的缩放适配。

对于上述的第二点，根据设计稿动态转换 rem，这里说一下，前面的计算是动态的设置 html的 font-size 的大小，这是根据设备的独立像素计算的。而设计稿往往是根据物理像素，即设备像素设计的，往往很大，是 750px 及以上，所以在转换 rem 的时候，转换是根据 psd设计稿的像素进行转换，即 1rem = 设计稿像素宽度/系数，例如，如果是 1080px 的设计稿，那么，就用 1rem = 1080/18 = 60px（这里用 18 做系数，是因为能整除），然后布局的时候就根据设计稿的元素尺寸转换，例如设计稿一个元素的高为 60px，那么就可以转化为 1rem 了。

特点：

1、所有有单位的属性会根据屏幕的尺寸自动计算大小

2、同样一个元素，在不同的设备下的大小是不一样的。在尺寸小的设备下显示的小，在尺寸大的设备下显示的大

3、一般以 iphone6 为基准，以它的宽度 750 除上一个系数，再去算 rem

Tips：上述步骤 2 中换算可以通过 Hbuilder 将 px 自动转 rem 以及通过 less 自动计算成 rem，sublime 也可以通过插件进行自动转换

（3.1）打开 Hbuilder，顶部栏的工具》选项》Hbuilder》代码助手》px 自动转 rem 设置

（3.2）less 自动转换：Hbuilder 也可以将 less 文件自动转成 css 文件。less 文件的书写如下所示：

弹性布局适配(会配合 rem 适配使用 )

兼容情况

IE10 及以上、ios9 及以上、android4.4 及以上版本支持

特点1、默认所有子元素都会在一行中显示，即使给子元素一个很大的宽度

2、父级加了这条属性，子级的 float、vertical-align 就会失效

3、如果兼容低版本的机型要加前缀-webkit-，包括后面讲的所有属性容器属性（父元素样式） 具体看菜鸟教程或阮一峰的教程，这里说一下一些重点知识。

（3.1）flex-direction：子元素排列方向（主轴的方向，如果设置了 column，则意味着主轴旋转了 90 度）

（3.2）flex-wrap：换行方式

（3.3）flex-flow：以上两种方式的简写

（3.4）justify-content：水平对齐方式（子元素在主轴上的对齐方式）

（3.5）align-items：垂直对齐方式（子元素在交叉轴上的对齐方式）

（3.6）align-content：多行垂直对齐方式（多根轴线的对齐方式）

项目属性（子元素样式）

1、order：排列位置 //如果有两个的值是相等，按书写顺序排列

2、flex-grow：扩展比例

flex-grow 当父级的宽度大于所有子元素宽度之和时，根据父级的剩余空间，设置子元素的扩展比例（设置后，元素给的固定宽度会被覆盖）它是一个系数默认为 0，即如果存在剩余空间也不扩展。

剩余空间：剩余空间=父级的宽度-所有子元素的宽度和

注意：如果没有设置初始宽度，也没有内容，则默认为 0，否则为内容的宽度。例如设置了文字，会撑开有初始宽度。

子元素宽度计算公式

子元素的宽度=（父级的宽度-所有子元素的宽度和）/所有子元素的 flex-grow 属性值之和*子元素的 flex-grow 属性值+子元素初始宽度

3、flex-shrink：收缩比例

flex-shrink 当所有子元素宽度之和大于父级宽度的时候，根据超出的空间，设置子元素的收缩比例（设置后，元素给的固定宽度会被覆盖）它是一个系数默认为 1，如果给个 0 的话，就不会收缩。

超出空间：超出空间=所有子元素的宽度和-父级的宽度

子元素宽度计算公式

1、算出超出空间，所有子元素的宽度和-父级的宽度

2、子元素的初始宽度*子元素的 flex-shrink 值

3、算出第二步所有结果的和

4、每个子元素的第二步/第三步*第一步

5、子元素的初始宽度-第四步

flex-basis：元素的大小

flex：以上三个属性的简写

align-self：单独的垂直对齐方式（交叉轴方向上）