flex 中均匀分布布局（先垂直，再水平）
你正在开发一款书签管理扩展，希望书签垂直再水平均匀分布。对于 6 个书签，预期布局为 5 列：一 二 三 四 五
① ③ ④ ⑤ ⑥
② 然而，目前的布局如下：一 二 三 四 五
① ③ ⑤
②...
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 布局中如何实现书签的垂直水平均匀分布？的详细内容，更多请关注知识资源分享宝库其它相关文章！
版权声明
本站内容来源于互联网搬运，
仅限用于小范围内传播学习，请在下载后24小时内删除，
如果有侵权内容、不妥之处，请第一时间联系我们删除。敬请谅解!
E-mail：dpw1001@163.com
发表评论