Utilice contenedores flexibles para agrupar y alinear componentes

Flex Container es un componente de diseño que le ayuda a diseñar y crear diseños de sección en su página web. Puede utilizar contenedores flexibles para agrupar componentes como botones, texto, imágenes y otros contenedores.

Agregar un contenedor flexible

Para agregar un contenedor flexible a su página web:

1. Abra el estudio de diseño para editar el contenido y los componentes de su página.

2. Seleccione la página que desea editar.

3. Seleccione la sección en la que desee agregar el componente de contenedor flexible.

4. Pase el cursor sobre un área editable del lienzo y luego seleccione el componente contenedor flexible en el panel de componentes.

Puede crear un grupo de componentes añadiendo otros componentes, como botones y texto, a su contenedor flexible.

También puede diseñar y configurar su contenedor flexible.

Editar un contenedor flexible

Después de agregar un contenedor flexible, seleccione el control de contenedor flexible para abrir la barra de propiedades y editar el contenedor flexible.

Propiedad	Description
Diseño	Cambie sus propiedades de diseño para personalizar la apariencia de su contenedor flexible.
Editar fondo	Cambie el color del fondo según la paleta de colores de la plantilla de estilo seleccionada. También puede agregar una imagen de fondo y ajustar el tamaño y la posición.
Cambiar dirección y alineación	Alinee y cambie la dirección del contenido en el contenedor flexible.
Otras	Duplique la sección, muévela arriba o bajo página, o elimínela por completo.

Propiedades del diseño

Las siguientes propiedades de diseño se pueden configurar en el estudio de diseño:

• Dirección
• Justificar
• Alinear elementos
• Alinear contenido

• Alinear automáticamente
• Espacio
• Crecimiento flexible

• Reducción flexible
• Base flexible
• Orden flexible

Agregar contenedores flexible en HTML

También puede agregar contenedores flexibles directamente al HTML de su página web con Visual Studio Code para la web (versión preliminar).

Para hacer que el estudio de diseño reconozca y permita la edición de lienzo de divs flexbox personalizados, aplíqueles la clase CSS "ppFlexContainer".

Importante

Sin la clase ppFlexContainer, el estudio de diseño no reconoce los divs personalizados como componentes de contenedor flexible y no se pueden editar en el estudio de diseño.

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

Crear diseños personalizados

Puede utilizar varios contenedores flexibles para crear diseños personalizados. Estos son algunos ejemplos de lo que puede hacer.

Configurar el diseño de la tarjeta

Configurar tarjetas flotantes