Flexbox generator

Vizualno oblikovanje pomoću CSS Flexbox modela

CSS Flexbox je jednodimenzionalni model rasporeda koji omogućuje učinkovito raspoređivanje, poravnavanje i distribuciju prostora među stavkama unutar kontejnera, čak i kada su njihove dimenzije dinamične ili nepoznate. Flexbox rješava uobičajene izazove u web dizajnu, kao što su vertikalno centriranje elemenata, ravnomjerno raspoređivanje navigacijskih poveznica ili stvaranje prilagodljivih kartica koje se automatski prelamaju u više redaka.

Korištenjem vizualnog alata, proces definiranja ovih pravila postaje znatno brži. Umjesto ručnog pisanja koda i stalnog osvježavanja stranice, promjene na kontejneru i pojedinačnim stavkama vidljive su odmah u interaktivnom prikazu uživo.

Svojstva flex kontejnera i upravljanje osima

Flexbox raspored počinje definiranjem roditeljskog elementa kao flex kontejnera. Unutar alata, ponašanje ovog kontejnera određuje se pomoću nekoliko ključnih svojstava pod sekcijom Kontejner:

• Smjer (Direction): Određuje glavnu os duž koje se stavke slažu. Opcije uključuju Redak (Row), Obrnuti redak (Row reverse), Stupac (Column) i Obrnuti stupac (Column reverse). Promjena ovog smjera izravno utječe na to kako se ponašaju ostala svojstva poravnanja. Kada se smjer prebaci iz retka u stupac, glavna i poprečna os mijenjaju mjesta.
• Prelamanje (Wrap): Kontrolira hoće li se stavke prisilno držati u jednom retku ili će se prelamati u više redaka. Dostupne opcije su Bez prelamanja, Prelamanje i Obrnuto prelamanje. Kada je odabrano Bez prelamanja, sve su stavke prisiljene ostati u jednoj liniji, što može uzrokovati njihovo stiskanje. Kada je aktivirano Prelamanje, stavke koje ne stanu u širinu kontejnera automatski prelaze u novi redak.
• Poravnanje po glavnoj osi (Justify content): Definira distribuciju slobodnog prostora duž glavne osi. Može se postaviti na Start, End, Center, Space between, Space around ili Space evenly.
• Poravnanje stavki (Align items): Određuje kako se stavke poravnavaju duž poprečne osi unutar pojedinačnog retka. Opcije su Start, End, Center, Stretch i Baseline.
• Poravnanje sadržaja (Align content): Ovo svojstvo postaje aktivno i važno tek kada je prelamanje uključeno i kada raspored ima više redaka. Ono definira kako se cijele linije s elementima raspoređuju kao grupa duž poprečne osi. Opcije uključuju Start, End, Center, Stretch, Space between, Space around i Space evenly.
• Razmak (Gap): Omogućuje postavljanje točne numeričke vrijednosti za razmak između stavki i između redaka, eliminirajući potrebu za dodavanjem margina na pojedinačne elemente.

Svojstva pojedinačnih flex stavki

Svaki element unutar flex kontejnera automatski postaje flex stavka. Dok kontejner upravlja općim rasporedom, pojedinačna svojstva pod sekcijom Stavke omogućuju preciznu kontrolu nad svakim elementom zasebno:

• Poredak (Order): Numerička vrijednost koja mijenja redoslijed prikazivanja stavke na zaslonu bez potrebe za mijenjanjem strukture HTML koda.
• Rast (Grow): Brojčani faktor koji određuje koliko će se stavka proširiti i rasti kako bi ispunila preostali slobodni prostor unutar kontejnera.
• Skupljanje (Shrink): Brojčani faktor koji definira sposobnost stavke da se smanji kada je prostor u kontejneru previše tijesan.
• Baza (Basis): Početna veličina stavke prije nego što se primijene pravila rasta ili skupljanja. Može se postaviti kao numerička vrijednost ili kao Automatska baza (Auto basis).
• Poravnanje pojedinačne stavke (Align self): Omogućuje prepisivanje općeg pravila poravnanja koje je zadano na razini kontejnera putem svojstva Poravnanje stavki (Align items). Pojedinačna stavka može se neovisno postaviti na Auto, Start, End, Center, Stretch ili Baseline.

U generiranom CSS kodu, zasebna pravila za pojedinačne stavke kreirat će se isključivo za one elemente čija su svojstva ručno promijenjena u odnosu na zadane vrijednosti.

Brza izrada uobičajenih rasporeda

Korištenjem ugrađenih predložaka pod nazivom Predlošci, korisnici mogu jednim klikom generirati strukture za najčešće elemente u modernom web dizajnu:

1. Centrirano: Savršeno vertikalno i horizontalno pozicioniranje elementa u sredini ekrana.
2. Navigacijska traka: Raspoređivanje logotipa i poveznica na suprotnim krajevima zaglavlja.
3. Stog (Stack): Vertikalno slaganje elemenata s precizno definiranim razmacima.
4. Kartice: Fleksibilna mreža elemenata koji se automatski prelamaju i prilagođavaju širini zaslona.
5. Bočna traka: Klasičan raspored s glavnim sadržajem i bočnim stupcem koji zadržavaju odgovarajuće omjere širine.

Kada kliknete na gumb Dodaj stavku, u vizualnom prikazu pojavit će se novi element (primjerice, "Item 5"). Nakon što postignete željeni izgled, klikom na gumb Kopiraj CSS kopirate generirani kod izravno u međuspremnik, a gumb privremeno mijenja stanje u "Copied".

Privatnost i lokalna obrada podataka

Korištenje ovog alata u potpunosti štiti Vašu privatnost. Vaš se raspored gradi izravno u Vašem pregledniku. Ništa što ovdje postavite ne šalje se na BroBroGo, što znači da se svi izračuni i generiranje CSS koda odvijaju lokalno na Vašem uređaju.

---

Često postavljana pitanja (FAQ)

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.