一看就会，超有用活字格技能：一百三十六、流式布局

收藏

本帖最后由 Eric.Liang 于 2022-3-31 13:33 编辑

最近有些小伙伴在刚开始接触活字格的时候，会发现为什么自己做的页面，要么无法充满整个浏览器，要么会出现横向纵向滚动条

在这里，我们对于活字格现有的实现流式布局的方式进行一次深入的了解
由于老版本各方面的原因，活字格对于一个页面的流式布局，大体分为两部分：
1.页面拉伸模式，用于实现页面的水平，垂直，双向，等比拉伸等方式
关于页面拉伸模式，建议大家看看这里：https://help.grapecity.com.cn/pages/viewpage.action?pageId=56525634
页面拉伸有自己的优势，比如，设置简单，易用；同时也会有些弊端，页面拉伸时，是页面整体元素进行拉伸，这就会出现如果我只想拉伸右侧的表格区域，左侧菜单大小不变，是无法实现的。所以这种做法，目前而言不是很推荐~

2.行，列模式设置
活字格主要实现流式布局的做法，不论是页面拉伸还是流式布局，都是将页面按照浏览器大小进行自适应扩展，因此，一般情况下，建议无论用那种方式都应该保证设计器页面大小不要大于浏览器的大小，否则会出现横向纵向滚动条，不是很美观。
活字格的官方文档里也对这个进行了讲解，可以参考这里：https://help.grapecity.com.cn/pages/viewpage.action?pageId=56538647
活字格的布局能力主要使用了前端的Grid布局，对于Grid布局的知识，这里推荐一个比较好的链接，可以供大家学习下
https://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html
在看完这个教程之后，你就可以理解活字格中什么最小值（min），最大值（max），占比（fr），像素（px）这个概念了

活字格的范围模式有3种
a.固定模式，代表的是占用浏览器的固定像素，如果固定像素就已经大于了浏览器的宽度，那浏览器中肯定会出现横向滚动条
b.自适应模式，这个名字稍稍有点歧义，自适应代表的是组件的自适应，比如，文本框按照数据长度自适应宽度，图文列表，附件单元格等按照数据多少扩展高度等等
c.范围模式，主要用于充满整个浏览器屏幕
image.png225988463.png

如果需要整个页面流式布局充满整个屏幕，常用的推荐做法
母版页页面占位区，行列各设置一个范围模式即可，这样在浏览器大小发生改变时，这一列和行会自动扩展
image.png416387023.png

普通页面行列各设置一个范围模式
image.png570893249.png

注意：占用多行区域的单元格，设置一行或者一列时，这个容器区域内部会自动扩展。比如：表格，图文列表，数据透视表，页面容器单元格，标签页，选项卡等等

		自动登录	找回密码
密码			立即注册

[易学技巧] 一看就会，超有用活字格技能：一百三十六、流式布局

0 个回复

讲师达人

悬赏达人

元老葡萄

活字格认证

活字格高级认证

微信认证勋章