Flex 布局中如何实现书签的垂直水平均匀分布？

flex 中均匀分布布局（先垂直，再水平）

你正在开发一款书签管理扩展，希望书签垂直再水平均匀分布。对于 6 个书签，预期布局为 5 列：

一 二 三 四 五
① ③ ④ ⑤ ⑥
②

然而，目前的布局如下：

一 二 三 四 五
① ③ ⑤
② ④ ⑥

布局后面出现了两列空白。

问题要求：

• 使用 flex 布局（flex-direction: column）
• 支持书签删除和新增操作
• 考虑快捷键操作
• 寻找低成本的实现方法

解决方案：

通过 css 选择器 an+b 给选中元素添加 margin-bottom: 1px;，其中 a 和 b 由书签总数和列数计算得到。

/* 应用于每 n+b 个元素 */
.bookmark:nth-child(an+b) {
  margin-bottom: 1px;
}

这种方法会在被选中的元素后添加底部边距。通过在选择器中正确设置 a 和 b，可以创建所需的均匀分布布局。

以上就是Flex 布局中如何实现书签的垂直水平均匀分布？的详细内容，更多请关注硕下网其它相关文章！