Scelta di un layout (HTML)

[ Questo articolo è rivolto agli sviluppatori per Windows 8.x e Windows Phone 8.x che realizzano app di Windows Runtime. Gli sviluppatori che usano Windows 10 possono vedere Documentazione aggiornata ]

Per fornire l'interfaccia utente più flessibile e adattabile per gli utenti della tua app di Windows Runtime, devi prima decidere quale modalità di layout è la più appropriata per il tuo contenuto e le visualizzazioni per le quali usare il contenuto. Questo argomento descrive le funzionalità di layout Cascading Style Sheets, livello 3 (CSS3) supportate dalle app di Windows Store in Windows 8. I layout flexbox e a griglia sono utili per creare layout fluidi per app e controlli personalizzati, mentre i layout multicolonna e le aree risultano più utili per disporre il testo e altro contenuto di lettura.

Layout flexbox

Il layout flexbox è un meccanismo in cui gli elementi figlio vengono disposti e dimensionati usando un sistema basato su vincoli che supporta il ridimensionamento flessibile e intrinseco. I layout flexbox possono adattarsi a varie dimensioni dello schermo e rendono possibile la visualizzazione di quotidiani digitali, riviste e altri scenari di consumo di media di stampa digitale.

Il layout flexbox è destinato al layout di complesse pagine Web e viene usato particolarmente per la creazione della relativa posizione e dimensione di elementi che restano costanti, anche se le dimensioni dello schermo e della finestra del browser variano o vengono modificate. Questa operazione può ridurre la dipendenza sulla virgola mobile, più complicata da posizionare e ridimensionare correttamente.

Il layout flexbox occupa lo spazio disponibile nell'account nella fase di definizione delle dimensioni del riquadro, che consente il relativo posizionamento e ridimensionamento. Ad esempio, puoi verificare che lo spazio vuoto superfluo in una finestra del browser sia stata distribuita parimente per la dimensione di più elementi figlio e che questi elementi figlio siano al centro del blocco che li contiene.

Con il layout flexbox puoi:

• Creare un layout fluido—anche usando dimensioni dello schermo e della finestra del browser diverse—ma contenente elementi (ad esempio immagini o controlli) che mantengono la posizione e le dimensioni l'uno rispetto all'altro.
• Specificare come allocare in modo proporzionato spazio aggiuntivo lungo l'asse del layout (orizzontale o verticale) di una serie di elementi per aumentare le dimensioni di determinati elementi.
• Specificare come allocare spazio aggiuntivo lungo l'asse del layout di una serie di elementi prima, dopo o tra le serie di elementi.
• Specificare come posizionare spazio aggiuntivo perpendicolare all'asse del layout di un elemento intorno all'elemento stesso—ad esempio spazio aggiuntivo al di sopra o al di sotto di pulsanti posizionati l'uno accanto all'altro.
• Controllare la direzione del layout degli elementi nella pagina, ad esempio dall'alto verso il baso, da sinistra verso destra, da destra verso sinistra o dal basso verso l'alto.
• Ridistribuire gli elementi sullo schermo in un ordine diverso rispetto a come sono specificati dal DOM (Document Object Model).

A differenza della griglia, il layout flexbox non richiede il posizionamento esplicito di elementi figlio nel contenitore padre. Puoi preferire di usare la griglia se progetti contenitori di elementi leggeri con un numero di elementi figlio stabilito dinamicamente.

Per altre informazioni, vedi Layout con riquadri flessibili ("flexbox").

Allineamento alla griglia

La Griglia fornisce un meccanismo che consente agli autori di dividere lo spazio disponibile per il layout in colonne e righe usando un insieme di comportamenti di ridimensionamento prevedibili. Gli autori possono quindi posizionare e ridimensionare con precisione gli elementi di tipo blocco predefinito della loro app facendo riferimento alle Linee griglia tra le colonne e le righe oppure definendo e referenziando una Cella griglia, che corrisponde a uno spazio rettangolare di un'intersezione di colonne e righe.

Come nel layout flexbox, la Griglia consente più fluidità di layout possibile per il posizionamento usando la virgola mobile o lo script. Ti consente di dividere lo spazio per le aree più grandi di una pagina Web o un'applicazione Web e di definire la relazione tra le parti di un controllo HTML in termini di dimensione, posizione e livello. Con questa funzionalità non devi più creare un layout fisso che non può trarre vantaggio dallo spazio disponibile all'interno della finestra del browser. La Griglia ti consente di allineare gli elementi in righe e colonne ma non hanno una struttura del contenuto. Abilita anche la realizzazione di scenari che non possono essere realizzati con le tabelle HTML. Usando la Griglia insieme alle media query, puoi abilitare il tuo layout in modo che si adatti direttamente alle modifiche effettuate nel fattore di forma del dispositivo, nell'orientamento, nello spazio disponibile e così via. Poiché la griglia controlla il layout orizzontale e verticale, puoi preferire la griglia al flexbox per il layout dell'app di primo livello.

Per altre informazioni, vedi Layout a griglia.

Layout multicolonna

I layout multicolonna supportano il flusso di contenuto da una colonna a un'altra per un numero arbitrario di colonne.

Il layout multicolonna consente il flusso del contenuto in più colonne, che mantengono un gap e un filetto facoltativo tra di loro. Consente anche di variare il numero di colonne in base alla dimensione della finestra del browser. Un elemento a più colonne è definito dal W3C come un elemento la cui proprietà di larghezza o numero di colonne non è automatica, quindi agisce come un contenitore per il layout a più colonne. Il layout a più colonne introduce il riquadro colonna, definito come un nuovo tipo di contenitore tra il riquadro del contenuto e il contenuto. Gli elementi multicolonna possono avere più righe di riquadri colonna. Le righe sono divise per elementi di estensione su più colonne (elementi con column-span:all specificato). Le righe sono ordinate nella direzione dell'elemento multicolonna. I riquadri colonna adiacenti sono separati da un gap e facoltativamente da un filetto tra colonne.

Per altre informazioni, vedi Layout multicolonna.

Layout ad aree

Il layout ad aree è una funzionalità per il layout di pagina che consente di segmentare un flusso a singolo contenuto in più contenitori vuoti in un modello HTML. I modelli HTML sono documenti prevalentemente vuoti di contenuto originale e composti principalmente da contenitori vuoti che vengono ridimensionati e posizionati per fornire un layout specifico al contenuto in arrivo. Puoi usare le aree per disporre il testo tra più colonne dimensionate e posizionate in modo esplicito mediante CSS (Cascading Style Sheets), per creare un layout in stile quotidiano o rivista.

Per altre informazioni, vedi Aree.

Esercitazioni pratiche per Windows 8

Se vuoi provare a utilizzare i layout dell'app e altre funzionalità chiave di Windows 8, scarica le esercitazioni pratiche per Windows 8. Queste esercitazioni forniscono un'introduzione dettagliata modulare alla creazione di un'app di Windows Store di esempio in un linguaggio di programmazione scelto da te, come JavaScript e HTML o C# e XAML.

Argomenti correlati

Definizione del layout dell'interfaccia utente

Definizione del layout di una pagina dell'app

Linee guida per l'esperienza utente per il layout e la scalabilità