Sva svojstva flexboxa. Flexbox: novi princip CSS izgleda. Izrada adaptivnog izgleda

Ukratko, raspored sa Flexboxom nam daje jednostavna rješenja za nekada teške zadatke. Na primjer, kada trebate poravnati element okomito, ili gurnuti podnožje na dno ekrana, ili jednostavno umetnuti nekoliko blokova u jedan red tako da zauzmu sav slobodan prostor. Slični zadaci se rješavaju bez fleksa. Ali po pravilu, ova rješenja su više kao "štake" - trikovi za korištenje css-a u druge svrhe. Dok se kod flexbox-a takvi zadaci rješavaju upravo onako kako flex model zamišlja.

CSS Fleksibilni Box Layout Module (CSS modul za rasporede sa fleksibilnim blokovima), ukratko flexbox, kreiran je kako bi se uklonili nedostaci pri kreiranju širokog spektra HTML struktura, uključujući i one prilagođene različitim širinama i visinama, te da bi izgled bio logičan i jednostavan . A logički pristup, po pravilu, funkcioniše na neočekivanim mestima, gde rezultat nije proveren - logika je naše sve!

Flexbox vam omogućava elegantnu kontrolu širokog spektra parametara za elemente unutar kontejnera: smjer, red, širina, visina, poravnanje duž i poprijeko, raspodjela slobodnog prostora, rastezanje i skupljanje elemenata.

Osnovno znanje

FlexBox se sastoji od kontejnera i njegovih podređenih elemenata (stavki) (fleksibilne stavke).

Da biste omogućili flexbox, bilo koji HTML element samo treba postaviti svojstvo css na display:flex; ili display:inline-flex; .

Nakon omogućavanja svojstva flex, unutar kontejnera se kreiraju dvije ose: glavna i poprečna (okomita (⊥), poprečna osa). Svi ugniježđeni elementi (prvog nivoa) su poravnati duž glavne ose. Podrazumevano, glavna osa je horizontalna i ima smjer slijeva na desno (→), a poprečna os je odnosno vertikalna i usmjerena odozgo prema dolje (↓).

Glavna i poprečna osa se mogu zameniti, tada će elementi biti locirani odozgo prema dole (↓) i kada se više ne uklapaju u visinu, pomeraće se s leva na desno (→) - to jest, osi se jednostavno zamenjuju. U ovom slučaju, početak i kraj rasporeda elemenata se ne mijenja - mijenjaju se samo smjerovi (ose)! Zato morate razmišljati o sjekirama unutar kontejnera. Međutim, ne treba misliti da tu postoje neke “fizičke” osi i one utiču na nešto. Ovdje je os samo smjer kretanja elemenata unutar kontejnera. Na primjer, ako smo odredili poravnanje elemenata prema centru glavne ose, a zatim promijenili smjer ove glavne ose, tada će se i poravnanje promijeniti: elementi su bili u sredini horizontalno, a postali su u sredini okomito. Vidi primjer.

Još jedna važna karakteristika Flexboxa je prisustvo redova u poprečnom smjeru. Da bismo razumjeli o čemu govorimo, zamislimo da postoji glavna horizontalna os, puno elemenata i oni se ne "penju" u kontejner, pa prelaze u drugi red. One. kontejner izgleda ovako: kontejner, unutar njega se nalaze dva reda, svaki red ima nekoliko elemenata. Zastupljen? A sada zapamtite da možemo vertikalno poravnati ne samo elemente, već i redove! Kako to funkcionira jasno se vidi na primjeru za . A ovako to izgleda shematski:

CSS svojstva koja mogu uticati na model izgleda: float, clear, vertical-align, kolone ne rade u flex konstrukcijama. Ovdje se koristi drugačiji model izgleda i ova css svojstva se jednostavno zanemaruju.

Flexbox CSS svojstva

Flexbox sadrži različita css pravila za kontrolu cijelog flex dizajna. Neke je potrebno primijeniti na glavni kontejner, a druge na elemente ovog kontejnera.

Za kontejner

Omogućava flex svojstvo za element. Sam element i elementi ugniježđeni u njemu potpadaju pod ovo svojstvo: pogođeni su samo potomci prvog nivoa - oni će postati elementi flex kontejnera.

• flex- element se proteže do svoje širine i ima svoj puni prostor među okolnim blokovima. Na početku i na kraju bloka postoji prijelom reda.
• inline-flex- element je omotan drugim elementima. Istovremeno, njegov unutrašnji dio je formatiran kao blok element, a sam element je formatiran kao inline element.

flex i inline-flex se razlikuju po tome što različito djeluju s okolnim elementima, slično kao display:block i display:inline-block.

Mijenja smjer glavne ose kontejnera. Shodno tome se mijenja i poprečna osa.

• red (zadano)- smjer elemenata s lijeva na desno (→)
• kolona- smjer elemenata odozgo prema dolje (↓)
• red obrnuto- smjer elemenata s desna na lijevo (←)
• kolona revers- smjer elemenata odozdo prema gore ()

Kontrolira umotavanje elemenata koji neće stati u kontejner.

• Nowrap (zadano)- ugniježđeni elementi su raspoređeni u jedan red (sa smjerom=red) ili u jednu kolonu (sa smjerom=kolona) bez obzira da li su smješteni u kontejner ili ne.
• zamotati- uključuje prijenos elemenata u sljedeći red ako se ne uklapaju u kontejner. To omogućava kretanje elemenata duž poprečne ose.
• wrap reverse- isto kao i wrap samo transfer neće biti dolje, već gore (u suprotnom smjeru).

Kombinira svojstva flex-direction i flex-wrap. Često se koriste zajedno, tako da je svojstvo flex-flow kreirano za pisanje manje koda.

flex-flow uzima vrijednosti ova dva svojstva odvojene razmakom. Ili možete specificirati jednu vrijednost za bilo koje svojstvo.

/* samo flex-direction */ flex-flow: row; flex-flow: red-obrnuti; flex-flow: kolona; flex-flow: kolona-reverse; /* samo flex-wrap */ flex-flow: nowrap; flex-flow: omotati; flex-flow: wrap-reverse; /* obje vrijednosti odjednom: flex-direction i flex-wrap */ flex-flow: row nowrap; flex-flow: omotač kolone; flex-flow: kolona-reverse wrap-reverse; opravdati sadržaj:

Poravnava elemente duž glavne ose: ako je pravac=red, onda horizontalno, a ako je pravac=kolona, ​​onda okomito.

• flex start (zadano)- elementi će ići od početka (možda ima prostora na kraju).
• flex end- elementi su poravnati na kraju (mesto će ostati na početku)
• centar- u centru (mesto će ostati levo i desno)
• prostor između- ekstremni elementi su pritisnuti na rubove (prostor između elemenata je ravnomjerno raspoređen)
• prostor okolo- slobodni prostor je ravnomjerno raspoređen između elemenata (ekstremni elementi nisu pritisnuti na rubove). Razmak između ruba spremnika i krajnjih elemenata bit će polovina prostora između elemenata u sredini reda.
• prostorno ravnomerno

