在 Vue3 项目开发中，尤其是数据可视化场景下，我们经常需要频繁使用 Flex 布局来实现图表的灵活排版。每次重复写display: flex、justify-content、align-items等样式不仅低效，还容易导致样式不统一。本文将分享如何封装一对高复用、强类型的 Flex 布局组件 ------ChartFlex（容器）和ChartFlexItem（子项），让图表布局开发更高效、更规范。
ChartFlex.vue
ChartFlexItem.vue
通过上面两个组件结合使用，我们就能很快完成大屏的布局开发，且灵活性高
示例1
示例2
示例3
通过上面示例可以看到，我们在不写css的情况下，也能快速完成大屏的布局开发，同时保证了每个图表卡片之间的统一间距，页面的工整性
动态图演示效果
总结
通过封装ChartFlex和ChartFlexItem，我们将重复的 Flex 布局逻辑抽离成通用组件，带来了以下收益：
- 提升开发效率：无需重复编写 Flex 样式，通过 Props 快速配置；
- 样式统一：避免团队成员手写样式导致的布局不一致；
- 强类型保障：TypeScript 约束减少布局相关的 bug；
- 图表友好：内置图表场景所需的尺寸控制、溢出处理等逻辑；
- 高扩展性：可根据业务需求灵活扩展响应式、加载态等功能。