1. 问：你们项目中哪些页面或组件主要采用了Flex布局？为什么选择Flex布局？
答：
在本项目中，主要的页面布局（如 web-admin/src/views/MainBox.vue、web-company/src/components/Navbar.vue、Footer.vue 等）都采用了Flex布局。Flex布局可以方便地实现响应式设计、元素居中、两端对齐、自适应宽高等效果。比如侧边栏和主内容区的自适应分布、导航栏的菜单项横向排列等，Flex都能高效实现，减少了大量浮动和定位的兼容性问题。
2. 问：Flex布局在项目中是如何实现响应式设计的？
答：
Flex布局通过设置 flex-wrap: wrap、flex-basis、flex-grow、flex-shrink 等属性，使得子元素可以根据父容器宽度自动换行、缩放。例如在 web-admin/src/components/SideMenu.vue 和 TopHeader.vue 中，菜单项和头部内容会根据屏幕宽度自动调整排列方式，实现了良好的响应式体验。配合媒体查询（如 @media）进一步优化了在不同终端下的显示效果。
3. 问：你们项目中Flex布局是如何实现垂直居中和两端对齐的？
答：
在如 web-company/src/components/Navbar.vue 和 Footer.vue 等组件中，通过设置 display: flex; align-items: center; justify-content: space-between;，实现了内容的垂直居中和两端对齐。例如导航栏左侧为Logo，右侧为菜单，使用Flex后只需简单设置即可保证在不同分辨率下都能居中和对齐，无需复杂的margin/padding调整。
4. 问：Flex布局在多列自适应和等高布局方面在项目中有哪些应用？
答：
在如 web-admin/src/views/home/components/ViewStatistics.vue 和产品列表页（如 ProductList.vue）中，采用Flex布局实现了多列自适应和等高布局。通过 flex: 1 或 flex-basis 设置每个卡片或统计项宽度自适应，且高度自动拉齐，保证了数据大屏和列表展示的美观和一致性。这样即使内容多少不一，也能自动等高排列。
5. 问：在项目中遇到过Flex布局的哪些兼容性或坑？你们是如何解决的？
答：
主要遇到的问题有：
- 某些老旧浏览器（如IE10/11）对Flex部分属性支持不完善，导致布局错乱。
- 子元素最小宽度（min-width）未设置时，内容溢出导致布局异常。
- 使用
flex: 1时，子元素未正确撑满父容器。
为此，我们在web-admin/src/styles/common.scss和index.scss中增加了Flex的兼容性前缀（如-webkit-flex），并为关键布局元素设置了min-width、min-height，同时在开发阶段通过浏览器兼容性测试及时修复问题，保证了主流浏览器下的良好体验。
