閱讀英文

共用方式為

使用 flex containers 對元件進行分組和對齊

  • 發行項

Flex Container 是一個配置元件，可説明您在 Web 頁面上設計和構建部分佈局。 您可以使用 Flex 容器對元件 (如按鈕、文字、圖像和其他容器) 進行分組。

新增彈性容器

要將 Flex 容器添加到您的網頁：

  1. 開啟設計工作室以編輯頁面的內容和元件。

  2. 選取要編輯的頁面。

  3. 選擇要在其中添加 flex 容器元件的部分。

  4. 將滑鼠懸停在任何可編輯的畫布區域上，然後從元件面板中選擇彈性容器元件。

您可以通過向 Flex 容器添加其他元件 (如 按鈕 和 文字) 來創建一元件。

您還可以設計和設定彈性容器。

編輯彈性容器

添加 Flex 容器后，選擇 Flex Container 控件以打開屬性列以編輯 Flex 容器。

屬性 Description
設計 變更設計屬性以自訂彈性容器的外觀。
編輯背景 依據所選樣式範本的調色盤變更背景的色彩。 您也可以新增背景影像並調整大小和位置。
變更方向和對齊方式 對齊並更改 Flex 容器中的內容方向。
其他 複製該區段，在頁面中上下移動它，或完全刪除該區段。

設計屬性

以下設計屬性可在設計工作室中設定：

在 HTML 中添加 Flex 容器

您還可以使用 Code for the Web（預覽版） Visual Studio 將 Flex 容器直接添加到網頁的 HTML 中。

要使設計工作室識別並允許自定義 flexbox div 的畫布編輯，請將類「 CSS ppFlexContainer」應用於它們。

重要

如果沒有 ppFlexContainer 類，設計工作室將無法將自定義 div 識別為 flex 容器元件，並且您無法在 design studio 中編輯它們。

HTML 
<div class="row sectionBlockLayout text-start" style="display: flex; flex-wrap: wrap; margin: 0px; min-height: auto; padding: 8px;">
    <div class="container" style="padding: 0px; display: flex; flex-wrap: wrap;">
        <div class="col-lg-12 columnBlockLayout" style="flex-grow: 1; display: flex; flex-direction: column; min-width: 250px; word-break: break-word;">
            <div class="ppFlexContainer">
                <button type="button" class="button1">Button</button>
                <button type="button" class="button1">Button</button>
            </div>
        </div>
    </div>
</div>

組建自訂配置

您可以使用多個彈性容器來建置自訂配置。 以下是一些您可以執行的操作範例。

設置卡片配置

設置浮動卡片