Poravnava redove koji sadrže elemente duž poprečne ose. Isto kao i justify-content, ali za suprotnu osu.

Napomena: Radi kada postoje najmanje 2 reda, tj. ako postoji samo 1 red, ništa se neće dogoditi.

One. ako flex-direction: row , tada će ovo svojstvo poravnati nevidljive redove okomito ¦ . Ovdje je važno napomenuti da visina bloka mora biti čvrsto postavljena i mora biti veća od visine redova, inače će sami redovi rastegnuti kontejner i svako njihovo poravnanje gubi smisao, jer nema slobodnog prostora između njih... Ali kada flex-direction: column , tada se redovi pomiču horizontalno → i širina kontejnera je skoro uvek veća od širine redova i poravnanje redova odmah ima smisla...

• rastezanje (zadano)- redovi se razvlače kako bi u potpunosti ispunili red
• flex start- redovi su grupisani na vrhu kontejnera (može biti mjesta na kraju).
• flex end- redovi su grupirani na dnu kontejnera (mesto će ostati na početku)
• centar- redovi su grupisani u sredini kontejnera (mesto će ostati na ivicama)
• prostor između- krajnji redovi su pritisnuti uz rubove (prostor između redova je ravnomjerno raspoređen)
• prostor okolo- slobodni prostor je ravnomjerno raspoređen između redova (ekstremni elementi nisu pritisnuti na rubove). Razmak između ruba spremnika i krajnjih elemenata bit će polovina prostora između elemenata u sredini reda.
• prostorno ravnomerno- isto kao i space-around , samo što je udaljenost krajnjih elemenata do rubova kontejnera ista kao između elemenata.

Poravnava elemente duž poprečne ose unutar reda (nevidljivi red). One. sami redovi su poravnati preko align-content , a elementi unutar ovih redova (redova) kroz align-items i sve to duž poprečne ose. Ne postoji takvo razdvajanje duž glavne ose, nema koncepta redova i elementi se poravnavaju pomoću justify-content.

• rastezanje (zadano)- elementi se rastežu kako bi u potpunosti ispunili liniju
• flex start- elementi su pritisnuti na početak reda
• flex end- elementi su pritisnuti do kraja reda
• centar- elementi su poravnati u sredini reda
• osnovna linija- elementi su poravnati sa osnovnom linijom teksta

Za elemente kontejnera

Određuje faktor za povećanje elementa kada ima slobodnog prostora u kontejneru. Zadani flex-grow: 0 tj. nijedan od elemenata ne bi trebao rasti i ispunjavati slobodan prostor u kontejneru.

Zadani flex-grow: 0

• Ako navedete flex-grow:1 za sve elemente, onda se svi protežu na isti način i popunjavaju sav slobodan prostor u kontejneru.
• Ako navedete flex-grow:1 za jedan od elemenata, tada će on popuniti sav slobodan prostor u kontejneru i poravnanje kroz justify-content više neće raditi: nema slobodnog prostora za poravnavanje...
• Sa flex-grow:1. Ako jedan od njih ima flex-grow:2 onda će biti 2x veći od svih ostalih
• Ako sve flex kutije unutar flex kontejnera imaju flex-grow:3 , tada će biti iste veličine
• Sa flex-grow:3 . Ako jedan od njih ima flex-grow:12 onda će biti 4 puta veći od svih ostalih

Kako radi? Recimo da je kontejner širok 500px i sadrži dva elementa, svaki sa osnovnom širinom od 100px. Dakle, u kontejneru je ostalo 300 slobodnih piksela. Sada, ako postavimo prvi element na flex-grow:2; , a drugi flex-grow: 1; , tada će blokovi zauzeti cijelu dostupnu širinu kontejnera i širina prvog bloka će biti 300px, a drugog 200px. To se objašnjava činjenicom da je raspoloživih 300px slobodnog prostora u kontejneru raspoređeno između elemenata u omjeru 2:1, +200px prema prvom i +100px prema drugom.

Napomena: možete odrediti razlomke u vrijednosti, na primjer: 0,5 - flex-grow:0,5

Određuje faktor redukcije za element. Svojstvo je suprotno flex-grow i određuje kako bi se element trebao smanjiti ako u kontejneru nema slobodnog prostora. One. svojstvo počinje raditi kada je zbroj veličina svih elemenata veći od veličine kontejnera.

Zadani flex-shrink:1

Recimo da je kontejner širok 600px i sadrži dva elementa, svaki širine 300px - flex-basis:300px; . One. dva elementa u potpunosti ispunjavaju posudu. Odredimo flex-shrink: 2 za prvi element; , a drugi flex-shrink: 1; . Sada smanjimo širinu kontejnera za 300px, tj. elementi se moraju smanjiti za 300px da bi stali unutar kontejnera. Oni će biti komprimovani u omjeru 2:1, tj. prvi blok će se smanjiti za 200px, a drugi za 100px, a nove veličine elemenata će biti 100px i 200px.

Napomena: možete odrediti razlomke u vrijednosti, na primjer: 0,5 - flex-shrink:0,5

Postavlja osnovnu širinu elementa - širinu prije nego što se izračunaju bilo koji drugi uvjeti koji utiču na širinu elementa. Vrijednost se može specificirati u px, em, rem, %, vw, vh, itd. Konačna širina ovisit će o osnovnoj širini i vrijednostima flex-grow, flex-shrink i sadržaja unutar bloka. Sa auto, element dobija osnovnu širinu u odnosu na sadržaj unutar njega.

Podrazumevano: auto

Ponekad je bolje kodirati širinu elementa koristeći poznato svojstvo širine. Na primjer, širina: 50%; će značiti da će element unutar kontejnera biti točno 50%, međutim, svojstva flex-grow i flex-shrink će i dalje raditi. Ovo može biti potrebno kada je element rastegnut sadržajem unutar njega, više nego što je navedeno u flex-basis. Primjer.

flex-basis će biti "tvrd" ako su stretch i shrink postavljeni na nulu: flex-basis:200px; flex-grow:0; flex-shrink:0; . Sve ovo se može napisati kao flex:0 0 200px; .

Tri svojstva skraćenica: flex-grow flex-shrink flex-basis .

Zadano: flex: 0 1 auto

Međutim, možete odrediti jednu ili dvije vrijednosti:

Flex: nema; /* 0 0 auto */ /* broj */ flex: 2; /* flex-grow (flex-basis ide na 0) */ /* nije broj */ flex: 10em; /* flex-basis: 10em */ flex: 30px; /* flex-basis: 30px */ flex: auto; /* flex-basis: auto */ flex: content; /* flex-basis: sadržaj */ flex: 1 30px; /* flex-grow i flex-basis */ flex: 2 2; /* flex-grow i flex-shrink (flex-basis ide na 0) */ flex: 2 2 10%; /* flex-grow i flex-shrink i flex-basis */ align-self:

