CSS3 - Fleksibilni rasporedi box-sa (Flexible Box Layouts)

Razumijevanje modela Flex Layout

Fleksibilni okvir, koji se obično naziva flexbox, novi je model rasporeda predstavljen u CSS3 za stvaranje fleksibilnog dizajna korisničkog interfejsa s više redova i kolona bez korištenja vrijednosti postotka ili fiksne dužine. Model CSS3 fleksibilnog rasporeda pruža jednostavan i moćan mehanizam za automatsko rukovanje distribucijom prostora i poravnavanjem sadržaja kroz tabelu stilova bez ometanja stvarnog označavanja. Sljedeći primjer pokazuje kako stvoriti raspored s tri kolone gdje svaka kolona ima jednaku širinu i visinu koristeći model fleks rasporeda (flex layout model). 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer CSS3 Izgled tri jednake fleks kolone</title>
<style>
.flex-container {
    width: 80%;
    min-height: 300px;
    margin: 0 auto;
    font-size: 32px;
    display: -webkit-flex; /* Safari */     
    display: flex; /* Standardna sintaksa */
    border: 1px solid #808080;
}
.flex-container div {
    padding: 10px;
    background: #dbdfe5;
    -webkit-flex: 1; /* Safari */
    -ms-flex: 1; /* IE 10 */
    flex: 1; /* Standardna sintaksa */
}
.flex-container div.bg-alt{
    background: #b4bac0;
}
</style>
</head>
<body>
    <div class="flex-container">
        <div class="item1">Item 1</div>
        <div class="item2 bg-alt">Item 2</div>
        <div class="item3">Item 3</div>
    </div>
</body>
</html>

Ako pažljivo primijetite gornji primjer koda, primijetićete da nismo naveli nikakvu širinu na unutrašnjem <div> elementu klase .flex-container, ali u izlazu možete vidjeti da svaka kolona ima širinu koja je tačno jednaka jednoj trećina nadređenog elementa klase .flex-container.


Kako funkciše Flex Layout

Flexbox se sastoji od flex kontejnera (containers) i flex (items). Flex kontejner se može stvoriti postavljanjem svojstva prikaza elementa na flex (generisanje block-level na nivou bloka) ili inline-flex (generisanje inline flex kontejnera sličnog inline-block). Svi podređeni elementi flex kontejnera automatski postaju flex predmeti i raspoređeni su koristeći model fleks rasporeda. Svojstva float, clear, i vertical-align nemaju uticaja na fleksibilne stavke.

Flex predmeti su smješteni unutar savitljivog kontejnera (container) duž linije savijanja koju kontroliše svojstvo flex-direction. Prema zadanim postavkama, postoji samo jedna fleksibilna linija po fleks kontejneru (container) koja ima istu orijentaciju kao unutrašnja osa trenutnog načina pisanja ili smjera teksta. Sljedeća ilustracija pomoći će vam da razumijete terminologiju fleks rasporeda (flex layout).



Kontrola protoka unutar Flex kontejnera

U standardnom CSS modelu okvira, elementi se obično prikazuju redosljedom kako se pojavljuju u osnovnom HTML označavanju. Flex raspored vam omogućava kontrolu smjera protoka unutar fleks kontejnera (container) na takav način da elementi mogu biti raspoređeni u bilo kojem smjeru protoka lijevo, nadesno, dole ili čak prema gore (direction leftwards, rightwards, downwards, or even upwards). Tok fleks stavki u fleks kontejneru može se odrediti pomoću svojstva flex-direction. Zadana vrijednost ovog svojstva je red koji je isti kao trenutni način pisanja dokumenta ili smjer teksta, npr. s lijeva na desno na našem jeziku. 

