Flex Container 是一个布局组件，可帮助您在 Web 页面上设计和构建部分布局。 您可以使用 Flex 容器对组件（如按钮、文本、图像和其他容器）进行分组。
添加弹性容器
要将 Flex 容器添加到您的网页：
打开设计工作室以编辑页面的内容和组件。
选择要编辑的页面。
选择要添加 Flex 容器组件的部分。
将鼠标悬停在任何可编辑的画布区域，然后从组件面板中选择 flex 容器组件。
您可以通过向 Flex 容器添加其他组件（如 按钮 和 文本）来创建一组组件。
您还可以设计和配置 flex 容器。
编辑 flex 容器
添加 Flex 容器后，选择 Flex 容器控件以打开属性栏以编辑 Flex 容器。
| 属性 | 描述 |
|---|---|
| 设计 | 更改您的设计属性以自定义您的 flex 容器的外观。 |
| 编辑后台 | 根据所选样式模板的调色板更改背景颜色。 您还可以添加背景图像并调整大小及位置。 |
| 更改方向和对齐方式 | 对齐并更改 Flex 容器中的内容方向。 |
| 其他 | 复制该节，在页面内上下移动，或者完全删除该节。 |
设计属性
以下设计属性可在设计工作室中配置：
在 HTML 中添加 Flex 容器
您还可以使用 Code for the Web（预览版） Visual Studio 将 Flex 容器直接添加到网页的 HTML中。
要使设计工作室识别并允许自定义 flexbox div 的画布编辑，请将类“ CSS ppFlexContainer”应用于它们。
重要提示
如果没有 ppFlexContainer 类，设计工作室将无法将自定义 div 识别为 flex 容器组件，并且您无法在 design studio 中编辑它们。
<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>
构建自定义布局
您可以使用多个 flex 容器来构建自定义布局。 这里只是一些操作例子。