Omogućava vam da promijenite svojstvo align-items, samo za jedan element.

Podrazumevano: iz stavki poravnanja kontejnera

• rastezanje- element se rasteže da u potpunosti ispuni liniju
• flex start- element je pritisnut na početak reda
• flex end- element je pritisnut do kraja linije
• centar- element je poravnat sa središtem linije

osnovna linija- element je poravnat sa osnovnom linijom teksta

Omogućava vam da promijenite redoslijed (poziciju, poziciju) elementa u općem redu.

Podrazumevano: redosled: 0

Elementi podrazumevano imaju redosled: 0 i postavljaju se redosledom njihovog pojavljivanja u HTML kodu i smerom reda. Ali ako promijenite vrijednost svojstva reda, elementi će se poredati po redoslijedu vrijednosti: -1 0 1 2 3 ... . Na primjer, ako odredite redoslijed: 1 za jedan od elemenata, tada će prvo ići sve nule, a zatim element s 1.

Tako možete, na primjer, dobaciti prvi element do kraja, a da pritom ne mijenjate smjer kretanja preostalih elemenata ili HTML koda.

Bilješke

Kako se flex-basis razlikuje od širine?

Ispod su važne razlike između flex-basisa i širine/visine:

flex-basis radi samo za glavnu osovinu. To znači da sa flex-direction:row flex-basis kontroliše širinu (širinu), a sa flex-direction:column kontroliše visinu (visinu). .

flex-basis se odnosi samo na flex stavke. To znači da ako onemogućite flex na kontejneru, ovo svojstvo neće imati efekta.

Apsolutni elementi kontejnera ne učestvuju u fleksibilnim konstrukcijama... To znači da flex-basis ne utiče na fleksibilne elemente kontejnera ako su apsolutni position:absolute . Morat će navesti širinu/visinu.

• Kada koristite svojstvo flex 3, vrijednosti (flex-grow/flex-shrink/flex-basis) se mogu kombinovati i pisati kratko, dok za width grow ili shrink moraju biti zapisane odvojeno. Na primjer: flex:0 0 50% == širina:50%; flex-shrink:0; . Ponekad je jednostavno nezgodno.

Ako je moguće, ipak preferirajte flex-basis. Koristite širinu samo kada flex-basis ne odgovara.

Da li je razlika između flex-basis-a i širine greška ili karakteristika?

Sadržaj unutar flex elementa ga proširuje i ne može ići dalje od njega. Međutim, ako postavite širinu preko width ili max-width umjesto flex-basis , tada će element unutar flex kontejnera moći izaći izvan ovog kontejnera (ponekad je ovo ponašanje potrebno). primjer:

Primjeri Flex rasporeda

U primjerima se nigdje ne koriste prefiksi za kompatibilnost među pretraživačima. Ovo sam uradio radi lakšeg čitanja css-a. Stoga, pogledajte najnovije verzije Chromea ili Firefoxa za primjere.

#1 Jednostavan primjer vertikalnog i horizontalnog poravnanja

Počnimo s najjednostavnijim primjerom - vertikalno i horizontalno poravnanje u isto vrijeme i na bilo kojoj visini bloka, čak i gume.

Ili ovako, bez bloka unutra:

#1.2 Razdvajanje (razmak) između elemenata fleksibilnog bloka

Da biste pozicionirali elemente kontejnera na rubovima i proizvoljno odabrali element nakon kojeg će biti praznina, trebate koristiti svojstvo margin-left:auto ili margin-right:auto.

#2 Odaziv meni na flex-u

Napravimo meni na samom vrhu stranice. Na širokom ekranu, trebao bi biti na desnoj strani. U prosjeku, poravnajte u sredini. A na malom, svaki element bi trebao biti na novoj liniji.

#3 Responzivna 3 kolone

Ovaj primjer pokazuje kako brzo i praktično napraviti 3 stupca, koji će se, kada se suziti, pretvoriti u 2, a zatim u 1.

Imajte na umu da se to može učiniti bez korištenja medijskih pravila, sve je flex.

Idite na jsfiddle.net i promijenite širinu odjeljka "rezultat".

#4 Odzivni blokovi na flexu

Recimo da trebamo prikazati 3 bloka, jedan veliki i dva mala. Istovremeno, potrebno je da se blokovi prilagode malim ekranima. Mi radimo:

Idite na jsfiddle.net i promijenite širinu odjeljka "rezultat".

#5 Galerija o savijanju i tranziciji

Ovaj primjer pokazuje koliko brzo možete napraviti lijepu harmoniku sa slikama na flexu. Obratite pažnju na svojstvo tranzicije za flex.

#6 Flex to Flex (samo primjer)

Zadatak je napraviti fleksibilan blok. Tako da početak teksta u svakom bloku bude na istoj liniji vodoravno. One. kako se širina sužava, blokovi rastu u visinu. Treba mi da slika bude na vrhu, dugme da uvek bude na dnu, a tekst u sredini da počinje na jednoj horizontalnoj liniji...

Da bi se riješio ovaj problem, sami blokovi se rastežu savijanjem i za njih se postavlja maksimalna moguća širina. Svaki unutrašnji blok je takođe flex konstrukcija, sa flex-direction:column rotiranim; a element u sredini (gdje je tekst) rasteže se pomoću flex-grow:1; da popuni sav slobodan prostor, tako da je rezultat postignut - tekst je počeo jednim redom ...

Više primjera

Podrška pretraživača - 98,3%

Naravno, ne postoji puna podrška, ali svi moderni pretraživači podržavaju flexbox konstrukcije. Neki i dalje zahtijevaju prefikse. Za pravu sliku, pogledajmo caniuse.com i vidimo da će 96,3% pretraživača koji se danas koriste raditi bez prefiksa, sa 98,3% prefiksa. Ovo je odličan pokazatelj za hrabro korištenje flexboxa.

Da bih znao koji su prefiksi relevantni danas (jun 2019.), dat ću primjer svih flex pravila sa neophodni prefiksi:

/* Kontejner */ .flex ( display:-webkit-box; display:-ms-flexbox; display:flex; display:-webkit-inline-box; display:-ms-inline-flexbox; display:inline-flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:kolona; flex-direction:kolona; -ms-flex-wrap:wrap; flex-wrap:wrap; -ms -flex-flow:premotavanje kolone; flex-flow:premotavanje kolone; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; -ms-flex-line-pack: distribuirati; align-content:space-around; ) /* Stavke */ .flex-item ( -webkit-box-flex:1; -ms-flex-positive:1; flex-grow:1; -ms-flex- negativan:2; flex-shrink:2; -ms-flex-preferred-size:100px; flex-basis:100px; -ms-flex:1 2 100px; flex:1 2 100px; -ms-flex-item-align :center; align-self:center; -webkit-box-ordinal-group:3; -ms-flex-order:2; order:2; )

