Flexbox Generator

CSS Flexbox (Flexible Box Layout) je jednodimenzionalni model rasporeda koji omogućava efikasno raspoređivanje, poravnanje i raspodjelu prostora među stavkama unutar kontejnera, čak i kada su njihove dimenzije dinamične ili nepoznate. Flexbox se koristi za rješavanje složenih dizajnerskih izazova na webu, pružajući kontrolu nad smjerom, redoslijedom i proporcijama elemenata bez potrebe za komplikovanim proračunima margina ili pozicioniranja.

Ovaj alat omogućava vizuelno konfigurisanje flex kontejnera i njegovih stavki. Kroz interaktivne kontrole možete definisati ponašanje rasporeda, pratiti promjene u realnom vremenu kroz vizuelni prikaz i preuzeti generisani CSS kod spreman za integraciju u projekat.

Upravljanje kontejnerom i osama rasporeda

Rad sa flexboxom počinje definisanjem svojstava na roditeljskom elementu, odnosno kontejneru. Pod sekcijom Kontejner nalaze se ključne kontrole koje određuju ponašanje cjelokupnog rasporeda:

• Smjer: Određuje glavnu osu duž koje se stavke redaju. Opcije su Red (row), Obrnuti red (row-reverse), Kolona (column) i Obrnuta kolona (column-reverse). Promjena smjera iz reda u kolonu mijenja uloge glavne i poprečne ose, što direktno utiče na funkciju poravnanja.
• Prelamanje (wrap): Definiše da li su stavke prisiljene da ostanu u jednoj liniji ili se mogu prelamati u više redova. Dostupne opcije su Bez prelamanja, Prelamanje i Obrnuto prelamanje. Kada je prelamanje isključeno, sve stavke se sabijaju u jedan red.
• Poravnanje po glavnoj osi (justify-content): Kontroliše raspodjelu slobodnog prostora duž glavne ose. Može se postaviti na Početak, Kraj, Centar, Prostor između (space-between), Prostor okolo (space-around) i Jednak razmak (space-evenly).
• Poravnanje stavki (align-items): Određuje kako se stavke poravnavaju duž poprečne ose unutar pojedinačnog reda. Opcije uključuju Početak, Kraj, Centar, Rastegni (stretch) i Osnovna linija (baseline).
• Poravnanje sadržaja (align-content): Ovo svojstvo je aktivno samo kada je prelamanje uključeno i kada postoji više redova stavki. Ono raspoređuje redove kao grupu duž poprečne ose. Opcije su Početak, Kraj, Centar, Rastegni (stretch), Prostor između (space-between), Prostor okolo (space-around) i Jednak razmak (space-evenly).
• Razmak (gap): Omogućava unos numeričke vrijednosti koja definiše direktan prostor između stavki i između redova, eliminišući potrebu za ručnim dodavanjem margina na pojedinačne elemente.

Konfigurisanje pojedinačnih stavki

Unutar sekcije Stavke možete upravljati osobinama svakog pojedinačnog elementa unutar kontejnera. Klikom na dugme Dodaj stavku kreira se novi element (na primjer, "Item 5"), dok dugme Ukloni stavku uklanja selektovani element.

Za svaku pojedinačnu stavku možete definisati sljedeća svojstva:

• Redoslijed (order): Numerička vrijednost koja mijenja vizuelni redoslijed prikaza stavke na ekranu, bez potrebe za mijenjanjem strukture HTML koda.
• Rast (grow): Broj koji određuje koliko će stavka rasti u odnosu na ostale stavke kako bi popunila preostali slobodni prostor u kontejneru.
• Smanjenje (shrink): Broj koji definiše sposobnost stavke da se smanji kada je prostor unutar kontejnera ograničen.
• Osnova (basis): Početna veličina stavke prije nego što se preostali prostor raspodijeli. Može se unijeti numerička vrijednost ili odabrati Automatska osnova (auto).
• Sopstveno poravnanje (align-self): Omogućava pojedinačnoj stavki da nadjača pravilo poravnanja definisano na nivou kontejnera kroz align-items. Opcije su Automatski (auto), Početak, Kraj, Centar, Rastegni (stretch) i Osnovna linija (baseline).

Generisanje i preuzimanje CSS koda

Kako mijenjate parametre u interfejsu, alat u realnom vremenu ažurira vizuelni prikaz i generiše odgovarajući CSS kod.

Važno pravilo generatora je optimizacija koda: CSS pravila za pojedinačne stavke biće generisana isključivo za one elemente čija su svojstva ručno izmijenjena u odnosu na podrazumijevane vrijednosti. Kada ste zadovoljni izgledom rasporeda, klikom na dugme Kopiraj CSS kopirate kompletan kod u međuspremnik (clipboard), a stanje dugmeta se privremeno mijenja u "Copied" kako biste dobili potvrdu o uspješnoj akciji.

Primjena u uobičajenim rasporedima

Korištenjem predefinisanih šablona pod nazivom Predlošci, možete trenutno vizualizirati i generisati kod za standardne elemente modernog web dizajna:

1. Centar: Koristi kombinaciju justify-content: center i align-items: center kako bi se element pozicionirao tačno u sredinu kontejnera.
2. Navigacijska traka: Raspoređuje elemente horizontalno, često koristeći space-between kako bi logotip i navigacijski linkovi bili pozicionirani na suprotnim krajevima.
3. Stog (stack): Poravnava elemente vertikalno u kolonu s definisanim razmakom, što je idealno za forme ili liste.
4. Kartice: Kreira fleksibilnu mrežu elemenata koji se automatski prelamaju u novi red kada ponestane prostora na ekranu.
5. Bočna traka: Postavlja glavni sadržaj i bočnu kolonu jedno pored drugog, koristeći proporcije rasta kako bi se osiguralo da glavni dio zauzima veći dio ekrana.

Privatnost i lokalna obrada podataka

Rad sa ovim alatom je u potpunosti privatan. Kompletan proces generisanja rasporeda i CSS koda odvija se lokalno, direktno u Vašem web pregledniku. Podaci o vašim postavkama, dimenzijama i strukturi elemenata se ne šalju na server niti se učitavaju na vanjske platforme.

---

Često postavljana pitanja (FAQ)

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.