Partager via

Utiliser des conteneurs flexibles pour regrouper et aligner les composants

Flex Container est un composant de mise en page qui vous aide à concevoir et à créer des dispositions de section sur votre page Web. Vous pouvez utiliser des conteneurs flexibles pour regrouper des composants tels que des boutons, du texte, des images et d’autres conteneurs.

Ajouter un conteneur flexible

Pour ajouter un conteneur flexible à votre page Web :

  1. Ouvrez le studio de conception pour modifier le contenu et les composants de votre page.

  2. Sélectionnez la page que vous souhaitez modifier.

  3. Sélectionnez la section où vous souhaitez ajouter le composant de conteneur flexible.

  4. Survolez n’importe quelle zone de canevas modifiable, puis sélectionnez le composant conteneur flexible sur le volet Composant.

Vous pouvez créer un groupe de composants en ajoutant d’autres composants, comme des boutons et du texte, à votre conteneur flexible.

Vous pouvez également styliser et configurer votre conteneur flexible.

Modifier un conteneur flexible

Une fois que vous avez ajouté un conteneur flexible, sélectionnez le contrôle Conteneur flexible pour ouvrir la barre de propriétés et modifier votre conteneur flexible.

Propriété Description
Concevoir Change ton propriétés de conception pour personnaliser l’apparence de votre conteneur flexible.
Modifier l’arrière-plan Modifiez la couleur de l’arrière-plan en fonction de la palette de couleurs du modèle de style sélectionné. Vous pouvez également ajouter une image d’arrière-plan et ajuster la taille et la position.
Modifier le sens et l’alignement Alignez et modifiez la direction du contenu dans le conteneur flexible.
Autres Dupliquer la section, la déplacer vers le haut ou vers le bas dans la page, ou la supprimer entièrement.

Propriétés conception

Les propriétés de conception suivantes sont configurables dans le studio de conception :

Ajouter des conteneurs flexibles au format HTML

Vous pouvez également ajouter des conteneurs flexibles directement dans le HTML de votre page web avec Visual Studio Code pour le Web (version préliminaire).

Pour que le studio de conception reconnaisse et autorise le canevas à modifier des div flexbox personnalisés, appliquez-leur la classe CSS classe « ppFlexContainer ».

Important

Sans la classe ppFlexContainer, le studio de conception ne reconnaît pas les div personnalisés comme composants de conteneur flexible, et vous ne pouvez pas les modifier dans le studio de conception.

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

Générer dispositions personnalisées

Vous pouvez utiliser plusieurs conteneurs flexibles pour créer des mises en page personnalisées. Voici quelques exemples de ce que vous pouvez faire.

Configurer la disposition des cartes

Configurer les cartes flottantes