演示 AMP 布局

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

fill

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

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

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

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

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

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

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

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