Flexbox Generator

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

Predlošci
Kontejner
Smjer
Prelamanje (wrap)
Poravnanje po glavnoj osi (justify-content)
Poravnanje stavki (align-items)
Stavke
Stavka 1
Sopstveno poravnanje (align-self)
CSS
Podesite kontejner i stavke da oblikujete svoj raspored.

Vaš raspored se gradi direktno 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?

Justify-content raspoređuje stavke duž glavne ose — smjera u kojem teče red ili kolona — dok ih align-items pozicionira duž poprečne ose. Promijenite smjer iz reda u kolonu i dvije ose će se zamijeniti, pa justify-content počinje raditi od vrha prema dnu, a align-items s lijeva na desno.

Kako funkcionišu kontrole za pojedinačne stavke?

Odaberite stavku prema njenom broju, a zatim postavite koliko raste da popuni slobodan prostor (grow), koliko se smanjuje kada je prostor tijesan (shrink), njenu početnu veličinu (basis) i njeno sopstveno poravnanje na poprečnoj osi. Redoslijed (order) pomjera stavku ranije ili kasnije na ekranu bez mijenjanja HTML koda. Samo stavke koje stvarno promijenite dobijaju sopstveno pravilo u CSS-u.

Kada su važni wrap i align-content?

Kada je prelamanje isključeno, svaka stavka je prisiljena u jednu liniju i može biti stisnuta. Kada ga uključite, stavke koje više ne mogu stati prelaze u sljedeći red — tada align-content preuzima kontrolu, raspoređujući redove kao grupu. Razmak (gap) postavlja prostor između stavki i između redova, bez potrebe za marginama.

CSS Cubic Bezier GeneratorPovucite dvije ručice da oblikujete krivu ubrzanja, posmatrajte kretanje tačke u poređenju sa ravnomjernim i kopirajte cubic-bezier() vrijednost.Generator za Border RadiusZaoblite svaki ugao pomoću klizača, oblikujte organske mrlje pomoću eliptičnog režima i odmah kopirajte CSS.Generator za Box ShadowPovucite klizače da oblikujete box-shadow, slažite slojeve za dubinu i odmah kopirajte gotov CSS.Generator gradijenataKreirajte linearni, radijalni ili konusni gradijent, dodajte tačke prekida boje i postavite smjer, a zatim kopirajte CSS jednim klikom.CSS Grid GeneratorPostavite kolone i redove, prevucite preko ćelija da postavite stavke i kopirajte CSS mreže sa odgovarajućim HTML-om jednim klikom.Kalkulator za CSS clamp()Unesite veličinu za male i velike ekrane i dobićete fluidnu clamp() vrijednost koja se glatko skalira između njih — za veličine fonta, padding, margine ili razmake.Konverter bojaKonvertujte boje između HEX, RGB, HSL, HSV, CMYK i LAB formata — uredite bilo koje polje i ostala se ažuriraju u hodu.