Flexbox generator

Postavite flex kontejner i njegove stavke pomoću vizualnih kontrola, pratite promjene uživo i kopirajte CSS jednim klikom.

Predlošci
Kontejner
Smjer (Direction)
Prelamanje (Wrap)
Poravnanje po glavnoj osi (Justify content)
Poravnanje stavki (Align items)
Stavke
Stavka 1
Poravnanje pojedinačne stavke (Align self)
CSS
Prilagodite kontejner i stavke kako biste oblikovali svoj raspored.

Vaš se raspored gradi izravno u Vašem pregledniku. Ništa što ovdje postavite ne šalje se na BroBroGo.

Česta pitanja

Koja je razlika između justify-content i align-items?

Svojstvo justify-content raspoređuje stavke duž glavne osi — smjera u kojem teče redak ili stupac — dok ih align-items pozicionira duž poprečne osi. Promijenite smjer iz retka u stupac i te dvije osi mijenjaju mjesta, pa justify-content počinje raditi od vrha prema dnu, a align-items s lijeva na desno.

Kako funkcioniraju kontrole za pojedinačne stavke?

Odaberite stavku prema njezinom broju, a zatim postavite koliko raste kako bi ispunila slobodan prostor (grow), koliko se smanjuje kada je prostor tijesan (shrink), njezinu početnu veličinu (basis) i njezino vlastito poravnanje na poprečnoj osi. Redoslijed (order) pomiče stavku ranije ili kasnije na zaslonu bez mijenjanja HTML koda. Samo stavke koje stvarno promijenite dobivaju vlastito pravilo u CSS-u.

Kada su važni wrap i align-content?

Kada je prelamanje isključeno, svaka je stavka prisiljena u jedan redak i može se stisnuti. Kada ga uključite, stavke koje više ne stanu prelaze u sljedeći redak — tada na scenu stupa align-content, koji raspoređuje retke kao grupu. Gap postavlja razmak između stavki i između redaka, bez potrebe za marginama.

CSS Cubic Bezier GeneratorPovucite dvije ručice kako biste oblikovali krivulju ubrzanja, pratite kretanje točke u usporedbi sa stabilnom brzinom i kopirajte cubic-bezier() vrijednost.Generator zaobljavanja kutova (Border Radius)Zaoblite svaki kut pomoću klizača, oblikujte organske mrlje pomoću eliptičnog načina rada i odmah kopirajte CSS.Generator sjena (Box Shadow)Povucite klizače za oblikovanje sjene elementa, složite slojeve za dubinu i odmah kopirajte gotov CSS.Generator gradijenataIzgradite linearni, radijalni ili konusni gradijent, dodajte točke boja i postavite smjer, a zatim kopirajte CSS jednim klikom.CSS Grid GeneratorPostavite stupce i retke, povucite preko ćelija za postavljanje stavki i kopirajte grid CSS s odgovarajućim HTML-om jednim klikom.CSS clamp() kalkulatorUnesite veličinu za male i velike zaslone i dobit ćete fluidnu clamp() vrijednost koja se glatko skalira između njih — za veličine fonta, padding, margine ili razmake.Pretvarač bojaPretvorite boje između formata HEX, RGB, HSL, HSV, CMYK i LAB — uredite bilo koje polje i ostala se ažuriraju u hodu.