Use flex containers to group and align components
Flex Container is a layout component that helps you design and build section layouts on your web page. You can use flex containers to group components such as buttons, text, images, and other containers.
Add a flex container
To add a flex container to your web page:
Open the design studio to edit the content and components of your page.
Select the page you want to edit.
Select the section where you want to add the flex container component.
Hover over any editable canvas area, then select the flex container component from the component panel.
You can create a group of components by adding other components, like buttons and text, to your flex container.
You can also style and configure your flex container.
Edit a flex container
After you add a flex container, select the flex container control to open the properties bar to edit your flex container.
| Property | Description |
|---|---|
| Design | Change your design properties to customize your flex container's appearance. |
| Edit background | Change the color of the background according to the color palette for the selected styling template. You can also add a background image and adjust the size and position. |
| Change direction and alignment | Align and change the direction of content in the flex container. |
| Others | Duplicate the section, move it up or down within the page, or delete the section entirely. |
Design properties
The following design properties are configurable in design studio:
Add flex containers in HTML
You can also add flex containers directly to your web page's HTML with Visual Studio Code for the Web (preview).
To make the design studio recognize and allow canvas editing of custom flexbox divs, apply the CSS class "ppFlexContainer" to them.
Important
Without the ppFlexContainer class, design studio doesn't recognize the custom divs as flex container components, and you can't edit them in 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>
Build custom layouts
You can use multiple flex containers to build custom layouts. Here are just a few examples of what you can do.