Flexbox

Lekcija 07 — Layout sa Flexbox-om (CSS Flexible Box Layout)

Uvod

Ponekad nam je potrebno da elementi na stranici budu fleksibilni — da se lako raspoređuju horizontalno ili vertikalno, da se automatski prilagođavaju raznim veličinama ekrana, i da lepo „rasporede“ prostor između sebe kada ima viška ili manjka prostora. To je upravo ono za šta služi model CSS Flexbox (Flexible Box Layout). Flexbox omogućava da relativno lako napravimo fleksibilne, responzivne rasporede bez da se mučimo sa float, ručnim marginama ili apsolutnim pozicioniranjem.

Šta je Flexbox — osnovna ideja i razlika u odnosu na obične layout metode

Kada ne koristimo flexbox, elementi su ili „block“ (zauzimaju celu širinu roditelja, svaki u svom redu) ili „inline/inline-block“ (stoje u liniji, ali sa ograničenjima u dimenzijama i rasporedu).
Flexbox uvodi „flex kontejner“ (parent element) i njegove direktne potomke — „flex iteme“. Kada na roditelja postavimo display: flex (ili inline-flex), deca automatski postaju fleksibilni elementi koji se mogu rasporediti duž definisanih osa.
Glavna prednost: fleksibilnost — deca mogu da se rastegnu, skupljaju, da se poravnavaju i ređaju u nizu, vrstama, da zauzimaju preostali prostor ili da se lepo prilagode manjim ekranima. GeeksforGeeks+1

Osnovne “ose” u Flexbox-u: main axis i cross axis

Kada kreiraš flex kontejner, definišeš glavni pravac (main axis) pomoću flex-direction. Po defaultu je to horizontalno (row). MDN Web Docs+1
Cross axis je pravac koji je ortogonalan glavnoj osi — služi za vertikalno poravnavanje (ako je main axis horizontalan), i obrnuto. IFPB GitHub+1
To znači da fleks-layout radi u jednoj dimenziji u jednom trenutku (ili redom — horizontalno ili vertikalno), što ga razlikuje od modela za dvodimenzionalne rasporede (grid, tabela…). MDN Web Docs+1

Važne osobine / svojstva Flexbox-a

Tabela najčešćih svojstava:

Na kome se primenjuje	Svojstvo / CSS pravilo	Šta radi / zašto je korisno
Kontejner (parent)	`display: flex;` (ili `inline-flex`)	Aktivira flex kontekst — deca postaju fleks-elementi. CSS-Tricks+1
	`flex-direction: row	row-reverse
	`flex-wrap: nowrap	wrap
	`justify-content: flex-start	flex-end
	`align-items: flex-start	flex-end
	`flex-flow: <flex-direction> <flex-wrap>`	Skraćeni zapis za `flex-direction` + `flex-wrap`. IFPB GitHub+1
Flex-item (child)	`flex: <grow> <shrink> <basis>` ili kraće `flex: <number>`	Kontroliše koliko element raste ili se skuplja da ispuni raspoloživi prostor, i koja je njegova osnovna (“bazna”) veličina. GeeksforGeeks+1
	`order: <number>`	Mijenja redosled elemenata bez menjanja HTML strukture. CSS-Tricks+1
	`align-self: ...`	Omogućava da pojedinačni flex-item “prepiše” poravnanje koje važi za sve — npr. da jedan bude poravnat drugačije od ostalih. W3schools+1

Primer upotrebe — HTML + CSS kod

<!DOCTYPE html> <html lang="sr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Primer Flexbox rasporeda</title> <style> .flex-container { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; background-color: #f9f9f9; padding: 10px; } .flex-item { flex: 1 1 200px; /* fleks-item može da raste i da se skuplja, bazna širina 200px */ margin: 10px; padding: 20px; background-color: #cce5ff; border: 1px solid #333; text-align: center; } </style> </head> <body> <div class="flex-container"> <div class="flex-item">Item 1</div> <div class="flex-item">Item 2</div> <div class="flex-item">Item 3</div> </div> </body> </html>

Šta se dešava u ovom primeru:

.flex-container { display: flex; } — pretvara <div> u flex kontejner. Djeca (.flex-item) postaju flex-itemi. MDN Web Docs+1
flex-wrap: wrap; — dozvoljava da se itemi “prelamaju” u novi red ako nema dovoljno prostora, što pomaže kod responzivnosti. CSS-Tricks+1
flex: 1 1 200px; na itemima — osigurava da svaki fleks-item ima minimum širine 200px, ali da može da raste i pokrije dodatni prostor pravedno.
justify-content: space-between; + align-items: center; — raspoređuje iteme u nizu sa razmacima i centrira ih vertikalno unutar kontejnera.

Ovaj kod je dovoljno generičan da služi kao osnova za razne rasporede — kartice, galerije, kolone, zaglavlja, navigacije, itd.

Kada i zašto koristiti Flexbox — prednosti i tipične situacije

Flexbox je naročito korisna tehnika kada treba:

da poravnaš elemente u jednom redu ili koloni — npr. meni, navigaciju, grupisane dugmiće, kartice, galerije.
da elementi budu fleksibilni — da se automatski prilagode širini prozora ili roditelja (responsive dizajn).
da rasporediš razmake, centriranje, vertikalno/horizontalno poravnavanje bez “hack-ova” (float, margin-trikovi).
da menjaš redosled elemenata vizuelno bez menjanja HTML strukture (sa order).

Flexbox je danas standard i koristi se za većinu “manjih” ili “srednjih” layout-a — bilo da pravis navigaciju, raspored sadržaja, zaglavlje, footer, sekcije…

Ograničenja / kada ipak razmisliti o drugim metodama

Flexbox je model za jednodimenzionalne rasporede — ili u redu (row) ili u koloni (column). Za složenije dvodimenzionalne mreže, kolone + redovi, često je prikladniji CSS Grid Layout. MDN Web Docs+1
Ako želiš da elementima daš vrlo specifične pozicije (apsolutno, složene rasporede, preklapanje), ponekad je potrebno kombinovati flexbox sa drugim CSS tehnikama (grid, positioning, media queries…).
Potrebno je da razumeš kako funkcionišu main i cross axis, da misliš “osa-prvo”, što na početku nekima može biti malo apstraktno.

Zaključak

Flexbox je izuzetno moćan i praktičan alat u CSS-u — daje mnogo fleksibilnosti, prilagodljivosti i olakšava izgradnju modernih, responzivnih layout-a. Kada želiš da “kutije” budu fleksibilne, centriraš sadržaj, rasporediš elemente ravnomerno ili da se automatski prilagode različitim veličinama prozora — Flexbox je često najbolji izbor.

Ako ga još ne poznaješ dobro — vežbom i eksperimentisanjem ćeš vrlo brzo shvatiti prednosti.