活字格7.0新功能解密：八，流式布局（二） 行高列宽自适应-实战

相信看了，咱们上一个活字格7.0流式布局的帖子的，很多的同学，已经在欢呼了


我也知道，大家对前2个模式（固定模式和自适应模式）应该比较容易理解，也大致知道的这个功能如果使用；
但是对第三个模式，可能大家会比较晕这个功能到底怎么使用的？功能听起来非常的强大，但是怎么落地呢？


那这个帖子，我就给大家说一下这个第三个模式的使用场景，一起感受一下他的威慑力~~~

抛砖引玉一个场景
还记得很多大佬问过我，能不能在页面变大的时候，只对一个页面只对部分内容拉伸，其他的部分不要拉伸呢？
比如不要对菜单拉伸，只对右侧的内容区域拉伸呢？
这时候这个范围模式就要发挥它的作用了~
我们就拿活字格内置的功能演示模板，作为例子

设置不拉伸和拉伸模式的情况如下：

不拉伸实在不好看，双向拉伸以后，菜单感觉又太占地方了

新版本的范围模式可以轻松解决
做法也非常的简单，我来带着大家做一下
首先，这个范围模式也是对一整行或者一整列的，所以我们在设置的时候，需要尽量保证被影响的范围是我们需要的，比如这个模板，我们需要将一列不会影响其他内容，但是又能影响页面占位区的列去设置范围占比是1

这样我们的页面就会在页面占位区扩大了
（为了方便大家查看，我故意给这列的一个格子设置了一个背景颜色）

但是仅仅这样内容（图文列表）区域并没有变大，所以我们还需要将这个内容区域也设置一个范围占比列
为了方便查看，我也做了一个背景色方便我们理解这个功能

这样就是效果

同理，我们给行也设置一个范围占比列


这样我们希望的效果就出来了（菜单不拉伸，内容区域拉伸）