在网页开发中，书签类组件的布局需求很常见，其中一种典型需求是书签先按纵向排列，当纵向排满指定数量后再横向扩展，并且所有书签在容器内均匀分布，使用Flex布局可以高效实现这个效果。
核心实现思路
要实现书签先竖后横的均匀分布，核心是利用Flex布局的flex-direction和flex-wrap属性配合，同时结合justify-content控制横向分布，align-content控制多行时的纵向分布。首先需要将Flex容器的主轴设置为纵向，开启自动换行，这样书签就会先纵向排列，排满后自动换到下一列，再通过分布属性让所有书签均匀排列。
具体实现步骤
1. 基础HTML结构
先构建书签的容器和单个书签的结构，容器用来设置Flex布局，每个书签作为Flex子项：
<div class="bookmark-container"> <div class="bookmark-item">书签1</div> <div class="bookmark-item">书签2</div> <div class="bookmark-item">书签3</div> <div class="bookmark-item">书签4</div> <div class="bookmark-item">书签5</div> <div class="bookmark-item">书签6</div> <div class="bookmark-item">书签7</div> <div class="bookmark-item">书签8</div> </div>
2. CSS样式配置
接下来给容器和书签项添加对应的CSS样式，关键属性配置如下：
.bookmark-container {
/* 设置为Flex容器 */
display: flex;
/* 主轴方向为纵向，书签先纵向排列 */
flex-direction: column;
/* 开启自动换行，纵向排满后换到下一列 */
flex-wrap: wrap;
/* 横向（交叉轴）均匀分布子项 */
justify-content: space-between;
/* 多行时纵向（主轴）均匀分布 */
align-content: space-between;
/* 容器高度，这里假设纵向最多排4个书签 */
height: 400px;
/* 容器宽度，根据书签数量和排列情况调整 */
width: 600px;
background-color: #f5f5f5;
padding: 10px;
box-sizing: border-box;
}
.bookmark-item {
/* 单个书签的宽高 */
width: 120px;
height: 80px;
background-color: #409eff;
color: #fff;
/* 书签内文字居中 */
display: flex;
align-items: center;
justify-content: center;
/* 圆角美化 */
border-radius: 4px;
/* 字体样式 */
font-size: 14px;
}
3. 效果说明
上述代码中，容器高度设置为400px，单个书签高度为80px，加上可能的间距，纵向最多排列4个书签，当书签数量超过4个时，就会自动换到下一列，实现先竖后横的排列。同时justify-content: space-between会让同一列的书签在纵向均匀分布，align-content: space-between会让多列书签在横向均匀分布，最终达到所有书签均匀分布的效果。
适配不同场景的调整
调整纵向排列数量
如果需要调整纵向最多排列的书签数量，只需要修改容器的高度和单个书签的高度比例即可。比如纵向要排3个书签，单个书签高度设为100px，容器高度设为320px（包含内边距和间距），就可以实现纵向3个后换行。
固定书签间距
如果不需要完全均匀分布，而是需要固定书签之间的间距，可以把justify-content和align-content改为flex-start，然后给书签项添加margin属性：
.bookmark-container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: flex-start;
align-content: flex-start;
height: 400px;
width: 600px;
background-color: #f5f5f5;
padding: 10px;
box-sizing: border-box;
}
.bookmark-item {
width: 120px;
height: 80px;
background-color: #409eff;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
font-size: 14px;
/* 固定书签之间的间距 */
margin-right: 10px;
margin-bottom: 10px;
}
常见问题说明
- 如果书签换行后没有按预期先竖后横排列，需要检查
flex-direction是否设置为column，以及flex-wrap是否为wrap。 - 如果书签分布不均匀，需要确认容器的高度是否足够容纳指定数量的纵向书签，避免容器高度不足导致换行异常。
- 当书签数量较少时，比如只有2个书签，
space-between会让两个书签分别靠在容器两端，这是正常表现，如果需要居中可以改为justify-content: center。
注意：Flex布局的兼容性较好，主流现代浏览器都支持相关属性，如果需要兼容非常旧的浏览器版本，需要额外添加对应的前缀或者考虑其他布局方案。