.. _widgetpedia/elements/gnrwidgets/flexbox:

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)

.. hint::
  In poche parole, *flexbox* può essere considerato l'equivalente perfetto per mobile del  :ref:`formbuilder<widgetpedia/elements/gnrwidgets/formbuilder>` 

Sintassi
--------

:: 

  pane.flexbox(direction=None, wrap=None, align_content=None,
                  justify_content=None, align_items=None,
                  justify_items=None, **kwargs)

Esempi
------
.. raw:: html

 <div class="gnrexamplebox">
            <a class="gnrexamplebox_title" onclick='gnrExampleIframe(this.nextElementSibling,{"height": 200, "width": "100%", "examples_root": "https://dev.genropy.org/webpages/docu_examples", "examples_root_local": "", "example_folder": "widgetpedia/elements/gnrwidgets/flexbox", "parsstring": "?_source_viewer=stack&_source_toolbar=f&cm_theme=night", "example_label": "Contenitore orizzontale semplice ", "example_name": "simple"} );'>
                Contenitore orizzontale semplice 
            </a>
            <div></div>
        </div> 
        

.. raw:: html

 <div class="gnrexamplebox">
            <a class="gnrexamplebox_title" onclick='gnrExampleIframe(this.nextElementSibling,{"height": 200, "width": "100%", "examples_root": "https://dev.genropy.org/webpages/docu_examples", "examples_root_local": "", "example_folder": "widgetpedia/elements/gnrwidgets/flexbox", "parsstring": "?_source_viewer=stack&_source_toolbar=f&cm_theme=night", "example_label": "Barra di navigazione ", "example_name": "navigazione"} );'>
                Barra di navigazione 
            </a>
            <div></div>
        </div> 
        

.. raw:: html

 <div class="gnrexamplebox">
            <a class="gnrexamplebox_title" onclick='gnrExampleIframe(this.nextElementSibling,{"height": 200, "width": "100%", "examples_root": "https://dev.genropy.org/webpages/docu_examples", "examples_root_local": "", "example_folder": "widgetpedia/elements/gnrwidgets/flexbox", "parsstring": "?_source_viewer=stack&_source_toolbar=f&cm_theme=night", "example_label": "Wrapping ", "example_name": "flexbox"} );'>
                Wrapping 
            </a>
            <div></div>
        </div> 
        

.. raw:: html

 <div class="gnrexamplebox">
            <a class="gnrexamplebox_title" onclick='gnrExampleIframe(this.nextElementSibling,{"height": 200, "width": "100%", "examples_root": "https://dev.genropy.org/webpages/docu_examples", "examples_root_local": "", "example_folder": "widgetpedia/elements/gnrwidgets/flexbox", "parsstring": "?_source_viewer=stack&_source_toolbar=f&cm_theme=night", "example_label": "Layout di card ", "example_name": "cards"} );'>
                Layout di card 
            </a>
            <div></div>
        </div> 
        

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  :ref:`gridbox<widgetpedia/elements/gnrwidgets/gridbox>` 

.. raw:: html

 <hr>

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

.. sectionauthor:: Davide Paci

.. raw:: html

   <p style="font-size:0.8em;">Data di pubblicazione 20-08-2024</p>