選擇配置 (HTML)

[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App,請參閱 最新文件 ]

為了讓 Windows 執行階段應用程式的使用者享有彈性及實用的使用者介面,您必須先決定最適合內容與檢視的配置模式 (使用者會透過檢視來取得內容)。這個主題描述 Windows 8 中 Windows 市集應用程式所支援的階層式樣式表層級 3 (CSS3) 配置功能。 彈性方塊與格線配置有助於建立流暢的應用程式配置及自訂控制項,而多欄與區域最適合用來配置文字及其他閱讀內容。

彈性方塊配置

彈性方塊 (Flexbox) 是一種配置機制,使用支援相對彈性縮放與內建縮放的限制型系統,以排列子元素和調整其大小。「彈性方塊」配置可以適應多種螢幕大小,適合用於數位報紙、雜誌或其他數位印刷媒體消費性案例。

彈性方塊配置專門用於配置複雜網頁,在標示常駐元素的相對位置與大小時特別實用,即使螢幕與瀏覽器的視窗大小不同或變更也沒有關係。這樣可以減少對浮動的依賴,使用浮動來進行精準定位及調整大小會比較複雜。

彈性方塊配置在定義方塊維度時會將可用空間納入考量,以調整相對大小與定位。例如,您可以確保瀏覽器視窗中多餘的空間能平均地分配到多個子元素的大小中,而且這些子元素會在包含的區塊內置中對齊。

您可以使用彈性方塊配置完成下列動作:

  • 建置流動的配置—即使使用不同的螢幕和瀏覽器視窗大小—但是包含的元素 (例如影像或控制項) 要能夠維持彼此的相對位置和大小。
  • 指定一系列元素配置軸線 (水平或垂直) 間的多餘空間,如何按比例重新配置,以增加指定元素的大小。
  • 指定一系列元素配置軸線間的多餘空間,如何重新配置以落在一系列元素的前、後或之間。
  • 指定與元素配置軸線垂直的多餘空間圍繞元素的方式 — 例如並排配置按鈕上方或下方的額外空間。
  • 控制元素在頁面上的配置方向,例如,由上到下、由左到右、由右到左或由下到上。
  • 重新排列螢幕上元素的順序,並使用與文件物件模型 (DOM) 不同的指定順序。

與格線不同的是,彈性方塊不要求必須將子元素明確地放置在父容器中。當您設計具有動態子元素數目的輕量型項目容器時,可能會偏好使用格線。

若要深入了解,請參閱彈性方塊 (Flexbox) 配置

格線對齊

格線提供一種機制,就是透過一組可預測的調整大小行為,讓作者分割可用空間,在欄與列中配置之用。如此一來,作者只要參考欄與列之間的「格線」,或是藉由定義和參考包含欄與列之交集的矩形「方格」,就能夠精準定位及調整應用程式之建置組塊元素的大小。

格線與彈性方塊相似,能夠讓配置變得比使用浮動或指令碼等方式更流暢。這個功能讓您分隔網頁或 Web 應用程式中主要區域的空間,以及定義 HTML 控制項各部分的大小、位置以及圖層之間的關係。這樣就不需要建立固定式配置,因為固定式配置無法利用瀏覽器視窗中的可用空間。 格線可以讓您將元素對齊欄和列,但因為沒有內容結構,所以它也能處理 HTML 表格無法處理的案例。使用格線搭配媒體查詢,您的配置即可順暢地適應裝置規格、方向、可用空間以及其他的變更。因為格線可同時控制水平與垂直配置,所以您可能會偏好為最上層應用程式配置使用格線,而非彈性方塊。

若要深入了解,請參閱格線配置

多欄版面配置

多欄版面配置支援在欄與欄之間的內容流動,而且欄數不限。

多欄版面配置可讓內容排列至多個欄中,同時在各欄之間保有間距並選用間隔線。它也能夠根據瀏覽器視窗的大小來調整欄數。 W3C 將多欄元素定義成一個欄寬或欄數屬性皆非自動的元素,因此多欄元素可做為多欄版面配置的容器。多欄版面配置引進了欄區塊,這是定義為內容區塊與內容之間的一種新容器類型。 多欄元素可以有多個欄區塊列。 列是以跨欄元素 (指定 column-span:all 的元素) 分隔, 並以多欄元素的方向排序。相鄰的欄區塊由欄間距分隔,可以選擇性的包含欄間隔線。

若要深入了解,請參閱多欄版面配置

區域配置

區域配置是一種頁面配置功能,可讓您使用串流至 HTML 範本中之多個空容器的單一內容串流及區段。HTML 範本是一種原始內容大部分空白的文件,主要是由空的容器組成,這些容器的大小與位置都經過設定,讓傳入的內容有特定的配置。您可以使用區域,將文字排入明確地使用階層式樣式表 (CSS) 調整大小和定位的多個欄,建立報紙或雜誌樣式的配置。

若要深入了解,請參閱區域

Windows 8 的實機操作實驗室

如果您想嘗試使用應用程式配置及其他主要 Windows 8 功能,則可下載 Windows 8 的實機操作實驗室。這些實驗室提供一個模組化的逐步介紹,以您選擇的程式設計語言 (JavaScript 和 HTML 或 C# 和 XAML) 建立 Windows 市集應用程式範例。

相關主題

配置您的 UI

配置 app 頁面

配置和縮放的 UX 指導方針