演示 AMP 布局

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

填充

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

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

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

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

使用 responsive 布局，元素会占据可用的空间，并自动调整其高度，以符合元素宽度和高度属性指定的宽高比。

使用 intrinsic 布局，元素会占据可用的空间，并自动调整其高度，以符合宽度和高度属性给出的宽高比，直到达到元素的自然大小或达到 CSS 约束。

使用 container 布局，元素会允许其子元素定义其大小，就像普通的 HTML div 标记一样。该元素被假定为自身没有特定的布局，而仅充当容器。

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