AMP 版面配置展示

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

填滿 (fill)

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

固定 (fixed)

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

固定高度 (fixed-height)

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

彈性項目 (flex-item)

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

回應式 (responsive)

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

內在 (intrinsic)

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

容器 (container)

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

不顯示 (nodisplay)

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