Flex 布局

外卖订单摘要里，菜品、配送和金额是同一组信息。Flex 先让容器决定排列方向，再给同级卡片分配间距和对齐方式。

• 开始时：三张卡片上下堆叠，空间关系还没有被统一安排。
• 完成后：三张卡片沿一行排开，间距和基线保持一致。

当需求是让同一组内容沿一条轴排列时，用 Flex 解决空间关系；样式 CSS 负责写出规则，组件 Component 负责把界面单元复用起来。Flex ≠ CSS，也不是组件本身。

• 想改变卡片的排列方向、间距或对齐，先检查容器的布局规则。
• 想统一按钮颜色或边框，处理的是 CSS 外观；想复用一张订单卡，处理的是组件边界。

看订单摘要的真实界面：标注会落在同一个 Flex 容器、它的规则和三张同级卡片上。

• 点击编号或说明行可以固定当前部件，悬停离开后仍恢复已固定的部件。
• 容器和卡片都来自真实 DOM 测量，不用图片坐标猜位置。

单行横向、单列纵向和横向换行是同一 Flex 容器的不同布局语义；每项都直接展示菜品、配送和金额三块内容的排列结果。

模拟订单摘要从 520px 宽变成 320px 宽，同一组信息从横向排列变成纵向堆叠；选择后主体即时更新。

Flex 布局什么时候用、什么时候不用？先看任务边界，再看组件外观。

• 什么时候用：菜品、配送和金额沿一条轴排开，间距和对齐由同一个容器管理。
• 什么时候不用：需要同时控制行、列和跨轨道关系时，不要用多个 Flex 硬拼网格。

怎么判断：先看用户要完成的任务和内容关系，再选择职责准确的组件。

请使用 Flex 实现外卖订单摘要：让菜品、配送和金额三张同级卡片由一个容器沿横向排列，设置 12px 间距并保持顶部对齐；当可用宽度不足时允许卡片换行，不要把它们缩成不可读的小字；使用真实 DOM 和项目间距变量，在 390px 与 320px 宽度下不出现页面横向滚动。