Compartilhar via

Usar 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 em 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:

  1. Abra o estúdio de design para editar o conteúdo e os componentes da sua página.

  2. Selecione a página que deseja editar.

  3. Selecione a seção na qual você deseja adicionar o componente de contêiner flexível.

  4. 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 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, selecione o controle de contêiner flexível para abrir a barra de propriedades e editar o 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 Alinhe 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 um contêiner flexível em HTML

Você também pode adicionar contêineres flexíveis diretamente ao HTML da sua página da Web com Visual Studio Code for the 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 personalizadas, aplique a CSS classe "ppFlexContainer" a elas.

Importante

Sem a classe ppFlexContainer , o estúdio de design não reconhece as divs personalizadas como componentes de contêiner flexível e você não pode editá-las no estúdio de design.

<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.

Configurar layout de cartão

Configurar cartões flutuantes