Template:Flexbox

Il flexbox è un nuovo metodo per creare tabelle. Il flexbox si adatta automaticamente alla risoluzione, ciò lo rende adatto alla navigazione sia su schermi grandi che piccoli.

Questa è una versione aggiornata di Template:Flexbox-inizio; se in passato avete usato quel template sarà utile leggere le nuove istruzioni.

Differenze dal template precedente

• In questo template non va specificato l'inizio e la fine della tabella; piuttosto, va specificato l'inizio e la fine della riga.
• Non è necessario specificare il numero di colonne.
• È possibile specificare la larghezza esatta di ogni casella.
• È possibile unire fino a 5 caselle in orizzontale.
• È possibile centrare il testo verticalmente (impostazione di default) e andare a capo simultaneamente.

Uso del template

• {{Flexbox
  • | tipo=inizio-riga : apre una riga.
    • | intestazione=sì : specifica che questa è la prima riga della tabella.
  • | tipo=casella : crea una casella.
    • | contiene=X : il contenuto della casella sarà "X".
    • | importante=sì : se lo schermo è piccolo, la casella deve allargarsi il più possibile.
    • | importante=no : se lo schermo è piccolo, la casella deve mantenere la sua larghezza.
    • | sezionemobile=X : rende questa casella una sotto-intestazione per le risoluzioni mobile. X è il colore della sotto-intestazione (esempio: sezionemobile=#000000). Potete scrivere semplicemente sezionemobile=sì per ottenere il colore di default. Non ha effetto su desktop.
    • | larghezza=X : la larghezza della casella sarà X (esempio: larghezza=100px o larghezza=10%).
    • | larghezza=riempi : la casella riempirà automaticamente lo spazio orizzontale disponibile.
    • | descrizione=X : passando il mouse su una casella si vedrà una descrizione (solo su desktop).
    • | unisci=X : se inserito, rimuove il bordo tra X (unisci=2, unisci=3, unisci=4 o unisci=5) caselle (nota: la larghezza va indicata manualmente; per esempio, se una sola casella è larga 100px, due caselle unite sono larghe 200px).
    • | stile=X : se inserito, personalizza lo stile CSS della casella (esempio: stile=color:green o, per inserire più proprietà, stile=color:green; background:black; text-align:left; display:inline).
  • | tipo=fine-riga : chiude una riga.
• }}

Esempio #1: un flexbox molto semplice

Codice

{{Flexbox | tipo=inizio-riga | intestazione=sì }}
 {{Flexbox | tipo=casella | importante=sì | larghezza=riempi | contiene=Personaggio }}
 {{Flexbox | tipo=casella | importante=no | larghezza=150px | contiene=Colore del cappello }}
 {{Flexbox | tipo=casella | importante=no | larghezza=150px | contiene=Altezza }}
{{Flexbox | tipo=fine-riga }}

{{Flexbox | tipo=inizio-riga | intestazione=no }}
 {{Flexbox | tipo=casella | importante=sì | larghezza=riempi | contiene=[[Mario]] }}
 {{Flexbox | tipo=casella | importante=no | larghezza=150px | contiene=Rosso }}
 {{Flexbox | tipo=casella | importante=no | larghezza=150px | contiene=Basso }}
{{Flexbox | tipo=fine-riga }}

{{Flexbox | tipo=inizio-riga | intestazione=no }}
 {{Flexbox | tipo=casella | importante=sì | larghezza=riempi | contiene=[[Luigi]] }}
 {{Flexbox | tipo=casella | importante=no | larghezza=150px | contiene=Verde }}
 {{Flexbox | tipo=casella | importante=no | larghezza=150px | contiene=Alto }}
{{Flexbox | tipo=fine-riga }}

Risultato

Personaggio

Colore del cappello

Altezza

Mario

Rosso

Basso

Luigi

Verde

Alto

Esempio #2: un flexbox colorato

Codice

{{Flexbox | tipo=inizio-riga | intestazione=sì }}
 {{Flexbox | tipo=casella | importante=sì | larghezza=riempi | contiene=Personaggio }}
 {{Flexbox | tipo=casella | importante=no | larghezza=150px | contiene=Colore del cappello }}
 {{Flexbox | tipo=casella | importante=no | larghezza=150px | contiene=Altezza }}
{{Flexbox | tipo=fine-riga }}

{{Flexbox | tipo=inizio-riga | intestazione=no }}
 {{Flexbox | tipo=casella | importante=sì | larghezza=riempi | contiene=[[Mario]] }}
 {{Flexbox | tipo=casella | importante=no | larghezza=150px | contiene=Rosso | stile=color:red }}
 {{Flexbox | tipo=casella | importante=no | larghezza=150px | contiene=Basso }}
{{Flexbox | tipo=fine-riga }}

{{Flexbox | tipo=inizio-riga | intestazione=no }}
 {{Flexbox | tipo=casella | importante=sì | larghezza=riempi | contiene=[[Luigi]] }}
 {{Flexbox | tipo=casella | importante=no | larghezza=150px | contiene=Verde | stile=color:green}}
 {{Flexbox | tipo=casella | importante=no | larghezza=150px | contiene=Alto }}
{{Flexbox | tipo=fine-riga }}

Risultato

Personaggio

Colore del cappello

Altezza

Mario

Rosso

Basso

Luigi

Verde

Alto

Esempio #3: un flexbox unito

Codice

{{Flexbox | tipo=inizio-riga | intestazione=sì }}
 {{Flexbox | tipo=casella | importante=sì | larghezza=riempi | contiene=Personaggio }}
 {{Flexbox | tipo=casella | importante=no | larghezza=100px | contiene=Colore del cappello }}
 {{Flexbox | tipo=casella | importante=no | larghezza=100px | contiene=Colore della maglietta }}
 {{Flexbox | tipo=casella | importante=no | larghezza=100px | contiene=Colore della salopette }}
 {{Flexbox | tipo=casella | importante=no | larghezza=100px | contiene=Altezza }}
{{Flexbox | tipo=fine-riga }}

{{Flexbox | tipo=inizio-riga | intestazione=no }}
 {{Flexbox | tipo=casella | importante=sì | larghezza=riempi | contiene=[[Mario]] }}
 {{Flexbox | tipo=casella | importante=no | larghezza=200px | unisci=2 | contiene=Rosso | stile=color:red }}
 {{Flexbox | tipo=casella | importante=no | larghezza=100px | contiene=Blu | stile=color:blue }}
 {{Flexbox | tipo=casella | importante=no | larghezza=100px | contiene=Basso }}
{{Flexbox | tipo=fine-riga }}

{{Flexbox | tipo=inizio-riga | intestazione=no }}
 {{Flexbox | tipo=casella | importante=sì | larghezza=riempi | contiene=[[Luigi]] }}
 {{Flexbox | tipo=casella | importante=no | larghezza=200px | unisci=2 | contiene=Verde | stile=color:green }}
 {{Flexbox | tipo=casella | importante=no | larghezza=100px | contiene=Blu | stile=color:blue }}
 {{Flexbox | tipo=casella | importante=no | larghezza=150px | contiene=Alto }}
{{Flexbox | tipo=fine-riga }}

Risultato

Personaggio

Colore del cappello

Colore della maglietta

Colore della salopette

Altezza

Mario

Rosso

Blu

Basso

Luigi

Verde

Blu

Alto

Possibili domande

È essenziale inserire gli spazi tra i parametri esattamente come nell'esempio?

No. Gli spazi sono presenti esclusivamente per mostrare il codice in maniera ordinata, e non fanno alcuna differenza.

Questi due codici sono identici:

• tipo=casella | importante=no | larghezza=100px | contiene=Blu
• tipo=casella|importante=no|larghezza=100px|contiene=Blu

È essenziale che i parametri siano nello stesso ordine dell'esempio?

No, non fa alcuna differenza. È possibile, per esempio, inserire contiene prima di importante.