Ang Flexbox o flex container ay isang layout na nagbibigay-daan sa mga user na ihanay at ipamahagi ang mga elemento sa loob ng isang container. Nag-aalok ang Tailwind CSS ng iba't ibang klase ng utility para gumawa at magtrabaho kasama ang flexbox. Ang box-level na flex container ay isang flex container na kumikilos/gumaganap tulad ng block-level na elemento at gumagawa ng block. Kinukuha nito ang buong lapad ng pangunahing elemento nito at gumawa ng bagong linya pagkatapos nito.
Ipapakita ng write-up na ito ang paraan ng paggawa ng block-level flex container sa Tailwind.
Paano Gumawa/Gumawa ng Block-Level Flex Container sa Tailwind?
Para gumawa ng partikular na block-level flex container sa Tailwind, gumawa ng HTML structure. Pagkatapos, idagdag ang ' baluktot ” utility class na may ninanais na
Syntax
< div klase = 'flex ...' >
...
div >
Code
< katawan >
< div klase = 'flex gap-2 m-2 border-2 border-black' >
< div klase = 'bg-dilaw-500 p-4' > Unang Item div >
< div klase = 'bg-dilaw-500 p-4' > Pangalawang Item div >
< div klase = 'bg-dilaw-500 p-4' > Pangatlong Item div >
div >
katawan >
Dito, sa parent
-
- “ baluktot Ang klase ng ” ay ginagamit upang lumikha ng isang block-level na flex na lalagyan.
- “ gap-2 ” nagdaragdag ang klase ng 2 unit ng spacing sa pagitan ng mga child element ni flex.
- “ m-2 ” class ay nagdaragdag ng 2 unit ng margin sa lahat ng panig ng lalagyan.
- “ hangganan-2 ” idinaragdag ng klase ang hangganan sa lalagyan na may lapad na 2 unit.
- “ itim na hangganan ” itinatakda ng klase ang kulay ng hangganan sa itim.
Sa mga elemento ng pagbaluktot ng bata:
-
- “ bg-dilaw-500 ” class ay naglalapat ng dilaw na kulay sa background ng flex item.
- “ p-4 ” idinaragdag ng klase ang padding ng 4 na unit sa lahat ng panig ng flex item.
Output
Sa output sa itaas, kinakatawan ng border na ang container ay isang block-level na flex na lalagyan, na sumasakop sa buong lapad ng parent element nito (browser).
Bilang kahalili, matitiyak ito ng user sa pamamagitan ng pag-inspeksyon ng elemento ng flex container sa web page:
Ang output sa itaas ay nagpapahiwatig na ang lalagyan ay isang block-level na flex na lalagyan.
Konklusyon:
Upang lumikha ng isang block-level na flex na lalagyan sa Tailwind, kinakailangan na idagdag ang ' baluktot ” utility class na may partikular na lalagyan at tukuyin ang mga child element nito. Maaaring tukuyin at baguhin ng mga user ang mga flex na item ayon sa kanilang mga pangangailangan. Para sa pag-verify, idagdag ang hangganan sa lalagyan at tingnan ang web page o suriin ang elementong iyon sa web page. Ipinaliwanag ng artikulong ito ang paraan ng paggawa ng block-level flex container sa Tailwind.