演示 AMP 布局

此页面演示了 AMP 中的不同布局，以及它们在屏幕调整大小时的工作方式。

填充

使用 fill 布局，元素占据其可用的空间——宽度和高度。换句话说，填充元素的布局和大小与其父元素相匹配。

使用 fixed 布局，元素根据元素的宽度和高度属性保留其固定尺寸（无响应）。

使用 fixed-height 布局，元素占据其可用的空间，但保持高度不变。此布局适用于需要水平定位内容的元素（例如，amp-carousel）。

使用flex-item布局，元素及其父级中的其他元素将根据 flexbox 模型获取可用空间。

使用responsive布局，元素获取其可用空间，并根据元素的宽度和高度属性指定的纵横比自动调整其高度。

使用intrinsic布局，元素获取其可用空间，并根据宽度和高度属性指定的纵横比自动调整其高度，直到达到元素的自然大小或达到 CSS 约束。

使用container布局，元素让其子元素定义其大小，就像普通的 HTML div标签一样。假定元素本身没有特定的布局，而只是充当容器。

使用nodisplay布局，元素不会显示。元素在屏幕上不占用任何空间，就像其显示样式为none一样。