.flex-container {
    width: 80%;
    min-height: 300px;
    /* Safari */
    display: -webkit-flex;
    -webkit-flex-direction: row-reverse;
    /* Standardna sintaksa */
    display: flex;
    flex-direction: row-reverse;
    border: 1px solid #666;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer upravljanja protokom unutar fleks containera duž glavne osi</title>
<style>
.flex-container {
    width: 80%;
    min-height: 300px;
    margin: 0 auto;
    font-size: 32px;
    /* Safari */
    display: -webkit-flex;
    -webkit-flex-direction: row-reverse;
    /* Standardna sintaksa */
    display: flex;
    flex-direction: row-reverse;
    border: 1px solid #666;
}
.flex-container div {
    padding: 10px;
    -webkit-flex: 1; /* Safari 6.1+ */
    -ms-flex: 1; /* IE 10 */
    flex: 1; /* Standardna sintaksa */
}
.item1 {
    background: #e84d51;
}
.item2 {
    background: #7ed636;
}
.item3 {
    background: #2f97ff;
}
</style>
</head>
<body>
    <div class="flex-container">
        <div class="item1">Item 1</div>
        <div class="item2">Item 2</div>
        <div class="item3">Item 3</div>
    </div>
    <p><strong>Napomena:</strong> Promijenite vrijednost svojstva 
    flex-direction iz "row-reverse" u "row" da biste razumjeli kako ovo svojstvo radi.</p>
</body>
</html>

Slično tome, fleks stavke možete prikazati unutar flex kontejnera u kolonama umjesto u redu koristeći kolonu vrijednosti za svojstvo flex-direction, poput ovog: 

.flex-container {
    width: 80%;
    min-height: 300px;
    /* Safari */
    display: -webkit-flex;
    -webkit-flex-direction: column;
    /* Standardna sintaksa */
    display: flex;
    flex-direction: column;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer upravljanja protokom unutar savitljivog containera duž poprečne ose</title>
<style>
.flex-container {
    width: 80%;
    min-height: 300px;
    margin: 0 auto;
    font-size: 32px;
    /* Safari */
    display: -webkit-flex;
    -webkit-flex-direction: column;
    /* Standardna sintaksa */
    display: flex;
    flex-direction: column;
    border: 1px solid #666;
}
.flex-container div {
    padding: 10px;
    -webkit-flex: 1; /* Safari 6.1+ */
    -ms-flex: 1; /* IE 10 */
    flex: 1; /* Standardna sintaksa */
}
.item1 {
    background: #e84d51;
}
.item2 {
    background: #7ed636;
}
.item3 {
    background: #2f97ff;
}
</style>
</head>
<body>
    <div class="flex-container">
        <div class="item1">Item 1</div>
        <div class="item2">Item 2</div>
        <div class="item3">Item 3</div>
    </div>
    <p><strong>Napomena:</strong> Promijenite vrijednost svojstva 
    flex-direction iz "column" u "reverse-column" da biste razumjeli kako ovo svojstvo radi.</p>
</body>
</html>

Kontrola dimenzija fleksibilnih predmeta

Najvažniji aspekt fleks rasporeda je sposobnost fleksibilnih predmeta da mijenjaju svoju širinu ili visinu kako bi popunili raspoloživi prostor. To se postiže svojstvom flex. Stenografsko je svojstvo za flex-grow, flex-shrink i flex-basis. Flex kontejner (container) raspoređuje slobodan prostor na svoje predmete proporcionalno njihovom faktoru rasta rastezanja ili ih smanjuje kako bi se spriječilo prelijevanje (overflow) proporcionalno njihovom faktoru fleksibilnog skupljanja (flex shrink). 

.flex-container {
    width: 80%;
    min-height: 300px;
    display: -webkit-flex; /* Safari */     
    display: flex; /* Standardna sintaksa */
}
.flex-container div {
    padding: 10px;
    background: #dbdfe5;
}
.item1, .item3 {
    -webkit-flex: 1; /* Safari */
    flex: 1; /* Standardna sintaksa */
}
.item2 {
    -webkit-flex: 2; /* Safari */
    flex: 2; /* Standardna ssintaksa */
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer kontrole dimenzija Flex Items</title>
<style>
.flex-container {
    width: 80%;
    min-height: 300px;
    margin: 0 auto;
    font-size: 32px;
    display: -webkit-flex; /* Safari */     
    display: flex; /* Standardna sntaksa */
    border: 1px solid #666;
}
.flex-container div {
    padding: 10px;
}
.item1 {
    background: #e84d51;
    -webkit-flex: 1; /* Safari */
    flex: 1; /* Standardna sintaksa */
}
.item2 {
    background: #7ed636;
    -webkit-flex: 2; /* Safari */
    flex: 2; /* Standardna sintaksa */
}
.item3 {
    background: #2f97ff;
    -webkit-flex: 1; /* Safari */
    flex: 1; /* Standardna sintaksa */
}
</style>
</head>
<body>
    <div class="flex-container">
        <div class="item1">Item 1</div>
        <div class="item2">Item 2</div>
        <div class="item3">Item 3</div>
    </div>
    <p><strong>Note:</strong> Eksperimentujte s vrijednošću 
    svojstva flex za pojedinu stavku flex-a da biste razumjeli kako se
    izračunava dimenzija flex stavki.</p>
</body>
</html>

U gornjem primjeru, prvi i treći flex predmeti zauzimaće po 1/4 tj. 1/(1+1+2) slobodnog prostora, dok će drugi flex predmet zauzimati 1/2 tj. 2/(1+1+2) slobodnog prostora. Slično tome, možete stvoriti druge fleksibilne rasporede koristeći ovu jednostavnu tehniku.


Poravnavanje Flex predmeta unutar Flex kontejnera

Postoje četiri svojstva justify-content, align-content, align-items i align-self koja su dizajnirana za kontrolu poravnanja flex stavki unutar flex kontejnera. Prva tri se odnose na flex kontejnere, dok se posljednji odnosi na pojedinačne flex predmete.


Poravnajte Flex predmete duž glavne osi

Flex stavke mogu se poravnati duž glavne osi (tj. u vodoravnom smjeru) fleks kontejnera pomoću svojstva justify-content. Tipično se koristi kada fleksibilne stavke ne koriste sav raspoloživi prostor duž glavne osi. Svojstvo justify-content prihvata sljedeće vrijednosti:

  • flex-start - Zadana vrijednost. Flex predmeti se postavljaju na početak glavne ose.
  • flex-end - Flex predmeti se postavljaju na kraj glavne ose.
  • center - Flex predmeti postavljeni su u središte glavne ose s jednakim količinama slobodnog prostora na oba kraja. Ako je preostali slobodni prostor negativan, tj. ako se stavke prelijevaju (items overflow), tada će se fleksibilne stavke prelijevati podjednako u oba smjera.
  • space-between - Flex predmeti raspoređeni su ravnomjerno duž glavne ose, pri čemu je prva stavljena na glavnom startnom rubu, a posljednja na glavnom kraju. Ako se stavke prelijevaju ili postoji samo jedna stavka, ova vrijednost je jednaka flex-startu.
  • space-around — Flex predmeti raspoređeni su ravnomjerno s razmacima pola veličine na oba kraja. Ako se prelijevaju ili postoji samo jedna stavka, ova je vrijednost identična središnjoj.

Sljedeći primjer će vam pokazati učinak različitih vrijednosti za svojstvo justify-content na flex-spremnik s više kolona fiksne širine. 

.flex-container {
    width: 500px;
    min-height: 300px;
    border: 1px solid #666;
    /* Safari */
    display: -webkit-flex;
    -webkit-justify-content: space-around;
    /* Standard syntax */
    display: flex;
    justify-content: space-around;
}
.item1 {
    width: 75px;
    background: #e84d51;
}
.item2 {
    width: 125px;
    background: #7ed636;
}
.item3 {
    width: 175px;
    background: #2f97ff;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer poravnavanja fleksibilnih predmeta duž glavne ose</title>
<style> 
.flex-container {
    width: 500px;
    min-height: 300px;
    margin: 0 auto;
    font-size: 32px;
    border: 1px solid #666;
    /* Safari */
    display: -webkit-flex;
    -webkit-justify-content: space-around;
    /* Standardna sintaksa */
    display: flex;
    justify-content: space-around;
}
.flex-container div{
    padding: 10px;
}
.item1 {
    width: 75px;
    background: #e84d51;
}
.item2 {
    width: 125px;
    background: #7ed636;
}
.item3 {
    width: 175px;
    background: #2f97ff;
}
</style>
</head>
<body>
    <div class="flex-container">
        <div class="item1">1</div>
        <div class="item2">2</div>
        <div class="item3">3</div>
    </div>
    <p><strong>Napomena:</strong> Isprobajte druge vrijednosti za
    svojstvo justify-content poput "flex-start", "flex-end", "center" i 
    "space-between" da biste razumjeli kako poravnjava stavke unutar 
    flex kontejnera.</p>
</body>
</html>

Poravnajte Flex predmete duž poprečne ose

Flex elementi se mogu poravnati duž poprečne ose (tj. u okomitom smjeru) flex container pomoću svojstva align-items ili align-self. Međutim, tamo gdje se align-items primjenjuje na flex container, svojstvo align-self primjenjuje se na pojedinačne flex items i poništava align-items. Obje osobine prihvataju sljedeće vrijednosti:

  • flex-start - Flex elementi se postavljaju na početak poprečne ose.
  • flex-end - Flex elementi se postavljaju na kraj poprečne ose.
  • center - Flex predmeti postavljeni su u središte poprečne ose s jednakim količinama slobodnog prostora na oba kraja. Ako je preostali slobodni prostor negativan, tj. ako se stavke prelijevaju, tada će se fleksibilne stavke prelijevati podjednako u oba smjera.
  • baseline - Osnovna linija teksta (ili unutarnja osa) svake flex stavke poravnata je s osnovnom linijom flex stavke s najvećom veličinom fonta.
  • stretch - Fleksibilna stavka proteže se kako bi popunila trenutni red ili kolonu, osim ako to ne sprečavaju minimalna i maksimalna širina ili visina. Zadana vrijednost za svojstvo je align-items.

Sljedeći primjer će vam pokazati učinak različitih vrijednosti za svojstvo align-items na flex-container s više kolona koje imaju fiksnu visinu. 

.flex-container {
    width: 500px;
    min-height: 300px;
    border: 1px solid #666;
    /* Safari */
    display: -webkit-flex;
    -webkit-align-items: center;
    /* Standardna sintaksa */
    display: flex;
    align-items: center;
}
.item1 {
    width: 75px;
    height: 100px;
    background: #e84d51;
}
.item2 {
    width: 125px;
    height: 200px;
    background: #7ed636;
}
.item3 {
    width: 175px;
    height: 150px;
    background: #2f97ff;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer poravnanja fleksibilnih predmeta duž poprečne ose</title>
<style> 
.flex-container {
    width: 500px;
    min-height: 300px;
    margin: 0 auto;
    font-size: 32px;
    border: 1px solid #666;
    /* Safari */
    display: -webkit-flex;
    -webkit-align-items: center;
    /* Standardna sintaksa */
    display: flex;
    align-items: center;
}
.flex-container div{
    padding: 10px;
}
.item1 {
    width: 75px;
    height: 100px;
    background: #e84d51;
}
.item2 {
    width: 125px;
    height: 200px;
    background: #7ed636;
}
.item3 {
    width: 175px;
    height: 150px;
    background: #2f97ff;
}
</style>
</head>
<body>
    <div class="flex-container">
        <div class="item1">1</div>
        <div class="item2">2</div>
        <div class="item3">3</div>
    </div>
    <p><strong>Napomena:</strong> Isprobajte ostale vrijednosti za
    svojstvo align-items, poput "flex-start", "flex-end", "baseline" i 
    "stretch" da biste razumjeli kako poravnjava stavke unutar flex 
    kontejnera.</p>
</body>
</html>

Takođe možete distribuisati slobodni prostor na poprečnoj osi flexs kontejnera s više redova ili više kolona. Svojstvo align-content koristi se za poravnanje linija flexs kontejnera, na primjer, redovi unutar višerednog flex kontejnera kada u poprečnoj osi ima dodatnog prostora, slično onome kako justify-content poravnava pojedinačne stavke unutar glavne osi. Svojstvo align-content prihvata iste vrijednosti kao i justify-content, ali ih primjenjuje na poprečnu osu, a ne na glavnu osu. Takođe prihvata još jednu vrijednost:

  • stretch - Slobodni prostor podijeljen je podjednako između svih redova ili kolona povećavajući njihovu poprečnu veličinu. Ako je preostali slobodni prostor negativan, ova vrijednost je identična flex-start.

Sljedeći primjer će vam pokazati učinak različitih vrijednosti za svojstvo align-content na višeredni flex kontejner fiksne visine. 

.flex-container {
    width: 500px;
    min-height: 300px;
    margin: 0 auto;
    font-size: 32px;
    border: 1px solid #666;
    /* Safari */
    display: -webkit-flex;
    -webkit-flex-flow: row wrap;
    -webkit-align-content: space-around;
    /* Standardna sintaksa */
    display: flex;
    flex-flow: row wrap;
    align-content: space-around;
}
.flex-container div {
    width: 150px;
    height: 100px;
    background: #dbdfe5;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer poravnanja linija fleks kontejnera</title>
<style> 
.flex-container {
    width: 500px;
    min-height: 300px;
    margin: 0 auto;
    font-size: 32px;
    border: 1px solid #666;
    /* Safari */
    display: -webkit-flex;
    -webkit-flex-flow: row wrap; /* zamotavanje stavke da biste stvorili višeredni fleks kontejner */
    -webkit-align-content: space-around;
    /* Standardna sintaksa */
    display: flex;
    flex-flow: row wrap;
    align-content: space-around;
}
.flex-container div {
    width: 150px;
    height: 100px;
}
.red {
    background: #e84d51;
}
.green {;
    background: #7ed636;
}
.blue {
    background: #2f97ff;
}
</style>
</head>
<body>
    <div class="flex-container">
        <div class="red">1</div>
        <div class="green">2</div>
        <div class="blue">3</div>
        <div class="green">4</div>
        <div class="blue">5</div>
        <div class="red">6</div>
    </div>
    <p><strong>Napomena:</strong> Isprobajte druge vrijednosti za svojstvo align-content, 
    poput "flex-start", "flex-end", "center", "space-between"
    i "stretch" da biste razumjeli kako poravnava stavke unutar flex kontejnera.</p>
</body>
</html>

Preuređivanje pojedinačnih fleksibilnih stavki (Flex Items)

Pored promjene protoka unutar flex container, možete takođe promijeniti redosljed prikazivanja pojedinih fleks stavki pomoću svojstva order. Ovo svojstvo prihvata pozitivne ili negativne cijele brojeve kao vrijednost. Prema zadanim postavkama, sve fleks stavke se prikazuju i raspoređuju istim redosljedom kao što se pojavljuju u HTML oznaci, jer je zadana vrijednost 0. Sljedeći primjer će vam pokazati kako kontrolisati redosljed pojedine fleks stavki (flex item). 

.flex-container {
    width: 500px;
    min-height: 300px;
    border: 1px solid #666;
    display: -webkit-flex; /* Safari 6.1+ */
    display: flex;
}
.flex-container div {
    padding: 10px;
    width: 130px;
}
.item1 {
    background: #e84d51;
    -webkit-order: 2; /* Safari 6.1+ */
    order: 2;
}
.item2 {
    background: #7ed636;
    -webkit-order: 1; /* Safari 6.1+ */
    order: 1;
}
.item3 {
    background: #2f97ff;
    -webkit-order: -1; /* Safari 6.1+ */
    order: -1;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of Setting the Order for Individual Flex Items</title>
<style>
.flex-container {
    width: 80%;
    min-height: 300px;
    margin: 0 auto;
    font-size: 32px;
    border: 1px solid #666;
    display: -webkit-flex; /* Safari 6.1+ */
    display: flex;
}
.flex-container div {
    padding: 10px;
    -webkit-flex: 1; /* Safari 6.1+ */
    -ms-flex: 1; /* IE 10 */
    flex: 1; /* Standard syntax */
}
.item1 {
    background: #e84d51;
    -webkit-order: 2; /* Safari 6.1+ */
    order: 2;
}
.item2 {
    background: #7ed636;
    -webkit-order: 1; /* Safari 6.1+ */
    order: 1;
}
.item3 {
    background: #2f97ff;
    -webkit-order: -1; /* Safari 6.1+ */
    order: -1;
}
</style>
</head>
<body>
    <div class="flex-container">
        <div class="item1">Item 1</div>
        <div class="item2">Item 2</div>
        <div class="item3">Item 3</div>
    </div>
    <p><strong>Napomena:</strong> Eksperimentišite s vrijednošću
    svojstva order, flex stavki da biste razumjeli kako ovo svojstvo 
    funkcioniše.</p>
</body>
</html>

Horizontalno i vertikalno središnje poravnanje sa Flexbox

Uobičajeno poravnanje bloka sadržaja uključuje upotrebu JavaScript ili nekih CSS trikova. Ali s flexbox-om to možete lako učiniti bez ikakvih podešavanja. Sljedeći primjer će vam pokazati kako lako poravnati blok sadržaja vertikalno i horizontalno u sredini pomoću CSS3 funkcije fleksibilnog okvira. 

.flex-container {
    width: 500px;
    min-height: 300px;
    border: 1px solid #666;
    display: -webkit-flex; /* Safari 6.1+ */
    display: flex; /* Standardna sintaksa */
}
.item {
    width: 300px;
    padding: 25px;
    margin: auto;
    background: #f0e68c;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer poravnanja centra pomoću Flexboxa</title>
<style>
.flex-container {
    width: 500px;
    min-height: 300px;
    margin: 0 auto;
    font-size: 22px;
    border: 1px solid #666;
    display: -webkit-flex; /* Safari 6.1+ */
    display: flex;  /* Standardna sintaksa */
}
.item {
    width: 300px;
    padding: 25px;
    margin: auto;
    text-align: center;
    background: #f0e68c;
}
</style>
</head>
<body>
    <div class="flex-container">
        <div class="item">Centralno poravnanje</div>
    </div>
</body>
</html>

Omogućite umotavanje fleksibilnih stavki (Wrapping of Flex Items)

Prema zadanim postavkama, flex kontejneri prikazuju samo jedan red ili kolonu flex stavki. Međutim, svojstvo flex-wrap na flex kontejneru možete koristiti da biste kontrolisali hoće li se njegovi flex elementi umotati u više linija ili ne, ako na njima nema dovoljno prostora na jednoj liniji flex. Svojstvo flex-wrap prihvata sljedeće vrijednosti:

  • nowrap - Zadana vrijednost. Flex stavke smješteni su u jednu liniju. To može dovesti do prelijevanja ako nema dovoljno prostora na liniji savijanja.
  • wrap - Flex kontejner razbija svoje fleks stavke u više redova, slično kao što se tekst razbija na novi red kada je preširok da stane na trenutni red.
  • wrap-reverse - flex elementi će se umotati, ako je potrebno, ali obrnutim redosljedom, tj. zamjenjuju se smjerovi cross-start i cross-enda.

Sljedeći primjer će vam pokazati kako prikazati fleks stavke u jednom ili više redova unutar fleks kontejnera pomoću svojstva flex-wrap. 

.flex-container {
    width: 500px;
    min-height: 300px;
    border: 1px solid #666;
    /* Safari */
    display: -webkit-flex;
    -webkit-flex-wrap: wrap;
    /* Standardna sintaksa */
    display: flex;
    flex-wrap: wrap;  
}
.flex-container div{
    width: 130px;
    padding: 10px;    
    background: #dbdfe5;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer umotavanja fleksibilnih predmeta u Flex kontejner</title>
<style> 
.flex-container {
    width: 500px;
    min-height: 300px;
    margin: 0 auto;
    font-size: 32px;
    border: 1px solid black;
    /* Safari */
    display: -webkit-flex;
    -webkit-flex-wrap: wrap;
    /* Standardna sintaksa */
    display: flex;
    flex-wrap: wrap;  
}
.flex-container div{
    padding: 10px;
    width: 130px;
}
.item1 {
    background: #e84d51;
}
.item2 {
    background: #7ed636;
}
.item3 {
    background: #2f97ff;
}
.item4 {
    background: #9c82d2;
}
</style>
</head>
<body>
    <div class="flex-container">
        <div class="item1">1</div>
        <div class="item2">2</div>
        <div class="item3">3</div>
        <div class="item4">4</div>
    </div>
    <p><strong>Napomena:</strong> Isprobajte ostale vrijednosti za
    svojstvo align-items, poput "flex-start", "flex-end", "baseline" i 
    "stretch" da biste razumjeli kako poravnjava stavke unutar flex 
    kontejnera.</p>
</body>
</html>