请谈谈你对 Flex 布局的认知，并说明在哪些实际场景中适合采用它。

回答思路

1. 【回答框架 1】Flex 布局是一种一维布局模型，通过主轴和交叉轴控制子项排列，核心属性包括 flex-direction、justify-content、align-items、flex-wrap 等。
2. 【回答框架 2】主轴方向由 flex-direction 决定，默认 row 即水平方向；justify-content 控制主轴对齐，align-items 控制交叉轴对齐，flex-wrap 控制换行。
3. 【回答框架 3】子项可通过 flex-grow、flex-shrink、flex-basis 控制伸缩比例，flex 是这三个属性的简写，常用 flex:1 表示等分剩余空间。
4. 【回答框架 4】适用场景包括导航栏、列表项、卡片布局、表单排列、水平垂直居中、等分布局等，尤其适合内容尺寸不确定或需要动态分配空间的场景。
5. 【回答框架 5】对于复杂二维布局或需要精确控制间距的场景，Grid 布局更合适，Flex 更擅长单方向排列。
6. 【关键点 1】Flex 是一维布局，主轴和交叉轴是核心概念。
7. 【关键点 2】flex-direction 决定主轴方向，justify-content 和 align-items 控制对齐。
8. 【关键点 3】flex-grow、flex-shrink、flex-basis 控制子项伸缩，flex:1 常用于等分。
9. 【关键点 4】适合导航、列表、卡片、居中、等分等场景，复杂二维布局用 Grid。
10. 【关键点 5】注意 flex 简写与默认值，避免子项溢出或意外收缩。
11. 【易错点 1】flex:1 不等同于 flex:1 1 0%，需明确 flex-basis 行为。
12. 【易错点 2】flex-wrap 默认 nowrap，子项可能溢出容器。
13. 【易错点 3】align-items 默认 stretch，可能导致子项高度异常。