如何用Flex布局實現書簽先豎后橫的均勻分布？

巧用flex布局及css選擇器，實現書簽先豎后橫均勻分布

在開發書簽管理擴展時，如何高效排列大量書簽是一個常見挑戰。本文介紹一種利用flex布局和css選擇器an+b的巧妙方法，實現書簽先豎后橫的均勻分布，避免在有限列數下出現排列不均勻的問題。

問題：假設有多個書簽，需先豎向排列，豎向排滿后橫向排列，最終均勻分布。例如，6個書簽，5列顯示，理想效果：

一 二 三 四 五 ① ③ ④ ⑤ ⑥ ②

但實際效果可能為：

一 二 三 四 五 ① ③ ⑤ ② ④ ⑥

后幾列出現空白。現有布局采用Flex布局（flex-direction: column），通過調整容器高度控制行數，并需支持書簽增刪和快捷鍵操作。

解決方案：無需復雜算法，只需利用CSS選擇器an+b。通過計算書簽總數和列數，確定合適的a和b值，然后使用該選擇器為特定書簽添加底部邊距（例如margin-bottom: 1px;）。此方法簡單高效，不會影響快捷鍵操作和書簽增刪。 通過此方法，即可實現書簽先豎后橫的均勻分布，避免空白列。