Flex布局通过弹性容器与项目自动协调宽高、顺序和对齐，实现响应式布局；只需display:flex启用，配合flex-direction、flex-wrap、flex、justify-content和align-items等属性，即可高效处理排列、伸缩与居中。
传统布局依赖浮动、定位和固定尺寸，一旦内容变化或屏幕尺寸调整，就容易错位、溢出或留白，维护成本高。Flex 布局通过弹性容器与项目自动协调宽高、顺序和对齐方式，让页面天然具备响应性和可伸缩性。
用 display: flex 启动弹性上下文
只需在父容器设置 display: flex，它就变成弹性容器，所有直系子元素自动成为弹性项目。无需清除浮动，也不用计算 margin 或 position 偏移。
- 横向排列默认是 flex-direction: row（从左到右）
- 纵向排列加 flex-direction: column
- 加 flex-wrap: wrap 可让项目在空间不足时换行，避免挤压或隐藏
用 flex 属性控制项目伸缩比例
单个项目上设置 flex: 1，表示“拿走剩余空间并等分”；flex: 2 就占两份，flex: 0 0 auto 则完全不伸缩、保持内容宽度。
- flex: 1 等价于 flex: 1 1 0（放大、缩小、基准为 0）
- 想让导航栏固定宽、主内容自适应？给导航设 flex: 0 0 200px，主区设 flex: 1
- 避免文字溢出：配合 min-width: 0 和 overflow: hidden，让文本自动截断
用 justify-content 和 align-items 统一控制对齐
传统布局靠 margin auto 或 hack 方式居中，flex 提供语义化对齐指令，一行代码解决水平+垂直居中问题。
- justify-content: center —— 主轴（默认横轴）居中
- align-items: center —— 交叉轴（默认竖轴）居中
- 两者同时使用，就能真正实现块级元素的完美居中，不管子元素多高或多宽
嵌套 flex 容器应对复杂结构
导航栏、卡片列表、表单区域等模块各自独立，每个模块内部用 flex，外层也用 flex，层级清晰且互不干扰。
- 顶部导航：display: flex + justify-content: space-between 实现 logo 左、菜单右
- 商品卡片行：display: flex + flex-wrap: wrap + 每张卡设 flex: 0 0 calc(33.333% - 1rem) 实现三列流式布局
- 按钮组：按钮设 flex: 1，自动等宽撑满容器，点击区域更均衡
flex 不是万能，比如复杂二维网格仍推荐 Grid，但绝大多数导航、表单、内容区块、工具栏场景，它足够简洁、可靠、易调试。关键是理解主轴/交叉轴、伸缩三属性（grow/shrink/basis）和对齐逻辑，而不是死记代码。
