V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member Sign In
This topic created in 1236 days ago, the information mentioned may be changed or developed.
背景：之前写的一款书签管理扩展，几乎全部功能都已完成。
现在还存在一个跟预期不符的遗留问题，所以在此请教~
具体问题
一个目录下有许多书签，我想让他们先竖向、再横向均匀分布。 比如 6 个书签，按 5 行显示：
期待的效果
一 二 三 四 五（行）
① ③ ④ ⑤ ⑥
②
现在的效果
一 二 三 四 五（行）
① ③ ⑤
② ④ ⑥
后面就空起了两行...
问题说明
- 目前书签内容布局采用的是 flex 布局（ flex-direction: column ）， 然后通过改变 container 的高度控制列数
- 支持书签的删除、新增操作，所以不考虑在 3 、4 、5 、6 后填补空白单元
- 支持快捷键（比如：上下左右），改的时候要考虑这个
Demo： https://plnkr.co/edit/kkIAIf6B0uylynBl?preview
不知道有没有代价不大的实现方法？
 |
1
edward1987 Dec 8, 2022
flex-direction: column;
-> flex-direction: row; 不就符合你的需求了吗... |
 |
2
qinxs OP |
|
3
qinxs OP 具体问题里，应该是列（我搞混了，不好意思，但好像不能修改问题）
|
|
4
qinxs OP 感谢前面朋友的回答，此问题现已解决。
解决方法： 通过 css 选择器 an+b 给选中元素增加一个 `margin-bottom: 1px;` 而 a,b 通过总条数和列数计算可得 |
 |
5
kwrush Feb 3, 2023 via iPhone
不能用 flex-grow 吗？
|
Select Language