„Flexbox“ arba „flex konteineris“ yra išdėstymas, leidžiantis vartotojams lygiuoti ir paskirstyti elementus konteineryje. Tailwind CSS siūlo įvairias paslaugų klases, skirtas kurti ir dirbti su „flexbox“. Dėžutės lygio lankstus konteineris yra lankstus konteineris, kuris veikia / veikia kaip bloko lygio elementas ir sukuria bloką. Jis užima visą pirminio elemento plotį ir po savęs sukuria naują eilutę.
Šis įrašas parodys bloko lygio lanksčios talpyklos kūrimo metodą „Tailwind“.
Kaip sukurti / pasidaryti bloko lygio lanksčią konteinerį „Tailwind“?
Norėdami sukurti tam tikrą bloko lygio lanksčią talpyklą „Tailwind“, sukurkite HTML struktūrą. Tada pridėkite „ lankstus ” naudingumo klasę su norimu
Sintaksė
< div klasė = 'flex...' >
...
div >
Kodas
< kūnas >
< div klasė = 'lankstus tarpas-2 m-2 kraštelis-2 kraštelis-juodas' >
< div klasė = 'bg-yellow-500 p-4' > Pirmas daiktas div >
< div klasė = 'bg-yellow-500 p-4' > Antras elementas div >
< div klasė = 'bg-yellow-500 p-4' > Trečias punktas div >
div >
kūnas >
Čia, pirminiame
-
- “ lankstus “ klasė naudojama bloko lygio lanksčiam konteineriui sukurti.
- “ tarpas-2 “ klasė prideda 2 vienetus tarpo tarp antrinių „flex“ elementų.
- “ m-2 “ klasė prideda 2 maržos vienetus prie visų konteinerio kraštų.
- “ siena-2 ” klasė prideda 2 vienetų pločio konteinerio kraštinę.
- “ kraštinė-juoda “ klasė nustato kraštinės spalvą į juodą.
Vaikų lankstumo elementuose:
-
- “ bg-geltonas-500 “ klasė lanksčiojo elemento fonui pritaiko geltoną spalvą.
- “ p-4 “ klasė prideda 4 vienetų paminkštinimus prie visų lanksčių daiktų pusių.
Išvestis
Aukščiau pateiktame išvestyje kraštinė reiškia, kad konteineris yra bloko lygio lankstus konteineris, kuris užima visą pagrindinio elemento (naršyklės) plotį.
Arba vartotojas gali tai įsitikinti apžiūrėdamas lankstaus konteinerio elementą tinklalapyje:
Aukščiau pateikta išvestis rodo, kad konteineris yra bloko lygio lankstus konteineris.
Išvada:
Norint sukurti bloko lygio lanksčią talpyklą „Tailwind“, reikia pridėti „ lankstus ” naudingumo klasę su konkrečiu konteineriu ir nurodykite antrinius jo elementus. Vartotojai gali apibrėžti ir modifikuoti lanksčius elementus pagal savo poreikius. Norėdami patvirtinti, pridėkite kraštinę prie sudėtinio rodinio ir peržiūrėkite tinklalapį arba patikrinkite tą elementą tinklalapyje. Šiame straipsnyje paaiškintas bloko lygio lankstaus konteinerio „Tailwind“ kūrimo metodas.