活字格7.0新功能解密：七，流式布局（一） 行高列宽自适应
本帖最后由 Simon.hu 于 2021-1-27 08:52 编辑活字格支持流式布局了！！！！！！！！
http://img.soogif.com/8dUvoek9XSJDcArstS4wYHIA5ZhjVB0Q.gif_s400x0
页面流式布局一直是大家希望活字格解决的一个大问题，当然为了解决这个问题，我们真的也是做了很多次的尝试，别的不说插件就发了很多个发了很多次，直播，帖子，更是数不胜数。
经过无数次的尝试和碰壁，我们终于找到了一个机智的方式支持了页面的流式布局
http://img.soogif.com/V8dMsRsDHaDDLVAWvtykpD0ZJTkTJRHt.gif_s400x0http://img.soogif.com/b5BNSohTwuams2Lqwxj6wrRwQw7kRlR6.gif_s400x0http://img.soogif.com/KU2eowA6zcd4yZZYzfBYGAzJHxrXvTrX.gif_s400x0
让我们再来一次~~~~
http://img.soogif.com/ALaifi3SnHH16fjr4ZhVkDsDsMQ5n0QR.gif_s400x0
<<<<<<<<<<<<<<<<<<<<<<<<正片开始>>>>>>>>>>>>>>>>>>>>
从今天开始，我们来一次解密活字格7.0的流式布局
那作为第一节，我们先来点大局观方面的~
活字格的流式布局，主要是基于CSS的Grid布局，活字格的一个一个的格子，配上这个布局模式，堪称完美
但是对于大家的来说，搞更好的学会和掌握流动布局，那你需要学的东西就又多了一些：比如fr是什么意思，这个你可以看一下大神的文章【大神的CSS介绍】也可以看一下【w3school教程】
因为咱们是在活字格的基础上因地制宜的搞Grid布局，所以有的东西不是全部都有，但活字格有的概念都是符合他标准的概念了
有了上面的内容学习，活字格的流动布局的概念你已经大致的理解，下面我们进入实战
本帖子的实战内容其实已经在标题中写了，那就是行高和列宽的自适应设置，因为行高和列宽其实功能是一样的，那我随便讲一个，其实的另一个大家就可以以此类推了，比如列宽
大家可以看到，新版本中，列宽我们多了几个模式
[*]固定模式
[*]自适应模式
[*]范围模式
第一种，固定模式
其实就是老版本的模式，固定大小，以像素为单位
第二种，自适应模式
这个名字，如果你没有详细了解和学习过的话，可能会对这个名字有很大的期望，觉得无脑选自这个模式即可。这个词看起来很智能，事实上他是智能的但是没有你想象中的那么智能，他的作用是根据内容自动扩展，你设置到【列】上，那就是宽度自动扩展，你设置到【行】上，那就是高度自动扩展；
以下动图为【列】自适应的效果
PS：这种自适应大多用在多行文本框中
第三种，范围模式
这里比较值得注意的是占比
其实这个占比就是我前面说的fr， 你百度“CSS fr”可以找到很多的教程，其实打大致的意思就是等比填充的意思，我举一个例子你就明白了
设计器中我给3列设置了三种不同的颜色
其中A列设置为1占比
B列固定宽度20 像素
C列设置2占比
其实，就是除了20像素以外的范围，其他所有宽度分成3份，红色占1份，蓝色占2份
http://img.soogif.com/Y7vM4hvSetLGbeODuyK6XjLUXpzLdlpJ.gif_s400x0
如此所有的行和列就能流动布局了~~
页:
[1]