背景:之前写的一款书签管理扩展,几乎全部功能都已完成。
现在还存在一个跟预期不符的遗留问题,所以在此请教~
具体问题
一个目录下有许多书签,我想让他们先竖向、再横向均匀分布。
比如6个书签,按5列显示:
期待的效果
一 二 三 四 五(列)
① ③ ④ ⑤ ⑥
②
现在的效果
一 二 三 四 五(列)
① ③ ⑤
② ④ ⑥
后面就空起了两列...
问题说明
- 目前书签内容布局采用的是 flex 布局(flex-direction: column),
然后通过改变 container 的高度控制行数 - 支持书签的删除、新增操作,所以不考虑在3、4、5、6后填补空白单元
- 支持快捷键(比如:上下左右),改的时候要考虑这个
Demo:https://plnkr.co/edit/kkIAIf6...
不知道有没有代价不大的实现方法?
感谢前面朋友的回答,此问题现已解决。
解决方法:
通过 css 选择器 an+b 给选中元素增加一个
margin-bottom: 1px;
而 a,b 通过总条数和列数计算可得