Bolje je da svojstva s prefiksima idu prije originalnog svojstva.
Na ovoj listi nema prefiksa koji su danas nepotrebni (prema kaniuse), ali generalno ima više prefiksa.

• (novo) - nova sintaksa: display: flex; .
• (tweener) - stara nezvanična sintaksa iz 2011: display: flexbox; .
• (staro) - stara sintaksa iz 2009: display: box;

Video

Pa, ne zaboravite na video, ponekad je i zanimljiv i razumljiv. Evo nekoliko popularnih:

Korisne fleksibilne veze

flexboxfroggy.com - flexbox igra za učenje.

Flexplorer je vizualni konstruktor flex koda.

O tome kako je lako raditi sa Flexboxom na primjeru izgleda šablona web stranice s vijestima.

Vjerujte mi, nema potrebe da ulazite u sve detalje rada sa Flexboxom ako želite da ga počnete koristiti odmah. U ovom tutorijalu, autor će vas upoznati sa nekim od karakteristika Flexbox-a i kreirati "izgled vijesti" sličan onome što ste možda vidjeli na web stranici The Guardian.

Razlog zašto autor koristi Flexbox je zbog mnogih mogućnosti koje pruža:
- jednostavnost stvaranja adaptivnih stupaca;
- stvaranje stubova iste visine;
- mogućnost guranja sadržaja na dno posude.

Idemo!

1. Počnite kreiranjem dvije kolone

Zauzvrat, Flexbox pojednostavljuje ovaj proces uz brojne prednosti kao što su:

Pisanje čistijeg koda: sve što treba da uradimo je da kreiramo kontejner sa pravilom display:flex;
- fleksibilnost: možemo promijeniti veličinu, rastegnuti i poravnati stupce promjenom nekoliko redova CSS-a;
- semantičko označavanje;
- osim toga, uz korištenje Flexbox-a, nema potrebe za otkazivanjem premotavanja kako bi se izbjeglo nepredvidivo ponašanje izgleda.

Počnimo kreiranjem dva stupca, jedan koji će zauzimati 2/3 širine našeg kontejnera, a drugi koji će zauzimati 1/3 njegove.

Kontejner stupovi;
- dva podređena elementa kolona, od kojih jedan ima dodatnu klasu glavna kolona, koji ćemo kasnije koristiti da kolonu učinimo širim.

Kolone (prikaz: flex; ) .kolona ( flex: 1; ) .glavni-kolona ( flex: 2; )
Zbog glavna kolona ima fleksibilnu vrijednost jednaku 2 , tada će ova kolona zauzimati dvostruko više prostora od druge.

Dodajmo malo vizuelnog dizajna i, kao rezultat, dobijamo:

Kliknite da vidite u akciji

2. Napravite od svake kolone flexbox kontejner

Dakle, potrebni su nam članci za:

Raspoređen okomito unutar stupca kontejnera;
- zauzeo sav raspoloživi prostor.

pravilo flex-direction: stupac specificirano za kontejner, zajedno s pravilom flex: 1 specificirano za podređeni element omogućava članku da popuni sav slobodni prostor okomito, dok visina prva dva stupca ostaje nepromijenjena.

Kliknite da vidite u akciji

3. Pravljenje kontejnera od artikla

naslov;
- stav;
- informativna tabla sa imenom autora i brojem komentara;
- neka adaptivna slika.

Ovdje koristimo Flexbox da gurnemo infobar do dna elementa. Evo, pogledajte kakav rezultat očekujemo.

A evo i samog koda:

Također smo prijavili imovinu flex: 1 do elementa članak-sadržaj, čime se rasteže na sav slobodan prostor i pritiska informacije o članku do dna. Visina stuba u ovom slučaju nije bitna.

Kliknite da vidite u akciji

4. Dodavanje više ugniježđenih kolona

Ugniježđena kolona ( flex: 2; )
Ovaj stupac će sada biti duplo širi od drugog.

Kliknite da vidite u akciji

5. Izrada prvog članka s horizontalnim rasporedom

Prvi članak (smjer flex-a: red; ) .first-article .telo-članka ( flex: 1; ) .first-article .article-image (visina: 300px; poredak: 2; padding-top: 0; širina: 400px;)
Nekretnina red igra veliku ulogu u ovom slučaju, jer vam omogućava da promijenite redoslijed HTML elemenata bez promjene HTML oznake. U stvarnosti, članak-slika u kodu dolazi ispred elementa članak-tijelo, ali se ponaša kao da je za njim.

Kliknite da vidite u akciji

6. Izrada prilagodljivog izgleda

Jedna od sjajnih stvari u vezi sa Flexboxom je to što možete jednostavno ukloniti pravilo displej: flex u kontejneru kako biste ga potpuno onemogućili (Flexbox), dok ostala njegova svojstva (npr align-items ili flex) će ostati u funkciji.

Kao rezultat toga, možemo aktivirati responzivni izgled tako što ćemo omogućiti Flexbox samo kada je to potrebno.

Tako da ćemo ukloniti displej: flex od selektora .kolone i .kolona, umjesto toga ih "pakira" u medijski upit:

@media ekran i (min-width: 800px) ( .columns, .column ( display: flex; ) )
To je sve! Na ekranima sa malom rezolucijom svi će članci biti locirani jedan iznad drugog, a na ekranima sa rezolucijom većom od 800 piksela - u dvije kolone.

7. Dodavanje završnih detalja

@media screen i (min-width: 1000px) ( .first-article ( flex-direction: row; ) .first-article .article-body ( flex: 1; ) .first-article .article-image (visina: 300px ; poredak: 2; padding-top: 0; širina: 400px; ) .main-column ( flex: 3; ) .nested-column ( flex: 2; ) )
Sadržaj prvog članka je vodoravno poravnat s tekstom na lijevoj strani i slikom na desnoj strani. Takođe, glavna kolona je sada šira (75%). Isto važi i za ugniježđenu kolonu (66%).

I evo konačnog rezultata!

Kliknite da vidite u akciji

Zaključak

O tome kako je lako raditi sa Flexboxom na primjeru izgleda šablona web stranice s vijestima.

Vjerujte mi, nema potrebe da ulazite u sve detalje rada sa Flexboxom ako želite da ga počnete koristiti odmah. U ovom tutorijalu, autor će vas upoznati sa nekim od karakteristika Flexbox-a i kreirati "izgled vijesti" sličan onome što ste možda vidjeli na web stranici The Guardian.

Razlog zašto autor koristi Flexbox je zbog mnogih mogućnosti koje pruža:
- jednostavnost stvaranja adaptivnih stupaca;
- stvaranje stubova iste visine;
- mogućnost guranja sadržaja na dno posude.

Idemo!

1. Počnite kreiranjem dvije kolone

Zauzvrat, Flexbox pojednostavljuje ovaj proces uz brojne prednosti kao što su:

