Flexbox ģenerators
Iestatiet flex konteineru un tā elementus ar vizuālām vadīklām, vērojiet izkārtojuma reakciju reāllaikā un nokopējiet CSS ar vienu klikšķi.
Jūsu izkārtojums tiek veidots tieši jūsu pārlūkprogrammā. Nekas no tā, ko šeit iestatāt, netiek augšupielādēts BroBroGo.
BUJ
Kāda ir atšķirība starp justify-content un align-items?
Justify-content izvieto elementus gar galveno asi — virzienu, kurā plūst rinda vai kolonna —, savukārt align-items pozicionē tos šķērsām otrai asij. Mainot virzienu no rindas uz kolonnu, abas asis mainās vietām, tāpēc justify-content sāk darboties no augšas uz leju, bet align-items — no kreisās uz labo pusi.
Kā darbojas atsevišķu elementu vadība?
Izvēlieties elementu pēc tā numura, pēc tam iestatiet, cik daudz tas izplešas (grow), lai aizpildītu brīvo vietu, cik daudz tas saraujas (shrink), kad vietas ir maz, tā sākuma izmēru (basis) un tā paša līdzinājumu šķērsasij. Secība (order) pārvieto elementu agrāk vai vēlāk ekrānā, neaiztiekot HTML kodu. Tikai tie elementi, kurus jūs faktiski maināt, saņem savu kārtulu CSS kodā.
Kad ir svarīgi wrap un align-content?
Ja ietīšana (wrap) ir izslēgta, visi elementi tiek spiesti vienā rindā un var tikt saspiesti šaurāki. Ieslēdzot to, elementi, kas vairs neietilpst, pārlec uz nākamo rindu — šajā brīdī kontroli pārņem align-content, izvietojot rindas kā grupu. Gap iestata atstarpi starp elementiem un starp rindām bez ārējām malām (margins).