How to use Flex layout to achieve even distribution of bookmarks first vertically and then horizontally?

Cleverly use Flex layout and CSS selector to achieve even distribution of bookmarks first vertically and then horizontally

How to efficiently arrange a large number of bookmarks is a common challenge when developing bookmark management extensions. This article introduces a clever method of using Flex layout and CSS selector an b to achieve uniform distribution of bookmarks first vertically and then horizontally, avoiding the problem of uneven arrangement under the finite number of columns.

Question: Suppose there are multiple bookmarks, you need to be arranged vertically first, vertically full, then horizontally, and finally evenly distributed. For example, 6 bookmarks and 5 columns are displayed, ideal results:

<code>一二三四五① ③ ④ ⑤ ⑥ ②</code>

But the actual effect may be:

<code>一二三四五① ③ ⑤ ② ④ ⑥</code>

The last few columns appear blank. The existing layout adopts the Flex layout ( flex-direction: column ), which controls the number of rows by adjusting the container height, and supports bookmark addition and deletion and shortcut key operations.

Solution: No complex algorithms are required, just leverage the CSS selector an b . By calculating the total number of bookmarks and columns, determine the appropriate a and b values, and then use this selector to add a bottom margin to a specific bookmark (e.g. margin-bottom: 1px; ). This method is simple and efficient, and will not affect the operation of shortcut keys and bookmark addition and deletion. Through this method, you can achieve even distribution of bookmarks vertically and then horizontally, avoiding blank columns.

The above is the detailed content of How to use Flex layout to achieve even distribution of bookmarks first vertically and then horizontally?. For more information, please follow other related articles on the PHP Chinese website!