升级了奇趣框架栅格换行自动间距的实现

2021-11-04

今天的工作任务,本来是要整聊天室项目的,但是后端那边部署有点问题,还是很忙,于是就跑去整了另外一个 Boss 交代的任务。

主要是给 WP 项目增加两个页面,切图嘛,设计给的素材到手,问题就不是很大了,所以也没什么好记录的。就是期间我升级了下奇趣框架,将栅格系统的自动换行间距从负 margin 的形式换成了 row-gap,因此不再支持 IE 系列浏览器了。

<div class="row">
  <div class="column"></div>
  <div class="column"></div>
</div>
.row{
  display: flex;
  margin-left: -1em;
  margin-right: -1em;
  margin-bottom: -1em;
}

.column{
  flex: 0 0 100%;
  width: 100%;
  padding: 0 1em;
  margin-bottom: 1em;
}

大概就是这样,每个格子都自带下间距,而父容器 .row 设置负间距将会抵消掉子元素格子 .column 那部分间距,也就实现了栅格单行总数超过 12 导致换行之后,自动设置行与行之间的间距了。缺点就是如果你把它放在页面最底下的位置,写了负间距的 .row 父容器会不管用,导致部分元素溢出页面,除非 .row 父容器的父容器至少提供了 1em 的内间距。

换成了 row-gap 的话,也就是 margin-bottom 都可以去掉了,左右的间距还是得有,如果用 column-gap 尝试去替换,会导致 .column 格子的宽度计算错误,导致换行。这是因为间距并不计算在格子的 width 里面,是独立存在的。更简单的办法就是直接不用 Flex,用 Grid 进行布局。

多云 一般
概览页 时间轴
奇趣音乐盒 技术源于 Kico Player
Emmm,这里是歌词君