设置display:flex并配合flex-wrap:wrap实现多行排列，通过align-items控制交叉轴对齐，适用于标签、按钮组等动态内容布局。
要在CSS中使用Flexbox实现多行文字排列，关键在于正确使用 flex-wrap: wrap 和 align-items 属性的配合。这种布局方式特别适合处理动态内容，比如标签、按钮组或响应式文本块。
启用换行：flex-wrap: wrap
默认情况下，Flex容器中的项目只在一行内排列。要让文字或元素在空间不足时自动换行，需要将容器的 flex-wrap 设为 wrap。
说明：- 设置 display: flex 启用弹性布局。
- flex-wrap: wrap 允许子元素在容器宽度不足时换到下一行。
- 子元素可以是 span、div 或任何包含文字的标签。
示例代码：
.container {
display: flex;
flex-wrap: wrap;
width: 300px; /* 限制容器宽度以触发换行 */
}
.item {
padding: 8px;
margin: 4px;
background: #007bff;
color: white;
border-radius: 4px;
}
控制垂直对齐：align-items 的作用
align-items 决定交叉轴（通常是垂直方向）上每行项目的对齐方式。当使用 flex-wrap: wrap 换行后，align-items 会影响每一行的整体对齐表现。
立即学习“前端免费学习笔记（深入）”；
常用值说明：
- stretch（默认）：项目拉伸以填满容器高度。
- center：项目在交叉轴居中对齐。
- flex-start：项目顶部对齐。
- flex-end：项目底部对齐。
如果你希望每行文字在容器中垂直居中，可以这样设置：
.container {
display: flex;
flex-wrap: wrap;
align-items: center;
height: 200px; /* 需要设定高度才能看出对齐效果 */
}
结合 flex-start 实现顶部对齐文字流
对于大多数文字排列场景，比如标签云或关键词列表，通常希望项目从顶部开始堆叠，且每行左对齐。这时推荐组合如下：
- flex-wrap: wrap —— 允许换行。
- justify-content: flex-start —— 每行项目靠左排列。
- align-items: flex-start —— 整体从顶部开始排列，避免拉伸或居中偏移。
完整实用示例：
.tag-container {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: flex-start;
gap: 8px; /* 推荐使用 gap 控制间距 */
padding: 10px;
border: 1px solid #ddd;
}
.tag {
padding: 6px 12px;
background: #28a745;
color: white;
border-radius: 12px;
font-size: 14px;
}
基本上就这些。通过 flex-wrap: wrap 实现换行，再配合 align-items 控制垂直对齐，就能灵活地排列多行文字内容。不复杂但容易忽略细节。
