Flexbox o contenitore flessibile è un layout che consente agli utenti di allineare e distribuire elementi all'interno di un contenitore. Tailwind CSS offre varie classi di utilità per creare e lavorare con flexbox. Un contenitore flessibile a livello di scatola è un contenitore flessibile che si comporta/agisce come un elemento a livello di blocco e crea un blocco. Occupa l'intera larghezza del suo elemento genitore e crea una nuova riga dopo se stesso.
Questo articolo esemplifica il metodo di creazione di un contenitore flessibile a livello di blocco in Tailwind.
Come creare/realizzare un contenitore Flex a livello di blocco in Tailwind?
Per creare un particolare contenitore flessibile a livello di blocco in Tailwind, crea una struttura HTML. Quindi, aggiungi il ' flettere ” classe di utilità con il
Sintassi
< div classe = 'fletti...' >
...
div >
Codice
< corpo >
< div classe = 'flex gap-2 m-2 bordo-2 bordo-nero' >
< div classe = 'bg-giallo-500 p-4' > Primo oggetto div >
< div classe = 'bg-giallo-500 p-4' > Secondo oggetto div >
< div classe = 'bg-giallo-500 p-4' > Terzo oggetto div >
div >
corpo >
Qui, nel contenitore
-
- “ flettere La classe ” viene utilizzata per creare un contenitore flessibile a livello di blocco.
- “ divario-2 La classe ” aggiunge 2 unità di spaziatura tra gli elementi figli di flex.
- “ m-2 La classe ” aggiunge 2 unità di margine a tutti i lati del contenitore.
- “ bordo-2 La classe ” aggiunge il bordo al contenitore con una larghezza di 2 unità.
- “ bordo nero ” class imposta il colore del bordo su nero.
Negli elementi flex figlio:
-
- “ bg-giallo-500 La classe ” applica un colore giallo allo sfondo dell'elemento flessibile.
- “ p-4 ” class aggiunge l'imbottitura di 4 unità su tutti i lati degli articoli flex.
Produzione
Nell'output precedente, il bordo rappresenta che il contenitore è un contenitore flessibile a livello di blocco, che occupa l'intera larghezza del suo elemento genitore (browser).
In alternativa, l'utente può verificarlo ispezionando l'elemento contenitore flessibile sulla pagina web:
L'output precedente indica che il contenitore è un contenitore flessibile a livello di blocco.
Conclusione:
Per creare un contenitore flessibile a livello di blocco in Tailwind, è necessario aggiungere ' flettere ” classe di utilità con il particolare contenitore e specificare i suoi elementi figlio. Gli utenti possono definire e modificare gli elementi flessibili in base alle loro esigenze. Per verifica, aggiungi il bordo al contenitore e visualizza la pagina web o ispeziona quell'elemento sulla pagina web. Questo articolo ha spiegato il metodo per creare un contenitore flessibile a livello di blocco in Tailwind.