Pisanje čistijeg koda: sve što treba da uradimo je da kreiramo kontejner sa pravilom display:flex;
- fleksibilnost: možemo promijeniti veličinu, rastegnuti i poravnati stupce promjenom nekoliko redova CSS-a;
- semantičko označavanje;
- osim toga, uz korištenje Flexbox-a, nema potrebe za otkazivanjem premotavanja kako bi se izbjeglo nepredvidivo ponašanje izgleda.

Počnimo kreiranjem dva stupca, jedan koji će zauzimati 2/3 širine našeg kontejnera, a drugi koji će zauzimati 1/3 njegove.

Kontejner stupovi;
- dva podređena elementa kolona, od kojih jedan ima dodatnu klasu glavna kolona, koji ćemo kasnije koristiti da kolonu učinimo širim.

Kolone (prikaz: flex; ) .kolona ( flex: 1; ) .glavni-kolona ( flex: 2; )
Zbog glavna kolona ima fleksibilnu vrijednost jednaku 2 , tada će ova kolona zauzimati dvostruko više prostora od druge.

Dodajmo malo vizuelnog dizajna i, kao rezultat, dobijamo:

Kliknite da vidite u akciji

2. Napravite od svake kolone flexbox kontejner

Dakle, potrebni su nam članci za:

Raspoređen okomito unutar stupca kontejnera;
- zauzeo sav raspoloživi prostor.

pravilo flex-direction: stupac specificirano za kontejner, zajedno s pravilom flex: 1 specificirano za podređeni element omogućava članku da popuni sav slobodni prostor okomito, dok visina prva dva stupca ostaje nepromijenjena.

Kliknite da vidite u akciji

3. Pravljenje kontejnera od artikla

naslov;
- stav;
- informativna tabla sa imenom autora i brojem komentara;
- neka adaptivna slika.

Ovdje koristimo Flexbox da gurnemo infobar do dna elementa. Evo, pogledajte kakav rezultat očekujemo.

A evo i samog koda:

Također smo prijavili imovinu flex: 1 do elementa članak-sadržaj, čime se rasteže na sav slobodan prostor i pritiska informacije o članku do dna. Visina stuba u ovom slučaju nije bitna.

Kliknite da vidite u akciji

4. Dodavanje više ugniježđenih kolona

Ugniježđena kolona ( flex: 2; )
Ovaj stupac će sada biti duplo širi od drugog.

Kliknite da vidite u akciji

5. Izrada prvog članka s horizontalnim rasporedom

Prvi članak (smjer flex-a: red; ) .first-article .telo-članka ( flex: 1; ) .first-article .article-image (visina: 300px; poredak: 2; padding-top: 0; širina: 400px;)
Nekretnina red igra veliku ulogu u ovom slučaju, jer vam omogućava da promijenite redoslijed HTML elemenata bez promjene HTML oznake. U stvarnosti, članak-slika u kodu dolazi ispred elementa članak-tijelo, ali se ponaša kao da je za njim.

Kliknite da vidite u akciji

6. Izrada prilagodljivog izgleda

Jedna od sjajnih stvari u vezi sa Flexboxom je to što možete jednostavno ukloniti pravilo displej: flex u kontejneru kako biste ga potpuno onemogućili (Flexbox), dok ostala njegova svojstva (npr align-items ili flex) će ostati u funkciji.

Kao rezultat toga, možemo aktivirati responzivni izgled tako što ćemo omogućiti Flexbox samo kada je to potrebno.

Tako da ćemo ukloniti displej: flex od selektora .kolone i .kolona, umjesto toga ih "pakira" u medijski upit:

@media ekran i (min-width: 800px) ( .columns, .column ( display: flex; ) )
To je sve! Na ekranima sa malom rezolucijom svi će članci biti locirani jedan iznad drugog, a na ekranima sa rezolucijom većom od 800 piksela - u dvije kolone.

7. Dodavanje završnih detalja

@media screen i (min-width: 1000px) ( .first-article ( flex-direction: row; ) .first-article .article-body ( flex: 1; ) .first-article .article-image (visina: 300px ; poredak: 2; padding-top: 0; širina: 400px; ) .main-column ( flex: 3; ) .nested-column ( flex: 2; ) )
Sadržaj prvog članka je vodoravno poravnat s tekstom na lijevoj strani i slikom na desnoj strani. Takođe, glavna kolona je sada šira (75%). Isto važi i za ugniježđenu kolonu (66%).

I evo konačnog rezultata!

Kliknite da vidite u akciji

Zaključak

Hej habr!

Jedne lijepe večeri, koja nije nagoveštavala ništa zanimljivo, naš chat je dobio prijedlog od autora publikacije, koju je on napisao u proljeće 2012., da napišemo remake članak, ali koristeći FlexBox i popratno objašnjenje šta i kako to radi. Nakon izvjesnog dijela nedoumica, interes za dublje razumijevanje specifikacije je ipak pobijedio, i sigurno sam sjeo da kucam upravo te primjere. Tokom uranjanja u ovo područje počele su se pojavljivati ​​mnoge nijanse, koje su se pretvorile u nešto više od običnog okretanja rasporeda. Općenito, u ovom članku želim govoriti o tako divnoj specifikaciji koja se zove “CSS fleksibilni modul rasporeda kutija” i pokazati neke od njegovih zanimljivih karakteristika i primjera primjene. Sve zainteresovane ljubazno pozivam na habrakat.

Ono na šta bih želeo da skrenem pažnju, za layout layout na FlexBox-u, programer će trebati određeni stepen adaptacije. Na vlastitom primjeru osjetio sam da dugogodišnje iskustvo igra okrutnu šalu. FlexBox zahtijeva malo drugačiju ideju o tome kako su elementi raspoređeni u toku.

Tehnički dio

Dakle. Postoje dvije glavne vrste stavki u FlexBoxu: Flex Container i njegovi potomci, Flex Items. Za inicijalizaciju kontejnera, dovoljno je dodijeliti, putem css-a, elementu display:flex; ili displej: inline-flex;. Razlika između flex-a i inline-flex-a je samo u principu interakcije sa elementima koji okružuju kontejner, kao što je display: block; i prikaz: inline-block;, respektivno.

Unutar flex kontejnera kreiraju se dvije ose, glavna os i okomita ili poprečna os. Uglavnom fleksibilni elementi su poređani precizno duž glavne ose, a zatim duž poprečne ose. Podrazumevano, glavna os je horizontalna i ide s lijeva na desno, dok je poprečna osa okomita i ide odozgo prema dolje.

Smjer osi se može kontrolirati korištenjem css svojstva flex direction. Ovo svojstvo uzima nekoliko vrijednosti:
red(podrazumevano): Glavna os fleksibilnog kontejnera ima istu orijentaciju kao inline osa trenutnog režima pravca reda. Početak (main-start) i kraj (main-end) smjera glavne osi odgovaraju početku (inline-start) i kraju (inline-end) inline osi (inline-axis).
red obrnuto: Sve je isto kao u redu samo se zamjenjuju glavni početak i glavni kraj.
kolona: isto kao i red, samo što je sada glavna os usmjerena odozgo prema dolje.
kolona revers: isto kao i obrnuto, samo je glavna osa odozdo prema gore.
Kako to funkcionira može se vidjeti u primjeru jsfiddle.

