演示 AMP 布局

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

填充

对于 fill 布局，元素会占用可用的空间——包括宽度和高度。换句话说，填充元素的布局和大小与其父元素匹配。

固定

对于 fixed 布局，元素会根据元素的 width 和 height 属性保持其固定尺寸（无响应）。

固定高度

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

弹性项

对于 flex-item 布局，元素及其父元素中的其他元素将根据 flexbox 模型占用可用空间。

响应式

对于 responsive 布局，元素会占用可用的空间，并根据元素的 width 和 height 属性指定的纵横比自动调整其高度。

固有

对于 intrinsic 布局，元素会占用可用的空间，并根据 width 和 height 属性给定的纵横比自动调整其高度，直到它达到元素的自然大小或达到 CSS 约束。

容器

对于 container 布局，元素允许其子元素定义其大小，很像普通的 HTML div 标签。假定元素本身没有特定的布局，而只是充当容器。

不显示

对于 nodisplay 布局，不会显示该元素。该元素在屏幕上占用零空间，就像其显示样式为 none 一样。