Flexbox sau flex container este un aspect care permite utilizatorilor să alinieze și să distribuie elemente într-un container. Tailwind CSS oferă diverse clase de utilitate pentru a crea și a lucra cu flexbox. Un container flexibil la nivel de cutie este un container flexibil care se comportă/acționează ca un element la nivel de bloc și creează un bloc. Ocupă toată lățimea elementului părinte și creează o nouă linie după sine.
Acest articol va exemplifica metoda de creare a unui container flexibil la nivel de bloc în Tailwind.
Cum se creează/se creează un container Flex la nivel de bloc în Tailwind?
Pentru a crea un anumit container flexibil la nivel de bloc în Tailwind, creați o structură HTML. Apoi, adăugați „ contracta ” clasa de utilitate cu
Sintaxă
< div clasă = 'contracta ...' >
...
div >
Cod
< corp >
< div clasă = 'flex gap-2 m-2 chenar-2 chenar-negru' >
< div clasă = 'bg-galben-500 p-4' > Primul articol div >
< div clasă = 'bg-galben-500 p-4' > Al doilea articol div >
< div clasă = 'bg-galben-500 p-4' > Al treilea articol div >
div >
corp >
Aici, în containerul părinte
-
- „ contracta ” este utilizată pentru a crea un container flexibil la nivel de bloc.
- „ decalajul-2 ” clasa adaugă 2 unități de distanță între elementele copil ale lui flex.
- „ m-2 ” clasa adaugă 2 unități de marjă pe toate părțile containerului.
- „ granita-2 ” clasa adaugă chenarul containerului cu 2 unități lățime.
- „ chenar-negru ” clasa setează culoarea marginii la negru.
În elementele Child Flex:
-
- „ bg-galben-500 ” clasa aplică o culoare galbenă pe fundalul elementului flexibil.
- „ p-4 ” clasa adaugă umplutura de 4 unități pe toate părțile articolelor flexibile.
Ieșire
În rezultatul de mai sus, chenarul reprezintă că containerul este un container flexibil la nivel de bloc, care ocupă întreaga lățime a elementului părinte (browser).
Alternativ, utilizatorul poate asigura acest lucru prin inspectarea elementului containerului flexibil de pe pagina web:
Ieșirea de mai sus indică faptul că containerul este un container flexibil la nivel de bloc.
Concluzie:
Pentru a crea un container flexibil la nivel de bloc în Tailwind, este necesar să adăugați „ contracta ” clasa de utilitate cu containerul specific și specificați elementele sale fii. Utilizatorii pot defini și modifica articolele flexibile în funcție de nevoile lor. Pentru verificare, adăugați chenarul la container și vizualizați pagina web sau inspectați acel element de pe pagina web. Acest articol a explicat metoda de creare a unui container flexibil la nivel de bloc în Tailwind.