选择布局 (HTML)
[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发，请参阅 最新文档 ]
为了向 Windows 运行时应用的用户提供最灵活和适应性最强的用户界面，你首先需要确定最适合你的内容的布局模式，以及可使用内容的视图。本主题介绍级联样式表 Level 3 (CSS3) 布局功能，Windows 8 中的 Windows 应用商店应用支持此功能。 弹性框和网格布局对于为应用和自定义控件创建动态布局非常有用，而多列和区域对于设置文本和其他阅读内容的布局最有用。
弹性框布局
弹性框 (Flexbox) 是一种布局机制，在该机制中，子元素使用具有约束条件的系统进行排列和缩放，该系统既支持相对弹性缩放又支持固定缩放。弹性框布局适合多种屏幕尺寸，并且支持数字报纸、杂志和其他数字印刷媒体使用情况。
弹性框布局专用于对复杂的网页进行布局，它对于屏幕和浏览器窗口大小发生变化时保持元素的相对位置和大小不变，十分有用。该布局可减少对难以正确定位和调节大小的浮点的依赖。
弹性框布局功能在定义框的大小时会考虑留出一些可用空间，让你可以调节相对大小和位置。例如，你可以确保浏览器窗口中的多余空白区域平均分布给多个子元素的大小，并确保将这些子元素置于容器块的中间。
使用 Flexbox 布局功能，你可以：
- 构建这样一种布局—即使屏幕和浏览器窗口大小发生改变也可灵活调整—，但包含彼此的相对位置和大小保持不变的元素（如图像或控件）。
- 指定如何沿着一系列元素的布局轴（水平轴或垂直轴）按比例分配多余空间，从而增加给定元素的大小。
- 指定如何沿着一系列元素的布局轴将多余空间分配到一系列元素之前、之后或之间。
- 指定如何将垂直于元素布局轴的多余空间分布到该元素的周围—例如，并排布局的按钮上方或下方的多余空间。
- 控制元素在页面上的布局方向，例如，从上到下，从左到右，从右到左，或从下到上。
- 按照不同于文档对象模型 (DOM) 所指定排序方式对屏幕上的元素重新排序。
与网格不同，弹性框不需要在父容器中明确定位子元素。通过动态确定子元素的数量设计轻型项目容器时，你可能喜欢使用网格。
若要了解详细信息，请参阅弹性框（“Flexbox”）布局。
网格对齐
网格为创作者提供了一种机制，可以使用可预知的缩放行为将可用空间划分为列和行。创作者随后通过参考列与行之间的网格线，或者通过定义和参考网格单元（由行列交织而成的一个矩形空间），可精确地定位和确定应用构建块元素的大小。
与弹性框类似，相对于使用浮点或脚本进行定位，网格可实现更灵活的布局。CSS3 网格对齐使你可以分割网页或 Web 应用的主要区域的空间，并以尺寸、位置和层定义 HTML 控件各个部分之间的关系。从而无需创建固定布局，固定布局无法利用浏览器窗口中的可用空间。 由于网格功能使你能够将元素对齐到列和行中但它没有内容结构，因此通过它还可以实现无法由 HTML 表格实现的方案。通过将网格功能与媒体查询结合使用，可以使布局无缝地适应设备外观、方向、可用空间等因素的变化。由于网格控制水平和垂直布局，因此你可能喜欢对顶级应用布局使用网格，而不是弹性框。
若要了解详细信息，请参阅网格布局。
多列布局
多列布局支持任意列数中从一列到另一列的内容流。
使用多列布局功能可以将内容分流至多个列中，这些列之间保持一定的间距和可选隔线。该功能还可以让你根据浏览器窗口的大小来更改列的数量。 多列元素由 W3C 定义为一种元素，该元素的列宽或列数属性不设置为自动，因此充当多列布局的容器。多列布局引入了列框，它被定义为一种介于内容框与内容之间的新型容器。 多列元素可以拥有多行列框。 行由跨列元素分隔（指定了 column-span:all 的元素）。 行按多列元素的方向排序。相邻的列框之间具有列间距，可选择包含列隔线。
若要了解详细信息，请参阅多列布局。
区域布局
区域布局是一个页面布局功能，它允许你提取单个内容流，并将该流分割成 HTML 模板中的多个空容器。“HTML 模板”是指原始内容基本为空但主要由空容器组成的文档，这些空容器在经过大小调整和定位后会为传入的内容提供特定的布局。你可以使用区域让文本跨多列（这些列可以使用级联样式表 (CSS) 明确调整大小和定位），并创建基于报纸或杂志的布局。
若要了解详细信息，请参阅区域。
Windows 8 动手实验室
如果你要尝试使用应用布局和其他关键 Windows 8 功能，请下载 Windows 8 动手实验室。这些实验室提供用于以你选择的编程语言（JavaScript 和 HTML 或 C# 和 XAML）创建示例 Windows 应用商店应用的模块化分步说明。