3.4 Flex与Grid：一维与二维两台布局机械

3.4 Flex 与 Grid：一维与二维两台布局机械

本节摘要：弹性盒与网格是现代布局的两台主力机械——前者管一维方向的排列与分配，后者管二维区域的划分与对位。本节用弹性盒解决看板统计卡片的横向排列、导航的均匀分布与徽章的垂直居中，用网格划出看板的整车版面，最后给出"一维选弹性、二维选网格、简单场景靠默认流"的决策口诀。

两台机械的分工

3.2 节末尾说过，批量排版要上正规军。正规军有两台：弹性盒机械把容器里的项目排成一行或一列，擅长分配剩余空间、处理对齐；网格机械把容器划成行与列的格子，项目对号入座，擅长整体版面划分。看板的用工需求正好覆盖两台：统计卡片一行排开、徽章在胶囊里垂直居中，是一维问题；页头通栏、主体加侧栏两列、页脚通栏的整车划分，是二维问题。

图 1：弹性盒与网格的适用对照

弹性盒练兵：一行卡片的三种排法

弹性盒的核心概念是主轴与交叉轴：项目排着的方向叫主轴（横排则水平为主轴），垂直方向叫交叉轴。对齐参数分两套管两轴，容器上设方向与对齐，项目上设伸缩比例。看板的三个经典用工逐个过。

/* 用工一：统计卡片行——等宽分布，装不下自动换行 */
.stat-row {
  display: flex;             /* 容器声明为弹性盒 */
  flex-wrap: wrap;           /* 一行装不下允许换行，窄屏不挤爆 */
  gap: var(--space-3);       /* 项目间距：替代老式外边距互推 */
}
.stat-card {
  flex: 1 1 200px;
  /* 伸展系数 1：剩余空间按份数分
     收缩系数 1：空间不足按比例让
     基准 200px：低于此宽度宁可换行 */
}

/* 用工二：导航——两端对齐加均分 */
.workshop-nav ul {
  display: flex;
  justify-content: space-between;
  /* 主轴两端对齐：首尾贴边，中间均分 */
  align-items: center;
  /* 交叉轴居中：链接与图标基线对齐 */
}
​

/* 用工三：徽章——小胶囊里的文字垂直居中 */
.badge {
  display: inline-flex;      /* 行内弹性盒：不换行又获得对齐能力 */
  align-items: center;       /* 交叉轴居中：文字在胶囊里不上浮下沉 */
  gap: 4px;
}

/* 弹性方向反转：主轴起点从右开始（右到左语言的准备） */
.workshop-nav ul { flex-direction: row-reverse; }

/* 纵向卡片列表：主轴转垂直 */
.stat-column {
  display: flex;
  flex-direction: column;    /* 主轴转垂直：项目从上到下 */
  gap: var(--space-2);
}
​

三个用工覆盖了弹性盒八成的日常：等宽分布、两端对齐、胶囊居中。参数虽多，读代码时只问两个问题——主轴哪个方向、两轴怎么对齐——答案就在容器那几行里。

网格练兵：看板整车版面

网格的思路是先画格子再放东西：容器上声明列轨道与行轨道，项目用行列编号对号入座。看板整车版面一列主体一列侧栏、页头页脚通栏，用网格一段写完。

/* 看板整车版面：网格一段流 */
.board-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  /* 列轨道：一份弹性宽加固定侧栏宽；fr 是份数单位 */
  grid-template-areas:
    "header header"
    "main   aside"
    "footer footer";
  /* 区域命名：先给每格起地名，布局意图一眼可读 */
  gap: var(--space-3);
  min-height: 100vh;
}

.board-header { grid-area: header; }  /* 页头占第一行两格 */
.board-main   { grid-area: main; }    /* 主体占左列 */
.board-aside  { grid-area: aside; }   /* 侧栏占右列 */
.board-footer { grid-area: footer; }
​

/* 表单两列对位：标签与控件的网格 */
#new-order-form {
  display: grid;
  grid-template-columns: max-content 1fr;
  /* 第一列按标签实际宽度（max-content），第二列吃满剩余 */
  gap: var(--space-2) var(--space-3);
  align-items: center;
}

#new-order-form .form-row { display: contents; }
/* 结构班的分组容器在网格里"透明化"：子项直接参与网格排布 */

/* 窄屏版面塌缩：侧栏撤编、两列变一列（3.6 节正式展开） */
.board-layout.narrow {
  grid-template-columns: 1fr;
  grid-template-areas: "header" "main" "aside" "footer";
}
​

区域命名是网格最有表达力的特性：版面结构直接写在字符串里，重排版面改地名顺序即可，项目与位置的绑定关系稳定不乱。第二段代码里"容器透明化"的写法解决了一个真实痛点——结构班出于语义分了组，样式班的网格布局不想被中间层打断，一行声明让分组仅存在于结构层面。

选型口诀与混用姿势

两台机械怎么选，口诀三句：一行或一列解决的事找弹性盒；行和列都要同时规划找网格；默认流能搞定的别开机。混用是常态而非禁忌——看板整车用网格划分，主体内部每张卡片、每行徽章各自用弹性盒对齐，两层机械各管各的尺度，互不越权。

历史上还有一台老机械值得一提：浮动布局靠元素贴边挤让出空间来拼版面，那是两台现代机械普及前的手艺，如今回归文本环绕的本职（3.2 节已有定位）。读老代码会遇到它，新代码不必再请它出山。

⚠️ 常见坑：在弹性容器里用外边距 auto 技巧做间距、在网格里手工计算列宽——都是用算盘算出了机械没通电时的答案。间距参数与份数单位就是为这些场景生的，让机械干机械的活。

💡 关键直觉：给任何容器上布局前，先默念"一维还是二维"。答得出一维，弹性盒三行解决；答不出或要同时管行列，直接网格。犹豫超过十秒，说明版面本身还没想清楚，回纸上画个框图再回来。

本节要点回顾

• 两台分工：弹性盒管一维排列分配、网格管二维区域划分，整车版面与局部对齐分层混用；
• 弹性盒要点：主轴交叉轴两套对齐、伸缩系数分配空间、换行参数保窄屏；
• 网格要点：先声明轨道再对号入座，区域命名让版面意图可读、重排改地名即可；
• 透明容器：结构分组不碍布局，一行声明让子项直通网格；
• 选型口诀：一维弹性、二维网格、默认流优先，老浮动只留在历史代码里；
• 间距现代化：容器间距参数取代子项互推的外边距，代码量与心智负担同降。

版面立起来了，下一节给装修加最后一点动感：过渡与动画，让状态变化顺滑收场。