Ano ang CSS Flexbox?
Ang CSS Flexbox (Flexible Box Layout) ay isang isang-dimensyonal na modelo ng layout para sa pamamahagi ng espasyo at pag-aayos ng mga aytem sa isang hilera o kolumna. Ang flex container ay tinukoy gamit ang display: flex, at ang mga direktang anak nito ay nagiging mga flex item. Pangunahing katangian ng container: flex-direction (hilera o kolumna), flex-wrap (iisang linya kumpara sa maraming linya), justify-content (pagkakahanay ng pangunahing aksis), align-items (pagkakahanay ng cross-aksis bawat linya), at align-content (pagkakahanay ng cross-aksis ng maraming linya). Pangunahing katangian ng aytem: flex-grow (gaano kalaki ang lumalaki ng aytem), flex-shrink (gaano ito lumiit), flex-basis (paunang laki), at align-self (nino-override ang align-items ng container para sa isang partikular na aytem). Ang Flexbox ay perpekto para sa mga navigation bar, hilera ng card, mga layout na naka-sentro, at anumang isang-dimensyonal na ayos.
Paano Gamitin ang CSS Flexbox Generator
-
I-adjust ang mga katangian ng container (flex-direction, flex-wrap, justify-content, align-items, align-content, gap) gamit ang mga dropdown at input.
-
Mag-click ng anumang aytem sa preview para piliin ito (magiging orange).
-
Itakda ang flex-grow, flex-shrink, flex-basis, at align-self ng napiling aytem sa panel ng aytem.
-
Mag-click ng '+ Magdagdag ng Aytem' para magdagdag ng mga aytem; mag-click ng 'Alisin' para burahin ang napiling aytem.
-
Lumipat sa pagitan ng mga tab na CSS at HTML para makita ang nabuong code, pagkatapos ay mag-click ng Kopyahin.
-
Mag-click ng 'I-reset ang Lahat' para magsimula muli sa default na layout na may 3 aytem.