Prema zadanim postavkama, sve flex stavke u kontejneru staju u jednu liniju, čak i ako se ne uklapaju u kontejner, one prelaze granice kontejnera. Ovo ponašanje se mijenja pomoću svojstva flex wrap. Ova nekretnina ima tri stanja:
nowrap(podrazumevano): Fleksibilne stavke se nižu s leva na desno.
zamotati: fleksibilni elementi su ugrađeni u višelinijskom modu, prijenos se vrši u smjeru poprečne ose, odozgo prema dolje.
wrap reverse: isto kao i omot, ali se omotava odozdo prema gore.
Pogledajmo primjer.

Radi pogodnosti, tu je i dodatna nekretnina flex flow, u kojem možete istovremeno specificirati flex direction i flex wrap. izgleda ovako: flex-flow:

Elementi u kontejneru mogu se poravnati pomoću svojstva opravdati sadržaj duž glavne ose. Ovo svojstvo prihvaća čak pet različitih vrijednosti.
flex start(podrazumevano): Flex stavke su poravnate sa ishodištem glavne ose.
flex end: Elementi su poravnati prema kraju glavne ose
centar: Elementi su poravnati sa središtem glavne ose
prostor između: Elementi zauzimaju cijelu dostupnu širinu u kontejneru, krajnji vanjski elementi čvrsto prianjaju uz rubove spremnika, a slobodni prostor je ravnomjerno raspoređen između elemenata.
prostor okolo: flex stavke su poravnate tako da je slobodan prostor ravnomjerno raspoređen među stavkama. Ali vrijedi napomenuti da će razmak između ruba spremnika i ekstremnih elemenata biti upola manji od razmaka između elemenata u sredini reda.
Naravno, možete kliknuti na primjer kako ovo svojstvo funkcionira.

To nije sve, imamo i mogućnost poravnanja elemenata duž poprečne ose. Primjenom imovine align-items, koji također uzima pet različitih vrijednosti, možete postići zanimljivo ponašanje. Ovo svojstvo vam omogućava da poravnate elemente u nizu jedan u odnosu na drugi.
flex start: svi elementi su pritisnuti na početak reda
flex end: elementi su pritisnuti do kraja reda
centar: elementi su poravnati sa središtem reda
osnovna linija: Elementi se poravnavaju s osnovnom linijom teksta
rastezanje(podrazumevano): Elementi se rastežu da popune celu liniju.

Još jedno slično svojstvo prethodnom je poravnati sadržaj. Samo je on odgovoran za poravnavanje čitavih linija u odnosu na flex kontejner. Neće imati efekta ako su flex stavke na istoj liniji. Svojstvo ima šest različitih vrijednosti.
flex start: sve linije su pritisnute na početak poprečne ose
flex end: sve linije su pritisnute do kraja poprečne ose
centar: Sve linije u paketu su poravnate sa središtem poprečne ose
prostor između: linije su raspoređene od gornjeg ruba prema donjem, ostavljajući slobodan prostor između redova, dok su krajnje linije pritisnute uz rubove posude.
prostor okolo: Linije su ravnomjerno raspoređene po kontejneru.
rastezanje(podrazumevano): linije se protežu da popune raspoloživi prostor.
Možete isprobati kako funkcioniraju align-items i align-content u ovom primjeru. Posebno sam predstavio ova dva svojstva u jednom primjeru, budući da su u međusobnoj bliskoj interakciji i svako obavlja svoj zadatak. Obratite pažnju na to šta se dešava kada se elementi postavljaju na jednu liniju i na više linija.

Shvatili smo parametre fleksibilnog kontejnera, ostaje da se pozabavimo svojstvima fleksibilnih elemenata.
Prvo svojstvo s kojim ćemo se upoznati je red. Ovo svojstvo vam omogućava da promijenite poziciju u toku određenog elementa. Podrazumevano, sve flex stavke imaju red: 0; i grade se po redoslijedu prirodnog toka. U primjeru možete vidjeti kako elementi mijenjaju mjesta ako se na njih primjenjuju različite vrijednosti reda.

Jedno od glavnih svojstava je flex base. Pomoću ovog svojstva možemo odrediti osnovnu širinu fleksibilnog elementa. Zadana vrijednost je auto. Ova nekretnina je usko povezana sa flex-grow i flex-shrink, o čemu ću govoriti nešto kasnije. Prihvata vrijednost širine u px, %, em i drugim jedinicama. To nije striktno širina flex stavke, to je neka početna tačka. U odnosu na koji se element rasteže ili skuplja. U automatskom načinu rada, element dobiva osnovnu širinu u odnosu na sadržaj unutar njega.

flex-grow na nekoliko izvora ima potpuno netačan opis. Piše da navodno postavlja omjer veličina elemenata u kontejneru. Zapravo nije. Ovo svojstvo specificira faktor za povećanje elementa kada ima slobodnog prostora u kontejneru. Zadana vrijednost za ovo svojstvo je 0. Zamislimo da imamo flex kontejner širine 500px, unutar kojeg se nalaze dvije flex stavke, svaka sa osnovnom širinom od 100px. Ovo ostavlja još 300px slobodnog prostora u kontejneru. Ako je prvom elementu dato flex-grow: 2; a drugom elementu je dato flex-grow: 1;. Kao rezultat toga, ovi blokovi će zauzeti cijelu dostupnu širinu kontejnera, samo će širina prvog bloka biti 300px, a drugog samo 200px. Šta se desilo? Desilo se da je raspoloživih 300px slobodnog prostora u kontejneru raspoređeno između elemenata u omjeru 2:1, +200px prema prvom i +100px prema drugom. U stvari, to tako funkcionira.

Ovdje glatko prelazimo na još jedno slično svojstvo, naime flex-shrink. Zadana vrijednost je 1. Također postavlja faktor za promjenu širine elemenata, samo u suprotnom smjeru. Ako je kontejner širok manje nego zbir širina baze elemenata, tada ovo svojstvo stupa na snagu. Na primjer, kontejner ima širinu od 600px, a elementi flex-basis su 300px svaki. Dajte prvom elementu flex-shrink: 2, a drugom elementu flex-shrink: 1;. Sada smanjimo kontejner za 300px. Dakle, zbir širine elemenata je 300px veći od kontejnera. Ova razlika je raspoređena u omjeru 2:1, ispada da od prvog bloka oduzimamo 200px, a od drugog 100px. Nova veličina elementa je 100px i 200px za prvi i drugi element, respektivno. Ako postavimo flex-shrink na 0, tada sprječavamo da se element skupi na manje od njegove osnovne širine.

Zapravo, ovo je vrlo pojednostavljen opis kako sve to funkcionira, tako da je opći princip jasan. Detaljnije, ako nekoga zanima, algoritam je opisan u specifikaciji.

