Use contêineres flexíveis para agrupar e alinhar componentes
O Flex Container é um componente de layout que ajuda você a projetar e criar layouts de seção na sua página da web. Você pode usar contêineres flexíveis para agrupar componentes como botões, texto, imagens e outros contêineres.
Adicionar um contêiner flexível
Para adicionar um contêiner flexível à sua página da web:
Abra o estúdio de design para editar o conteúdo e os componentes da sua página.
Selecione a página que deseja editar.
Select a seção onde você deseja adicionar o componente do contêiner flexível.
Passe o mouse sobre qualquer área de tela editável e selecione o componente do contêiner flexível no painel do componente.
Você pode criar um grupo de componentes adicionando outros componentes, como botões e texto, ao seu contêiner flexível.
Você também pode estilizar e configurar seu contêiner flexível.
Editar um contêiner flexível
Depois de adicionar um contêiner flexível, pressione Select no controle do contêiner flexível para abrir a barra de propriedades e editar seu contêiner flexível.
| Propriedade | Descrição |
|---|---|
| Projetar | Altere suas propriedades de design para personalizar a aparência do contêiner flexível. |
| Editar segundo plano | Altere a cor do plano de fundo de acordo com a paleta de cores do modelo de estilo selecionado. Você também pode adicionar uma imagem de fundo e ajustar o tamanho e a posição. |
| Alterar direção e alinhamento | Alinhar e altere a direção do conteúdo no contêiner flexível. |
| Outros | Duplique a seção, mova-a para cima ou para baixo dentro da página, ou exclua a seção totalmente. |
Propriedades de design
As seguintes propriedades de design são configuráveis no estúdio de design:
Adicionar contêineres flexíveis em HTML
Você também pode adicionar contêineres flexíveis diretamente ao HTML da sua página da web com o Visual Studio Código para a Web (versão preliminar).
Para fazer com que o estúdio de design reconheça e permita a edição de tela de divs flexbox personalizados, aplique a CSS classe "ppFlexContainer" a eles.
Importante
Sem a classe ppFlexContainer , o Design Studio não reconhece os divs personalizados como componentes do Flex Container, e você não pode editá-los no 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>
Criar layouts personalizados
Você pode usar vários contêineres flexíveis para criar layouts personalizados. Aqui estão apenas alguns exemplos do que você pode fazer.