mindmap
    id1[Flexbox 布局基础概念]
        id1-1[Flexbox 布局简介]
        id1-2[Flexbox 布局模型定义]
        id1-3[与传统布局方式的对比]
        id1-4[Flexbox 布局的优势和应用场景]
        id1-5[基本术语和概念]
        id1-6[主轴和交叉轴]
        id1-7[Flex 容器与 Flex 项目]
        id1-8[主轴方向与交叉轴方向]
        id1-9[主轴起点与终点]
        id1-10[交叉轴起点与终点]
        id1-11[浏览器兼容性]
        id1-12[各浏览器支持情况]
        id1-13[前缀使用规范]
        id1-14[渐进增强策略]

mindmap
    id2[Flex 容器属性详解]
        id2-1[display 属性]
        id2-2[display: flex 设置]
        id2-3[display: inline-flex 设置]
        id2-4[块级 Flex 容器与行内 Flex 容器]
        id2-5[flex-direction 属性]
        id2-6[row 水平排列 默认]
        id2-7[row-reverse 水平反向排列]
        id2-8[column 垂直排列]
        id2-9[column-reverse 垂直反向排列]
        id2-10[flex-wrap 属性]
        id2-11[nowrap 不换行 默认]
        id2-12[wrap 换行]
        id2-13[wrap-reverse 反向换行]
        id2-14[flex-flow 属性]
        id2-15[flex-direction 和 flex-wrap 的简写]
        id2-16[复合属性使用方法]
        id2-17[justify-content 属性]
        id2-18[flex-start 主轴起点对齐]
        id2-19[flex-end 主轴终点对齐]
        id2-20[center 主轴居中对齐]
        id2-21[space-between 两端对齐]
        id2-22[space-around 均匀分布]
        id2-23[space-evenly 完全均匀分布]
        id2-24[align-items 属性]
        id2-25[stretch 拉伸填满 默认]
        id2-26[flex-start 交叉轴起点对齐]
        id2-27[flex-end 交叉轴终点对齐]
        id2-28[center 交叉轴居中对齐]
        id2-29[baseline 基线对齐]
        id2-30[align-content 属性]
        id2-31[stretch 拉伸填满 默认]
        id2-32[flex-start 交叉轴起点对齐]
        id2-33[flex-end 交叉轴终点对齐]
        id2-34[center 交叉轴居中对齐]
        id2-35[space-between 两端对齐]
        id2-36[space-around 均匀分布]

mindmap
    id3[Flex 项目属性详解]
        id3-1[order 属性]
        id3-2[项目排序原理]
        id3-3[数值设置规则]
        id3-4[排序应用场景]
        id3-5[flex-grow 属性]
        id3-6[扩展比例定义]
        id3-7[数值计算方式]
        id3-8[可用空间分配机制]
        id3-9[flex-shrink 属性]
        id3-10[收缩比例定义]
        id3-11[溢出空间处理]
        id3-12[收缩系数计算]
        id3-13[flex-basis 属性]
        id3-14[项目初始大小设置]
        id3-15[auto 自动计算]
        id3-16[具体数值设置]
        id3-17[content 基于内容]
        id3-18[flex 属性]
        id3-19[flex-grow、flex-shrink 和 flex-basis 的简写]
        id3-20[常用简写值：auto、none、initial]
        id3-21[复合属性最佳实践]
        id3-22[align-self 属性]
        id3-23[单个项目对齐方式]
        id3-24[覆盖容器 align-items 设置]
        id3-25[auto、flex-start、flex-end、center、baseline、stretch]

mindmap
    id4[实际应用与布局技巧]
        id4-1[常见布局模式]
        id4-2[水平居中布局]
        id4-3[垂直居中布局]
        id4-4[圣杯布局实现]
        id4-5[等高列布局]
        id4-6[流式网格布局]
        id4-7[响应式设计应用]
        id4-8[媒体查询结合使用]
        id4-9[移动端适配策略]
        id4-10[断点设计技巧]
        id4-11[表单布局优化]
        id4-12[表单元素对齐]
        id4-13[标签和输入框布局]
        id4-14[按钮组排列]
        id4-15[导航菜单设计]
        id4-16[水平导航菜单]
        id4-17[垂直导航菜单]
        id4-18[响应式导航切换]
        id4-19[卡片布局实现]
        id4-20[卡片网格系统]
        id4-21[卡片内容对齐]
        id4-22[间距控制技巧]

mindmap
    id5[高级技巧与最佳实践]
        id5-1[性能优化考虑]
        id5-2[渲染性能影响]
        id5-3[重排和重绘优化]
        id5-4[硬件加速应用]
        id5-5[可访问性设计]
        id5-6[屏幕阅读器兼容]
        id5-7[键盘导航支持]
        id5-8[语义化结构保持]
        id5-9[与其他布局方式结合]
        id5-10[Grid 布局配合使用]
        id5-11[传统布局混合应用]
        id5-12[定位布局集成]
        id5-13[常见问题解决方案]
        id5-14[浏览器兼容性处理]
        id5-15[移动端特殊问题]
        id5-16[嵌套布局优化]
        id5-17[调试工具和技巧]
        id5-18[浏览器开发者工具使用]
        id5-19[Flexbox 调试技巧]
        id5-20[布局问题排查方法]

mindmap
    id6[实战项目案例]
        id6-1[完整页面布局]
        id6-2[头部导航设计]
        id6-3[主要内容区域]
        id6-4[侧边栏布局]
        id6-5[页脚设计]
        id6-6[电商网站布局]
        id6-7[商品列表网格]
        id6-8[筛选条件区域]
        id6-9[购物车界面]
        id6-10[商品详情页]
        id6-11[仪表盘设计]
        id6-12[数据卡片排列]
        id6-13[图表容器布局]
        id6-14[控制面板设计]
        id6-15[移动端应用界面]
        id6-16[底部导航栏]
        id6-17[内容滚动区域]
        id6-18[操作按钮组]
        id6-19[管理后台系统]
        id6-20[多级菜单布局]
        id6-21[数据表格展示]
        id6-22[操作工具栏]

mindmap
    id7[附录]
        id7-1[A. Flexbox 属性速查表]
        id7-2[B. 浏览器兼容性表格]
        id7-3[C. 常用布局代码片段]
        id7-4[D. 在线资源和工具推荐]