Utilice contenedores flexibles para agrupar y alinear componentes
Flex Container es un componente diseño que le ayuda a diseñar y crear diseños de secciones 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:
Abra el estudio de diseño para editar el contenido y los componentes de su página.
Seleccione la página que desea editar.
Seleccionar la sección donde desea agregar el componente contenedor flexible.
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 agregando 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, Seleccionar el control de contenedor flexible para abrir la barra de propiedades para editar su 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 | Alinear y cambia 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:
Agregar contenedores flexibles en HTML
También puedes agregar contenedores flexibles directamente al HTML de tu página web con Visual Studio Código para la Web (versión preliminar).
Para que el estudio de diseño reconozca y permita la edición del lienzo de los divs de flexbox personalizados, aplíqueles la CSS clase "ppFlexContainer".
Importante
Sin la clase ppFlexContainer , Design Studio no reconoce los divs personalizados como componentes de contenedor flexible y no es posible editarlos en 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>
Crear diseños personalizados
Puede utilizar varios contenedores flexibles para crear diseños personalizados. Estos son algunos ejemplos de lo que puede hacer.