Utilizzare i contenitori flessibili per raggruppare e allineare i componenti

Flex Container è un componente di layout che consente di progettare e creare layout di sezione sulla pagina Web. È possibile utilizzare i contenitori flessibili per raggruppare componenti come pulsanti, testo, immagini e altri contenitori.

Aggiungere un contenitore flex

Per aggiungere un contenitore flessibile alla tua pagina web:

1. Apri lo studio di progettazione per modificare il contenuto e i componenti della pagina.

2. Seleziona la pagina da modificare.

3. Seleziona la sezione a cui vuoi aggiungere il componente contenitore flex.

4. Passa il puntatore del mouse su qualsiasi area della canvas modificabile e quindi seleziona il componente contenitore flessibile dal pannello del componente.

È possibile creare un gruppo di componenti aggiungendo altri componenti, ad esempio pulsanti e testo, al contenitore flex.

Puoi anche modellare e configurare il tuo contenitore flessibile.

Modificare un contenitore flessibile

Dopo aver aggiunto un contenitore flessibile, seleziona il controllo del contenitore flessibile per aprire la barra delle proprietà per modificare il contenitore flessibile.

Proprietà	Descrzione
Progettazione	Modifica le proprietà di progettazione per personalizzare l'aspetto del tuo contenitore flessibile.
Modifica sfondo	Modifica il colore dello sfondo in base alla tavolozza dei colori per il modello di stile selezionato. Puoi anche aggiungere un'immagine di sfondo e regolare le dimensioni e la posizione.
Modifica la direzione e l'allineamento	Allinea e modifica la direzione del contenuto nel contenitore flessibile.
Altri	Duplicare la sezione, spostarla in alto o in basso all'interno della pagina o eliminarla completamente.

Proprietà progettazione

Le seguenti proprietà di progettazione sono configurabili in Design Studio:

• Direzione
• Giustifica
• Allinea elementi
• Allinea contenuto

• Allinea te stesso
• Divario
• Crescita flessibile

• Compressione flessibile
• Base flessibile
• Ordine flessibile

Aggiungere contenitori flex in HTML

Puoi anche aggiungere contenitori flex direttamente al codice HTML della tua pagina Web con Visual Studio Code per il Web (anteprima).

Per fare in modo che lo studio di progettazione riconosca e consenta la modifica canvas dei div flexbox personalizzati, applica loro la classe CSS "ppFlexContainer".

Importante

Senza la classe ppFlexContainer, lo studio di progettazione non riconosce i div personalizzati come componenti del contenitore flex e non è possibile modificarli nello studio di progettazione.

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

Creare layout personalizzati

Puoi utilizzare più contenitori flessibili per creare layout personalizzati. Ecco alcuni esempi dei processi che puoi eseguire.

Impostare il layout scheda

Impostare carte mobili