AMP 版面配置展示

本頁面展示 AMP 中不同的版面配置，以及螢幕尺寸調整時的運作方式。

填滿 (fill)

使用 fill 版面配置，元素會佔用可用的空間，包含寬度和高度。換句話說，填滿元素的版面配置和尺寸會與其父元素相符。

固定 (fixed)

使用 fixed 版面配置，元素會根據元素的 width 和 height 屬性保留其固定尺寸 (不具備回應式)。

固定高度 (fixed-height)

使用 fixed-height 版面配置，元素會佔用可用的空間，但保持高度不變。此版面配置適用於需要水平定位內容的元素 (例如，amp-carousel)。

彈性項目 (flex-item)

使用 flex-item 版面配置，元素及其父元素中的其他元素會根據彈性盒模型佔用可用的空間。

回應式 (responsive)

使用 responsive 版面配置，元素會佔用可用的空間，並根據元素 width 和 height 屬性指定的長寬比自動調整其高度。

內在 (intrinsic)

使用 intrinsic 版面配置，元素會佔用可用的空間，並根據 width 和 height 屬性給定的長寬比自動調整其高度，直到達到元素的自然尺寸或達到 CSS 限制為止。

容器 (container)

使用 container 版面配置，元素會讓其子元素定義其尺寸，非常類似一般的 HTML div 標記。元素本身假設沒有特定的版面配置，而僅作為容器。

不顯示 (nodisplay)

使用 nodisplay 版面配置，元素不會顯示。元素不會佔用螢幕上的任何空間，如同其顯示樣式為 none 一樣。