活字格7.0新功能解密：七，流式布局（一）行高列宽自适应

zhanglongsheng

本帖最后由 Simon.hu 于 2024-12-16 15:44 编辑

活字格支持流式布局了！！！！！！！！

页面流式布局一直是大家希望活字格解决的一个大问题，当然为了解决这个问题，我们真的也是做了很多次的尝试，别的不说插件就发了很多个发了很多次，直播，帖子，更是数不胜数。
经过无数次的尝试和碰壁，我们终于找到了一个机智的方式支持了页面的流式布局

让我们再来一次~~~~

<<<<<<<<<<<<<<<<<<<<<<<<正片开始>>>>>>>>>>>>>>>>>>>>

从今天开始，我们来一次解密活字格7.0的流式布局
那作为第一节，我们先来点大局观方面的~

活字格的流式布局，主要是基于CSS的Grid布局，活字格的一个一个的格子，配上这个布局模式，堪称完美
但是对于大家的来说，搞更好的学会和掌握流动布局，那你需要学的东西就又多了一些：比如fr是什么意思，这个你可以看一下大神的文章【大神的CSS介绍】也可以看一下【w3school教程】
因为咱们是在活字格的基础上因地制宜的搞Grid布局，所以有的东西不是全部都有，但活字格有的概念都是符合他标准的概念了

有了上面的内容学习，活字格的流动布局的概念你已经大致的理解，下面我们进入实战
本帖子的实战内容其实已经在标题中写了，那就是行高和列宽的自适应设置，因为行高和列宽其实功能是一样的，那我随便讲一个，其实的另一个大家就可以以此类推了，比如列宽
image.png911326599.png

大家可以看到，新版本中，列宽我们多了几个模式

固定模式
自适应模式
范围模式

第一种，固定模式
其实就是老版本的模式，固定大小，以像素为单位
第二种，自适应模式
这个名字，如果你没有详细了解和学习过的话，可能会对这个名字有很大的期望，觉得无脑选自这个模式即可。这个词看起来很智能，事实上他是智能的但是没有你想象中的那么智能，他的作用是根据内容自动扩展，你设置到【列】上，那就是宽度自动扩展，你设置到【行】上，那就是高度自动扩展；
以下动图为【列】自适应的效果
效果.gif