flexbox
Il componente flexbox crea un contenitore flessibile basato su CSS Flexbox per disporre gli elementi figli in modo dinamico e responsivo. Flexbox è ideale per creare layout monodimensionali (una riga o una colonna) con potenti capacità di allineamento e distribuzione dello spazio.
A differenza dei layout tradizionali, flexbox permette di controllare facilmente:
La direzione di disposizione degli elementi (orizzontale, verticale, inversa)
L’allineamento degli elementi lungo entrambi gli assi
La distribuzione dello spazio disponibile
Il comportamento quando gli elementi non entrano nel contenitore (wrapping)
Suggerimento
In poche parole, flexbox può essere considerato l’equivalente perfetto per mobile del formbuilder
Sintassi
pane.flexbox(direction=None, wrap=None, align_content=None,
justify_content=None, align_items=None,
justify_items=None, **kwargs)
Esempi
Quando usare flexbox
Flexbox è ideale per:
Layout monodimensionali (una riga o una colonna)
Allineamento e centratura di elementi
Distribuzione dinamica dello spazio
Navigation bar e toolbar
Layout di card e gallerie
Form e dialog centrati
Per layout bidimensionali più complessi con righe e colonne simultanee, considera l’uso di gridbox
Parametri:
Nome parametro |
Tipo |
Descrizione |
|---|---|---|
direction |
T |
Equivale al parametro CSS «flex-direction», e permette di specificare come disporre gli elementi della flexbox (es: direction=”row”) |
wrap |
T |
Equivale al parametro CSS «flex-wrap», e permette di specificare il comportamento degli elementi della flexbox su più righe (es: wrap=”nowrap”) |
align_content |
T |
Equivale al parametro CSS «align-content», e permette di specificare come gestire lo spazio tra gli elementi della flexbox rispetto all’asse orizzontale (es: align_content=”space-between”) |
justify_content |
T |
Equivale al parametro CSS «justify-content», e permette di specificare come gestire lo spazio tra gli elementi della flexbox rispetto all’asse verticale (es: justify_content=”space-around”) |
align_items |
T |
Equivale al parametro CSS «align-items», e permette di specificare come disporre gli elementi della flexbox rispetto all’asse orizzontale (es: align_items=”center”) |
justify_items |
T |
Equivale al parametro CSS «justify-items», e permette di specificare come disporre gli elementi della flexbox rispetto all’asse orizzontale (es: justify_items=”stretch”) |
Html Parametri |
||
_class |
T |
Permette di assegnare una specifica classe CSS al widget |
height |
T |
Permette di assegnare un’altezza al widget |
width |
T |
Permette di assegnare una larghezza al widget |
border |
T |
Permette di assegnare un bordo al widget |
rounded |
L |
Permette di assegnare un arrotondamento al widget |
style |
T |
Permette di assegnare uno stile (da esprimersi come serie di attributi CSS) al widget |
background |
T |
Permette di assegnare uno sfondo al widget |
Autore della sezione: Davide Paci
Data di pubblicazione 20-08-2024