视频链接： 哔哩哔哩
流式布局通过让页面元素根据浏览器窗口大小自动调整，能够适应不同设备屏幕尺寸，提升页面的可读性和用户体验，同时增强内容的结构和视觉层次，使信息呈现更加清晰和灵活。
应用场景
1.自适应内容排列
流式布局非常适合用于需要根据内容自动调整排列方式的场景，如标签、徽标、新闻摘要、商品列表等。在屏幕空间充裕时，元素会水平排列，而在空间有限时，元素会自动换行，从而保持内容的整洁性和可读性。
2.标签和分类展示
流式布局适合用来展示多种分类或标签，尤其在显示大量文字、图标或图片时，能够灵活调整布局，使得界面既不拥挤，也能有效利用每一寸屏幕空间。
3.产品推荐和广告展示
流式布局在电商和广告展示中也得到广泛应用。通过灵活的排列方式，能够根据不同数量的推荐产品或广告内容自动排列，避免固定的列数限制，提升视觉效果和用户交互的自然度。
常用属性
| 属性 | 作用 | 备注 |
|---|---|---|
| 主轴对齐方式 | 控制主轴方向上所有子组件的对齐方式 | 左对齐 / 右对齐 / 居中对齐 / 两端对齐 / 分散对齐 / 平均对齐 |
| 交叉轴对齐方式 | 控制交叉轴方向上所有子组件的对齐方式 | 左对齐 / 右对齐 / 居中对齐 / 两端对齐 / 分散对齐 / 平均对齐 |
| 水平间距 | 控制每个子组件在主轴方向之间的间距 | 默认值通常为 0.0 |
| 垂直间距 | 控制不同"行"之间的垂直间距，适用于多行排列时 | 设置为 0.0 时，无行间距 |
| 剪裁方式 | 控制布局中内容超出时的剪裁方式 | 水平 / 垂直 |
| 方向 | 控制流式布局的主轴方向，决定子组件的排列顺序 | 可选值：horizontal, vertical |
| 每行对齐方式 | 控制每一行子组件在主轴方向（通常为横向）上的对齐方式 | 起始位置对齐 / 居中对齐 / 末尾位置对齐 |
| 文本方向 | 决定子组件排列的文字书写方向 | 左到右 / 右到左 |
| 垂直方向 | 决定子组件在交叉轴上的起始方向，影响从上往下或从下往上的排列顺序 | 向上 / 向下 |