Sva tri svojstva mogu se napisati u skraćenom obliku pomoću izraza flex. izgleda ovako:
flex: ;
A možemo napisati i još dvije skraćene verzije, flex: auto; i flex: nema, što znači flex: 1 1 auto; i flex: 0 0 auto; respektivno.

Posljednje svojstvo flex stavki je align-self. Ovdje je sve jednostavno, ovo je isto kao i align-items za kontejner, što vam omogućava da nadjačate poravnanje za određeni element.

Svi umorni! Hajde primjeri!

Za početak, odredimo glavnu širinu stranice, poravnajte je sa središtem, pritisnite podnožje do dna stranice. Kao i uvek generalno.

Html (pozadina: #ccc; min-height: 100%; font-family: sans-serif; display: -webkit-flex; display: flex; flex-direction: column; ) body ( margin: 0; padding: 0 15px ; display: -webkit-flex; display: flex; flex-direction: stupac; flex: auto; ) .header (širina: 100%; maksimalna širina: 960px; min-width: 430px; margina: 0 auto 30px; padding : 30px 0 10px; display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content: space-between; box-sizing: border-box; ) .main ( širina: 100%; max-width .footer (pozadina: #222; širina: 100%; maksimalna širina: 960px; minimalna širina: 430px; boja: #eee; margina: auto; padding: 15px; veličina okvira: border-box; )

Zbog činjenice da smo specificirali flex-grow za .main: 1; rasteže se na punu dostupnu visinu, pritiskajući podnožje na dno. Bonus kod ovog rješenja je što podnožje može biti nefiksne visine.

Sada stavimo logo i meni u zaglavlje.
.logo (font-size: 0; margin: -10px 10px 10px 0; display: flex; flex: none; align-items: center; ) .logo:before, .logo:after ( content: ""; display: block ; ) .logo:before (pozadina: #222; širina: 50px; visina: 50px; margina: 0 10px 0 20px; border-radius: 50%; ) .logo:after (pozadina: #222; širina: 90px; visina: : 30px; ) .nav ( margina: -5px 0 0 -5px; display: -webkit-flex; display: flex; flex-wrap: wrap; ) .nav-itm (pozadina: #222; širina: 130px; visina: 50px; veličina fonta: 1,5rem; boja: #eee; dekoracija teksta: nema; margina: 5px 0 0 5px; prikaz: -webkit-flex; display: flex; justify-content: centar; align-items: centar; )

Pošto je zaglavlje postavljeno na flex-wrap: wrap; i justify-content: prostor-između; logo i meni su raštrkani na različitim stranama zaglavlja, a ako nema dovoljno prostora za meni, elegantno će se pomeriti ispod logotipa.

Dalje, vidimo veliki post ili baner, teško mi je reći šta je to konkretno, ali nije ni poenta. Imamo sliku sa desne strane i tekst sa naslovom na lijevoj strani. Ja se lično držim ideje da svaki element treba da bude što fleksibilniji, bez obzira da li se radi o adaptivnom rasporedu ili statičnom. Tako da u ovom postu imamo bočnu traku u koju se nalazi slika, striktno govoreći, ne možemo tačno reći koja nam širina treba, jer danas imamo veliku sliku, sutra malu, i svaki put nerado prepravljamo element od nule. Dakle, potrebna nam je bočna traka da zauzme mjesto koje joj je potrebno, a ostatak mjesta ide na sadržaj. Uradimo ovo:

Box (veličina fonta: 1,25rem; visina linije: 1,5; stil fonta: italic; margina: 0 0 40px -50px; display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content: centar; ) .box-base ( margin-left: 50px; flex: 1 0 430px; ) .box-side ( margin-left: 50px; flex: none; ) .box-img (max-width: 100%; visina : auto;)

Kao što možete vidjeti za .box-base, gdje imamo naslov i tekst, odredio sam širinu baze sa flex-basis: 430px, a također je zabranjeno skupljanje bloka korištenjem flex-shrink: 0;. Ovom manipulacijom smo rekli da sadržaj ne može biti manji od 430px širine. I s obzirom na to da za .box navodim flex-wrap: omotati; u trenutku kada bočna traka i sadržaj neće biti postavljeni u kontejner.box, bočna traka će automatski potpasti ispod sadržaja. I sve to bez upotrebe @ media! Mislim da je stvarno super.

Ostaje nam sadržaj od tri kolone. Postoji nekoliko rješenja za ovaj problem, ja ću pokazati jedno od njih, u ostatku izgleda postoji još jedna opcija.
Kreirajmo kontejner, nazovimo ga .content i postavimo ga.
.content ( margin-bottom: 30px; display: -webkit-flex; display: flex; flex-wrap: wrap; )

Kontejner ima tri kolone, .bannere, .posts, .comments
.banneri ( flex: 1 1 200px; ) .posts ( margin: 0 0 30px 30px; flex: 1 1 200px; ) .comments ( margin: 0 0 30px 30px; flex: 1 1 200px; )

Kolone sam postavio na osnovnu širinu od 200px da se kolone ne bi previše sužavale, bolje je da se po potrebi prenose jedan ispod drugog.

Prema izgledu, ne možemo bez @ media sa sadržajem, pa ćemo ponašanje kolona malo više prilagoditi širini<800px и <600px.
@media ekran i (maksimalna širina: 800px) ( .banneri ( margin-left: -30px; display: -webkit-flex; display: flex; flex-basis: 100%; ) .posts ( margin-left: 0; ) ) @medijski ekran i (maks. širina: 600px) ( .content (prikaz: blok; ) .banneri (margina: 0; prikaz: blok; ) .komentari (margina: 0; ) )

To je sva magija u izgradnji rasporeda na FlexBox-u. Još jedan zadatak koji mi se dopao je u 5. rasporedu, konkretno se tiče adaptacije sadržaja.

Vidimo kako su postovi na desktop rezoluciji ugrađeni u mrežu od tri u nizu. Kada je širina prozora za prikaz manji od 800px, mreža se pretvara u kolonu sa objavama, gdje se fotografija posta naizmjenično postavlja na lijevoj i desnoj strani sadržaja posta. A ako je širina manja od 600px, fotografija posta je potpuno skrivena.
.grid ( display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content: space-between; ) .grid-itm ( margin-bottom: 30px; flex-basis: calc(33,33% - 30px * 2/3); display: -webkit-flex; display: flex; flex-wrap: wrap; ) .grid-img ( margin: 0 auto 20px; flex: 0 1 80%; ) .grid-cont( flex: 0 1 100%; ) .grid-title (text-align: center; ) @media screen i (max-width: 800px) ( .grid-itm ( flex-wrap: nowrap; flex-basis: 100%; ) . grid-img ( flex: 0 0 auto; ) .grid-itm:nth-child(paran) .grid-img ( margin: 0 0 0 30px; red: 2; ) .grid-itm:nth-child(odd) .grid-img ( margin: 0 30px 0 0; ) .grid-cont ( flex: 1 1 auto; ) .grid-title ( text-align: left; ) ) @media screen i (max-width: 600px) ( .grid-img (prikaz: nema; ) )

Zapravo, ovo je samo mali dio onoga što se može implementirati na FlexBox. Specifikacija vam omogućava da napravite vrlo složene izglede stranica uz korištenje jednostavnog koda.

sadržaj:

Flexbox je novi način raspoređivanja blokova na stranici. Ovo je tehnologija stvorena posebno za raspored elemenata, za razliku od plutajućih. Korišćenjem Flexbox možete lako poravnati elemente vodoravno i okomito, promijeniti smjer i redoslijed prikaza elemenata, rastegnuti blokove do pune visine nadređenog ili ih zabiti na donji rub.

UPD od 02.02.2017: napravio zgodan flexbox cheatsheet sa živim demonstracijama i opisima iz specifikacije: Flexbox cheatsheet .

Primjeri koriste samo novu sintaksu. U vrijeme pisanja ovog teksta, oni su najispravnije prikazani u Chrome. U Firefoxu rade djelomično, u Safariju ne rade uopće.

Prema caniuse.com, Flexbox ne podržavaju IE 8 i 9 i Opera Mini, a drugi pretraživači ne podržavaju sva svojstva i/ili zahtijevaju prefikse.

To znači da se tehnologija trenutno ne može široko koristiti, ali sada je vrijeme da je bolje upoznate.

Prvo morate znati da su flex stavke raspoređene duž osi. Prema zadanim postavkama, elementi su raspoređeni vodoravno - duž glavna osovina- glavna osovina.

Takođe, imajte na umu da prilikom upotrebe Flexbox float , clear i vertical-align ne rade za unutrašnje blokove, kao ni svojstva koja postavljaju kolone u tekstu.

Pripremimo testno mjesto za eksperimente:

Jedan roditeljski blok (žuti) i 5 djece.

Displej: flex

I sada roditeljskom elementu dodajemo display: flex; . Unutrašnji divovi se redaju (duž glavne ose) sa kolonama iste visine, bez obzira na sadržaj.

display:flex; čini sve podređene elemente fluidnim - flex , a ne inline ili block, kao što je prvobitno bilo.

Ako roditeljski blok sadrži slike ili tekst bez prelamanja, oni postaju anonimne flex stavke.

prikaz svojstva za Flexbox može uzeti dvije vrijednosti:

flex - ponaša se kao blok element. Prilikom izračunavanja širine blokova, raspored ima prioritet (ako je širina blokova nedovoljna, sadržaj može ispuzati izvan granica).

inline-flex - ponaša se kao inline-block. Prioritet u odnosu na sadržaj (sadržaj širi blokove na potrebnu širinu tako da se linije uklapaju, ako je moguće).

Flex direction

Smjer u kojem su blokovi postavljeni je kontroliran svojstvom flex-direction.

Moguće vrijednosti:

red - red (podrazumevana vrednost); row-reverse - red sa elementima u obrnutom redosledu; stupac - stupac; column-reverse - stupac sa elementima obrnutim redoslijedom.

red i red-obrnuto

kolona i kolona-revers

Flex-wrap

Jedna linija može imati više blokova. Da li premotaju ili ne određuje svojstvo flex-wrap.

Moguće vrijednosti:

nowrap - blokovi nisu premotani (podrazumevana vrednost); omotati - blokovi su omotani; wrap-reverse - blokovi se omotavaju i postavljaju obrnutim redoslijedom.

Da biste skratili svojstva flex-direction i flex-wrap, postoji svojstvo: flex-flow .

Moguće vrijednosti: možete postaviti oba svojstva ili samo jedno. Na primjer:

flex-flow: kolona; flex-flow: wrap-reverse; flex-flow: kolona-reverse wrap;

Demo za row-reverse wrap-reverse:

red

Svojstvo order se koristi za kontrolu redosleda blokova.

Moguće vrijednosti: brojevi. Da stavite blok prvi, dajte mu red: -1:

opravdati sadržaj

Postoji nekoliko svojstava za poravnavanje stavki: justify-content, align-items i align-self.

justify-content i align-items se primjenjuju na roditeljski kontejner, align-self na potomke.

justify-content je odgovoran za poravnanje glavne ose.

Moguće vrijednosti za justify-content:

flex-start - stavke su poravnate od početka glavne ose (podrazumevana vrednost); flex-end - elementi su poravnati sa kraja glavne ose; centar - elementi su poravnati sa središtem glavne ose; prostor između - elementi su poravnati duž glavne ose, raspoređujući slobodan prostor između sebe; space-around - elementi su poravnati duž glavne ose, raspoređujući slobodan prostor oko njih.

flex-start i flex-end

prostor-između, prostor-okolo

Poravnajte stavke

align-items je odgovoran za poravnanje duž okomite ose.

Moguće vrijednosti za stavke poravnanja:

flex-start - elementi su poravnati od početka okomite ose; flex-end - elementi su poravnati sa kraja okomite ose; centar - elementi su centrirani; osnovna linija - elementi su poravnati duž osnovne linije; rastezanje - elementi se rastežu kako bi zauzeli sav prostor duž okomite ose (podrazumevana vrijednost).

flex-start , flex-end

osnovna linija, istezanje

Align-self

align-self je također odgovoran za poravnanje duž okomite ose, ali se postavlja na pojedinačne flex stavke.

Moguće vrijednosti za align-self:

auto je zadana vrijednost. Označava da element koristi align-items roditeljskog elementa; flex-start - element je poravnat od početka okomite ose; flex-end - element je poravnat od kraja okomite ose; centar - element je centriran; osnovna linija - element je poravnat sa baznom linijom; rastegnuti - element je rastegnut, zauzimajući sav prostor u visini.

Align-content

Za kontrolu poravnanja unutar višelinijskog flex kontejnera, postoji svojstvo align-content.

Moguće vrijednosti:

flex-start - stavke su poravnate od početka glavne ose; flex-end - elementi su poravnati sa kraja glavne ose; centar - elementi su poravnati sa središtem glavne ose; prostor između - elementi su poravnati duž glavne ose, raspoređujući slobodan prostor između sebe; prostor oko - elementi su poravnati duž glavne ose, raspoređujući slobodan prostor oko njih; rastezanje - elementi se rastežu da popune cijelu visinu (podrazumevana vrijednost).

flex-start , flex-end

centar, istezanje

prostor-između, prostor-okolo

PS: Neke stvari nikada nisam uspio vidjeti na djelu, na primjer, liniju flex-flow: column wrap ili puni zapis istog flex-direction: column; flex-wrap: omotati; .

Elementi su naslagani, ali nisu umotani:

Premotavanje ne radi sa flex-direction: column; , iako u specifikaciji izgleda ovako:

Mislim da će to uspjeti s vremenom.

UPD od 21.06.2014. Sve funkcionira ako bloku date visinu. Hvala na savjetu