要实现书签的先竖后横均匀分布，可以使用CSS的Flex布局。以下是一个示例代码，展示了如何使用Flex布局来实现这种效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex布局书签分布</title>
<style>
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100vh;
}
.row {
display: flex;
justify-content: space-between;
flex: 1;
}
.bookmark {
width: 100px;
height: 50px;
background-color: #4CAF50;
margin: 5px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 16px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="bookmark">书签1</div>
<div class="bookmark">书签2</div>
<div class="bookmark">书签3</div>
</div>
<div class="row">
<div class="bookmark">书签4</div>
<div class="bookmark">书签5</div>
<div class="bookmark">书签6</div>
</div>
<div class="row">
<div class="bookmark">书签7</div>
<div class="bookmark">书签8</div>
<div class="bookmark">书签9</div>
</div>
</div>
</body>
</html>
.container:
display: flex;：将容器设置为Flex布局。flex-direction: column;：将子元素（即每一行）垂直排列。justify-content: space-between;：在垂直方向上均匀分布每一行。height: 100vh;：设置容器的高度为视口高度，确保垂直方向上的均匀分布。.row:
display: flex;：将每一行设置为Flex布局。justify-content: space-between;：在水平方向上均匀分布书签。flex: 1;：使每一行在垂直方向上均匀占据可用空间。.bookmark:
display: flex;：将书签内容居中显示。你可以根据需要调整书签的数量、大小和样式，以适应具体的布局需求。