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

学习文章要努力，但是不要急！今天的这篇文章《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，可以创建所需的均匀分布布局。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。