Mis on CSS Flexbox?
CSS Flexbox (Flexible Box Layout) on ühemõõtmeline paigutuse mudel ruumi jaotamiseks ja üksuste joondamiseks reas või veerus. Flex-konteiner määratletakse valikuga display: flex ning selle otsesed lapsed muutuvad flex-üksusteks. Olulised konteineri omadused: flex-direction (rida või veerg), flex-wrap (ühe vs. mitme reaga), justify-content (põhitelje joondus), align-items (risttelje joondus rea kohta) ja align-content (mitme rea risttelje joondus). Olulised üksuse omadused: flex-grow (kui palju üksus kasvab), flex-shrink (kui palju see kahaneb), flex-basis (algsuurus) ja align-self (tühistab konteineri align-items konkreetse üksuse jaoks). Flexbox sobib ideaalselt navigatsioonipaneelide, kaardiridade, tsentreeritud paigutuste ja iga ühemõõtmelise korralduse jaoks.
Kuidas kasutada CSS Flexbox Generaatorit
-
Kohandage konteineri omadusi (flex-direction, flex-wrap, justify-content, align-items, align-content, gap) rippmenüüde ja sisestusvälja abil.
-
Klõpsake eelvaates mis tahes üksusel selle valimiseks (muutub oranžiks).
-
Määrake valitud üksuse flex-grow, flex-shrink, flex-basis ja align-self üksuse paneelil.
-
Klõpsake '+ Lisa üksus', et lisada rohkem üksuseid; klõpsake 'Eemalda', et kustutada valitud üksus.
-
Lülitage CSS ja HTML vahelehtede vahel, et näha genereeritud koodi, seejärel klõpsake Kopeeri.
-
Klõpsake 'Lähtesta kõik', et alustada uuesti vaikimisi 3-üksusega paigutusega.