Kas ir CSS Flexbox?
CSS Flexbox (Flexible Box Layout) ir viendimensionāls izkārtojuma modelis telpas sadalīšanai un vienību izlīdzināšanai rindā vai kolonnā. Flex konteiners tiek definēts ar display: flex, un tā tiešie bērni kļūst par flex vienībām. Galvenās konteinera īpašības: flex-direction (rinda vai kolonna), flex-wrap (viena vs. vairākas rindas), justify-content (galvenās ass izlīdzināšana), align-items (šķērsass izlīdzināšana katrai rindai) un align-content (vairāku rindu šķērsass izlīdzināšana). Galvenās vienības īpašības: flex-grow (cik daudz vienība aug), flex-shrink (cik daudz tā sarūk), flex-basis (sākotnējais izmērs) un align-self (pārraksta konteinera align-items konkrētai vienībai). Flexbox ir ideāli piemērots navigācijas joslām, karšu rindām, centrētiem izkārtojumiem un jebkurai viendimensionālai kārtībai.
Kā izmantot CSS Flexbox Ģeneratoru
-
Pielāgojiet konteinera īpašības (flex-direction, flex-wrap, justify-content, align-items, align-content, gap), izmantojot nolaižamās izvēlnes un ievades lauku.
-
Priekšskatījumā noklikšķiniet uz jebkuras vienības, lai to atlasītu (kļūst oranža).
-
Vienību panelī iestatiet atlasītās vienības flex-grow, flex-shrink, flex-basis un align-self.
-
Noklikšķiniet uz '+ Pievienot vienību', lai pievienotu vairāk vienību; noklikšķiniet uz 'Noņemt', lai dzēstu atlasīto vienību.
-
Pārslēdzieties starp CSS un HTML cilnēm, lai redzētu ģenerēto kodu, pēc tam noklikšķiniet uz Kopēt.
-
Noklikšķiniet uz 'Atiestatīt visu', lai sāktu no jauna ar noklusējuma 3 vienību izkārtojumu.