演示 AMP 布局

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

填充 (fill)

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

固定 (fixed)

使用 fixed 布局时，元素会根据元素的 width 和 height 属性保留其固定尺寸（无响应性）。

固定高度 (fixed-height)

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

弹性项目 (flex-item)

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

响应式 (responsive)

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

固有 (intrinsic)

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

容器 (container)

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

不显示 (nodisplay)

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