区域
区域
每个探索者、编辑器和详细视图构建的双窗格工作区。一个区域没有自己的宽度和高度：它所处的分割决定了它的大小，每一侧独立滚动。两个区域是页面上放置的两个对象，而不是一个被切成两半的面板——区分它们的是它们之间的空间，而`zone--panel`是它们各自立足的基础。
分割
一列大小，另一列占据剩余部分。大小由一个步骤决定，这是区域自己的——它不继承任何嵌套在其中的东西。
zone--narrow zone--size-6
zone
这一侧接受大小列留下的任何内容。
每一侧独立滚动
可滚动区域是承载溢出的部分，而不是页面。滚动这两个中的一个，另一个保持原位，这就是这种形状的全部原因。
项目 1
项目 2
项目 3
项目 4
项目 5
项目 6
项目 7
项目 8
项目 9
项目 10
项目 11
项目 12
项目 13
项目 14
项目 15
项目 16
项目 17
项目 18
项目 19
项目 20
项目 21
项目 22
项目 23
项目 24
项目 25
项目 26
项目 27
项目 28
项目 29
项目 30
行 1
行 2
行 3
行 4
行 5
行 6
行 7
行 8
行 9
行 10
行 11
行 12
行 13
行 14
行 15
行 16
行 17
行 18
行 19
行 20
行 21
行 22
行 23
行 24
行 25
行 26
行 27
行 28
行 29
行 30
一个不滚动的头部
垂直分割：狭窄区域的高度是它所承载内容的高度，主体占用其余部分并在其下滚动。这是一个顶部有工具栏的面板的排列。
行 1
行 2
行 3
行 4
行 5
行 6
行 7
行 8
行 9
行 10
行 11
行 12
行 13
行 14
行 15
行 16
行 17
行 18
行 19
行 20
行 21
行 22
行 23
行 24
行 25
行 26
行 27
行 28
行 29
行 30
低于最小值
给定一个地板，灵活区域占据整行，大小列则在其上方移动，而不是被挤压到无。缩小窗口以查看它的折叠。
zone--narrow
zone
在这个区域给定的地板下，它占据自己的一行。
与内容宽度一致
`zone--fit-content`：该区域的宽度取决于其所包含的内容——多个列的表格——而不是剩余空间。行会整体溢出并横向滚动，滚动条位于框架底部，而不是仅在表格下方；每个区域仍然可以单独向下滚动。
项目 1
项目 2
项目 3
项目 4
项目 5
项目 6
项目 7
项目 8
项目 9
项目 10
项目 11
项目 12
项目 13
项目 14
项目 15
项目 16
项目 17
项目 18
项目 19
项目 20
项目 21
项目 22
项目 23
项目 24
项目 25
项目 26
项目 27
项目 28
项目 29
项目 30
zone--fit-content
| 列 1 | 列 2 | 列 3 | 列 4 | 列 5 | 列 6 | 列 7 | 列 8 | 列 9 | 列 10 |
|---|---|---|---|---|---|---|---|---|---|
| 12.5 kg | 25 kg | 37.5 kg | 50 kg | 62.5 kg | 75 kg | 87.5 kg | 100 kg | 112.5 kg | 125 kg |
| 12.5 kg | 25 kg | 37.5 kg | 50 kg | 62.5 kg | 75 kg | 87.5 kg | 100 kg | 112.5 kg | 125 kg |
| 12.5 kg | 25 kg | 37.5 kg | 50 kg | 62.5 kg | 75 kg | 87.5 kg | 100 kg | 112.5 kg | 125 kg |
| 12.5 kg | 25 kg | 37.5 kg | 50 kg | 62.5 kg | 75 kg | 87.5 kg | 100 kg | 112.5 kg | 125 kg |
| 12.5 kg | 25 kg | 37.5 kg | 50 kg | 62.5 kg | 75 kg | 87.5 kg | 100 kg | 112.5 kg | 125 kg |
| 12.5 kg | 25 kg | 37.5 kg | 50 kg | 62.5 kg | 75 kg | 87.5 kg | 100 kg | 112.5 kg | 125 kg |
| 12.5 kg | 25 kg | 37.5 kg | 50 kg | 62.5 kg | 75 kg | 87.5 kg | 100 kg | 112.5 kg | 125 kg |
| 12.5 kg | 25 kg | 37.5 kg | 50 kg | 62.5 kg | 75 kg | 87.5 kg | 100 kg | 112.5 kg | 125 kg |
| 12.5 kg | 25 kg | 37.5 kg | 50 kg | 62.5 kg | 75 kg | 87.5 kg | 100 kg | 112.5 kg | 125 kg |
| 12.5 kg | 25 kg | 37.5 kg | 50 kg | 62.5 kg | 75 kg | 87.5 kg | 100 kg | 112.5 kg | 125 kg |
| 12.5 kg | 25 kg | 37.5 kg | 50 kg | 62.5 kg | 75 kg | 87.5 kg | 100 kg | 112.5 kg | 125 kg |
| 12.5 kg | 25 kg | 37.5 kg | 50 kg | 62.5 kg | 75 kg | 87.5 kg | 100 kg | 112.5 kg | 125 kg |
页面旁边
`zone--portrait`：绝不窄于与行同高的纵向页面（3:4）。手动加宽后，文本保持宽度，行横向滚动，而不是挤压页面。
zone--measure (--zone-size: 48rem)
项目 1
项目 2
项目 3
项目 4
项目 5
项目 6
项目 7
项目 8
项目 9
项目 10
项目 11
项目 12