Pozdrav, habr!

Jedne lijepe večeri, ne sluteći ništa zanimljivo, naš je chat dobio prijedlog od autora publikacije “Prevođenje 5 stvarno korisnih predložaka responzivnih oznaka u kod”, koju je napisao u proljeće 2012., da napiše prerađeni članak, ali koristeći FlexBox te popratno objašnjenje što i kako radi. Nakon nekih nedoumica, interes za dubljim razumijevanjem specifikacije ipak je pobijedio i sretno sam sjeo tipkati te iste primjere. Kako smo uranjali u ovo područje, mnoge su se nijanse počele razjašnjavati, što je preraslo u nešto više od pukog redizajniranja izgleda. Općenito, u ovom članku želim govoriti o tako divnoj specifikaciji koja se zove "CSS fleksibilni modul rasporeda okvira" i pokazati nešto od toga zanimljive karakteristike i primjeri primjene. Ljubazno pozivam sve zainteresirane da se pridruže hacku.

Ono na što bih vam želio skrenuti pozornost je da će programer trebati određeni stupanj prilagodbe za izradu izgleda na FlexBoxu. Na vlastitom sam primjeru osjetio da dugogodišnje iskustvo igra okrutnu šalu. FlexBox zahtijeva nešto drugačiji način razmišljanja o nizanju elemenata u toku.

Tehnički dio

Prije nego prijeđemo na bilo kakve primjere, vrijedi razumjeti koja su svojstva uključena u ovu specifikaciju i kako funkcioniraju. Budući da neki od njih u početku nisu baš jasni, a neki su okruženi mitovima koji nemaju veze sa stvarnošću.

Tako. FlexBox ima dvije glavne vrste elemenata: Flex kontejner i njegov dječji elementi- Fleksibilni predmet. Da biste inicijalizirali spremnik, samo dodijelite, putem css-a, elementu zaslon: savitljiv; ili zaslon: inline-flex;. Razlika između flex-a i inline-flex-a je samo u principu interakcije s elementima koji okružuju spremnik, slično display: block; i display: inline-block;, respektivno.

Unutar fleksibilnog spremnika stvaraju se dvije osi, glavna os i okomita ili poprečna os. Uglavnom su savitljivi elementi poravnati duž glavne osi, a zatim duž poprečne osi. Prema zadanim postavkama glavna je os vodoravna i usmjerena slijeva na desno, a poprečna os je okomita i usmjerena odozgo prema dolje.

Smjer osi može se kontrolirati pomoću css svojstva flex-direction. Ovo svojstvo ima niz vrijednosti:
red(zadano): Glavna os fleksibilnog spremnika ima istu orijentaciju kao inline os trenutnog načina rada smjera retka. Početak (main-start) i kraj (main-end) smjera glavne osi odgovaraju početku (inline-start) i kraju (inline-end) inline-osi.
red-obrnuti: Sve je isto kao u redu, samo su glavni početak i glavni kraj zamijenjeni.
stupac: isto kao red, samo je sada glavna os usmjerena odozgo prema dolje.
stupac-revers: isto kao obrnuti red, samo je glavna os usmjerena odozdo prema gore.
Možete vidjeti kako to radi u primjeru na jsfiddle.

Prema zadanim postavkama, sve fleksibilne stavke u spremniku smještene su u jednu liniju, čak i ako ne stanu u spremnik, protežu se izvan njegovih granica. Ovo se ponašanje mijenja pomoću svojstva flex-wrap. Ovo svojstvo ima tri stanja:
Nowrap(zadano): Flex stavke poredane su u jednom redu s lijeva na desno.
omotati: fleksibilni elementi su izgrađeni u višelinijskom načinu, prijenos se provodi u smjeru poprečne osi, odozgo prema dolje.
preokrenuti: isto što i omotati, ali se omota odozdo prema gore.
Pogledajmo primjer.

Radi praktičnosti, postoji dodatna nekretnina flex-flow, u kojem možete istovremeno odrediti flex-direction I flex-wrap. Ovako izgleda: fleksibilni protok:

Elementi u spremniku mogu se poravnati pomoću svojstva opravdati-sadržaj duž glavne osi. Ovo imanje traje čak pet različite opcije vrijednosti.
flex-start(zadano): Flex elementi su poravnati s ishodištem glavne osi.
savitljivi kraj: elementi su poravnati na kraj glavne osi
centar: Elementi su poravnati prema središtu glavne osi
razmak između: elementi zauzimaju cijelu raspoloživu širinu u spremniku, krajnji elementi su čvrsto pritisnuti uz rubove spremnika, a slobodni prostor ravnomjerno je raspoređen između elemenata.
prostor-okolo: Fleksibilni elementi su poravnati tako da je slobodni prostor ravnomjerno raspoređen između elemenata. Ali vrijedi napomenuti da će razmak između ruba spremnika i vanjskih 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 poravnavanja elemenata duž poprečne osi. Primjenom svojstva align-items, koji također ima pet različitih vrijednosti, možete postići zanimljivo ponašanje. Ovo svojstvo omogućuje poravnavanje elemenata u nizu relativno jedan prema drugom.
flex-start: svi elementi se guraju na početak retka
savitljivi kraj: elementi se guraju do kraja retka
centar: elementi su poravnati prema središtu retka
Osnovna linija: Elementi su poravnati s osnovnom linijom teksta
protežu se(zadano): elementi se razvlače da popune cijelu liniju.

Još jedno svojstvo slično prethodnom je poravnati sadržaj. On je jedini odgovoran za poravnavanje cijelih linija u odnosu na fleksibilni spremnik. Neće imati učinka ako fleksibilne stavke zauzimaju jedan redak. Svojstvo ima šest različitih vrijednosti.
flex-start: sve linije su pritisnute na početak poprečne osi
savitljivi kraj: sve linije su pritisnute do kraja poprečne osi
centar: Sve linije paketa su poravnate sa središtem poprečne osi
razmak između: linije se raspoređuju od gornjeg ruba prema dnu, ostavljajući slobodan prostor između linija, dok se krajnje linije prislone uz rubove posude.
prostor-okolo: Linije su ravnomjerno raspoređene po posudi.
protežu se(zadano): linije se rastežu kako bi zauzele sav raspoloživi prostor.
Možete isprobati kako rade align-items i align-content u ovom primjeru. Posebno sam predstavio ova dva svojstva u jednom primjeru, budući da međusobno djeluju prilično čvrsto, a svako obavlja svoju zadaću. Primijetite što se događa kada se elementi postave u jedan red ili u više redaka.

Razvrstali smo parametre savitljivog kontejnera, preostaje samo da shvatimo svojstva savitljivih elemenata.
Prvo svojstvo s kojim ćemo se upoznati je narudžba. Ovo svojstvo omogućuje promjenu položaja određenog elementa u toku. Prema zadanim postavkama, sve flex stavke imaju poredak: 0; a građeni su redom prirodnog toka. U primjeru možete vidjeti kako se elementi mijenjaju ako se na njih primijene različite vrijednosti redoslijeda.

Jedno od glavnih svojstava je flex-osnova. Pomoću ovog svojstva možemo odrediti osnovnu širinu fleksibilne stavke. Zadana vrijednost je auto. Ova nekretnina je usko povezana sa flex-grow I flex-shrink, o čemu ću malo kasnije. Prihvaća vrijednost širine u px, %, em i drugim jedinicama. U biti, ovo nije striktno širina savitljivog elementa, to je neka vrsta polazne točke. 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 netočan opis. Kaže da navodno postavlja omjer veličina elemenata u spremniku. Zapravo to nije istina. Ovo svojstvo specificira faktor povećanja elementa ako postoji slobodan prostor u kontejneru. Prema zadanim postavkama, ovo svojstvo ima vrijednost 0. Zamislimo da imamo fleksibilni spremnik koji ima širinu od 500 piksela, unutar njega postoje dvije fleksibilne stavke, svaka s osnovnom širinom od 100 piksela. To ostavlja još 300 px slobodnog prostora u spremniku. Ako navedemo flex-grow: 2; za prvi element i flex-grow: 1; za drugi element. Kao rezultat toga, ti će blokovi zauzeti cijelu dostupnu širinu spremnika, samo će širina prvog bloka biti 300px, a drugog samo 200px. Što se dogodilo? Ono što se dogodilo je da je raspoloživih 300px slobodnog prostora u spremniku raspoređeno između elemenata u omjeru 2:1, +200px za prvi i +100px za drugi. To je zapravo kako to funkcionira.

Ovdje glatko prelazimo na drugo slično svojstvo, naime flex-shrink. Zadana vrijednost je 1. Također postavlja faktor za promjenu širine elemenata, samo u suprotnom smjeru. Ako posuda ima širinu manje nego zbroj osnovne širine elemenata, tada ovo svojstvo stupa na snagu. Na primjer, spremnik ima širinu od 600px, a flex-basis elemenata je 300px. Dajte prvom elementu flex-shrink: 2;, a drugom elementu flex-shrink: 1;. Sada smanjimo spremnik za 300px. Stoga je zbroj širina elemenata 300px veći od širine spremnika. Ova razlika je raspoređena u omjeru 2:1, tako da od prvog bloka oduzimamo 200px, a od drugog 100px. Nova veličina elemenata je 100px i 200px za prvi i drugi element. Ako flex-shrink postavimo na 0, tada sprječavamo skupljanje elementa na veličinu manju od njegove osnovne širine.

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

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

Zadnje svojstvo fleksibilnih elemenata ostaje poravnati se. Ovdje je sve jednostavno, isto je kao align-items za spremnik, što vam omogućuje nadjačavanje poravnanja za određeni element.

To je to, dosta mi je! Navedite primjere!

Tehnički dio smo sredili, ispalo je dosta dugo, ali treba ući u to. Sada možemo prijeći na praktičnu primjenu.
Tijekom razvoja tih "pet zaista korisnih responzivnih predložaka izgleda", morali smo riješiti tipične situacije s kojima se programeri često susreću. S flexboxom implementacija ovih rješenja postaje lakša i fleksibilnija.
Uzmimo isti 4. izgled, jer... ima najzanimljivije elemente.

Najprije označimo glavnu širinu stranice, poravnajmo je prema sredini i pritisnemo podnožje na dno stranice. Kao i uvijek općenito.

Html ( pozadina: #ccc; minimalna visina: 100%; obitelj-fontova: sans-serif; prikaz: -webkit-flex; prikaz: flex; smjer savijanja: stupac; ) tijelo ( margina: 0; ispuna: 0 15px ; display: -webkit-flex; display: flex; flex-direction: column; flex: auto; ) .header ( width: 100%; max-width: 960px; min-width: 430px; margin: 0 auto 30px; padding : 30px 0 10px; display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content: space-between; box-sizing: border-box; ) .main ( width: 100%; max-width : 960px; min-width: 430px; margin: auto; flex-grow: 1; box-sizing: border-box; ) .footer ( background: #222; width: 100%; max-width: 960px; min-width : 430px; boja: #eee; margina: auto; padding: 15px; veličina okvira: border-box; )

Zbog činjenice da smo naveli flex-grow: 1 za .main; rasteže se do pune raspoložive visine, pritišćući podnožje prema dnu. Bonus u ovom rješenju je da podnožje može biti nefiksne visine.

Postavimo sada logotip i izbornik u zaglavlje.
.logo (veličina fonta: 0; margina: -10px 10px 10px 0; display: flex; flex: none; align-items: center; ) .logo:before, .logo:after ( content: ""; display: block ; ) .logo:before ( background: #222; width: 50px; height: 50px; margin: 0 10px 0 20px; border-radius: 50%; ) .logo:after ( background: #222; width: 90px; height : 30px; ) .nav ( margina: -5px 0 0 -5px; display: -webkit-flex; display: flex; flex-wrap: wrap; ) .nav-itm ( background: #222; width: 130px; height: 50px; veličina fonta: 1,5rem; boja: #eee; ukras teksta: nijedan; margina: 5px 0 0 5px; prikaz: -webkit-flex; prikaz: flex; opravdanje-sadržaj: centar; poravnanje stavki: centar; )

Budući da zaglavlje ima flex-wrap: wrap; i justify-content: razmak između; Logo i izbornik su razbacani na različitim stranama zaglavlja, a ako nema dovoljno mjesta za izbornik, on će se elegantno pomaknuti ispod logotipa.

Zatim vidimo veliku objavu ili banner, teško je reći što je to konkretno, ali to nije poanta. Desno imamo sliku, a lijevo tekst s naslovom. Osobno se držim ideje da svi elementi trebaju biti što fleksibilniji, bez obzira na to je li izgled prilagodljiv ili statičan. Dakle, u ovom postu imamo bočnu traku u kojoj se nalazi slika; strogo govoreći, ne možemo točno reći koja nam širina treba, jer danas imamo veliku sliku, sutra malu, i ne želimo ponavljati element svaki put ispočetka. To znači da nam bočna traka treba da zauzme mjesto koje treba, a ostatak prostora će otići na sadržaj. Napravimo to:

Okvir (veličina fonta: 1,25 rem; visina linije: 1,5; stil fonta: kurziv; margina: 0 0 40px -50px; prikaz: -webkit-flex; prikaz: flex; flex-wrap: omotaj; justify-content: center; ) .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 vidite za .box-base, gdje imamo naslov i tekst, odredio sam širinu baze flex-basis: 430px;, a također je zabranjeno korištenje skupljanja blokova savijanje-skupljanje: 0;. Ovom manipulacijom rekli smo da sadržaj ne može biti manji od 430px. A s obzirom na to da za .box navodim flex-wrap: omot; u trenutku kada bočna traka i sadržaj ne stanu u container.box, bočna traka će automatski pasti ispod sadržaja. I sve to bez primjene @mediji! Mislim da je ovo stvarno jako cool.

Ostaje nam sadržaj u tri stupca. Postoji nekoliko rješenja za ovaj problem, pokazat ću jedno od njih; u ostalim izgledima postoji druga opcija.
Kreirajmo spremnik, nazovimo ga .content i konfigurirajmo ga.
.content ( margin-bottom: 30px; display: -webkit-flex; display: flex; flex-wrap: wrap; )

Kontejner ima tri stupca, .bannere, .postove, .komentare
.banneri ( flex: 1 1 200px; ) .postovi ( margina: 0 0 30px 30px; flex: 1 1 200px; ) .komentari ( margina: 0 0 30px 30px; flex: 1 1 200px; )

Stupcima sam dao osnovnu širinu od 200px kako se stupci ne bi previše suzili, ali bi bilo bolje da su po potrebi pomaknuti jedan ispod drugog.

Prema izgledu, nećemo moći bez @media sa sadržajem, pa prilagodimo ponašanje stupaca za širinu još malo<800px и <600px.
@medijski zaslon i (max-width: 800px) ( .banneri ( margin-left: -30px; display: -webkit-flex; display: flex; flex-basis: 100%; ) .posts ( margin-left: 0; ) ) @medijski zaslon i (max-width: 600px) ( .content ( display: block; ) .banneri ( margin: 0; display: block; ) .comments ( margin: 0; ) )

To je sva čarolija kada je u pitanju stvaranje izgleda na FlexBoxu. Još jedan zadatak koji mi se svidio nalazi se u 5. layoutu, konkretno tiče se prilagodbe sadržaja.

Vidimo kako su na rezoluciji stolnog računala postovi izgrađeni u mreži od tri u nizu. Kada širina okvira za prikaz postane manja od 800 piksela, rešetka se pretvara u stupac s objavama, gdje je fotografija objave poredana naizmjenično s lijeve i desne strane sadržaja objave. A ako je širina manja od 600px, fotografija objave 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 ( margina: 0 auto 20px; flex: 0 1 80%; ) .grid-cont( flex: 0 1 100%; ) .grid-title ( text-align: center; ) @media screen and (max-width: 800px) ( .grid-itm ( flex-wrap: nowrap; flex-basis: 100%; ) . grid-img ( flex: 0 0 auto; ) .grid-itm:nth-child(even) .grid-img ( margin: 0 0 0 30px; order: 2; ) .grid-itm:nth-child(odd) .grid-img ( margina: 0 30px 0 0; ) .grid-cont ( flex: 1 1 auto; ) .grid-title ( text-align: lijevo; ) ) @medijski zaslon i (max-width: 600px) ( .grid-img (prikaz: ništa; ) )

Zapravo, ovo je samo mali dio onoga što se može implementirati s FlexBoxom. Specifikacija vam omogućuje izradu vrlo složenih izgleda stranica pomoću jednostavnog koda.

Flexbox (Flexible Box Layout Module) specifikacija je metoda pozicioniranja elemenata u vodoravnom ili okomitom smjeru.

Flexbox kombinira skup svojstava za roditeljski flex spremnik i podređene flex stavke.

Da bi element postao fleksibilni spremnik, mora biti dodijeljen zaslon: savitljiv; ili zaslon: inline-flex;(blok ili linija).

Unutar fleksibilnog spremnika stvorene su dvije osi: glavna i poprečne osi okomite na nju. Prvo se savitljivi elementi poravnavaju duž glavne osi, a zatim duž poprečne.

Svojstva fleksibilnog spremnika
flex-direction	Definira smjer glavne osi. Moguće vrijednosti: red– s lijeva na desno (zadano); red-obrnuti- s desna na lijevo; stupac- odozgo prema dolje; stupac-revers- dolje gore.
flex-wrap	Određuje je li spremnik višeredni. Moguće vrijednosti: Nowrap– fleksibilni elementi su poredani u jednu liniju; ako ne stanu u spremnik, izlaze izvan njegovih granica (standardno); omotati– savitljivi elementi se poredaju u više linija ako ne stanu u jednu; preokrenuti- slično omotati, ali prijenos se odvija odozdo prema gore.
flex-flow	Definira dva parametra odjednom: flex-direction i flex-wrap. Na primjer, flex-flow: omotač stupca;
opravdati-sadržaj	Određuje poravnanje elemenata duž glavne osi. Moguće vrijednosti: flex-start– savitljivi elementi su pritisnuti na početak glavne osi (standardno); savitljivi kraj– fleksibilni elementi su pritisnuti na kraj glavne osi; centar– savitljivi elementi su poravnati prema središtu glavne osi; razmak između– savitljivi elementi su raspoređeni duž glavne osi, pri čemu je prvi element pritisnut na početak osi, a posljednji na kraj; prostor-okolo– fleksibilni elementi su raspoređeni duž glavne osi, s tim da je slobodan prostor ravnomjerno podijeljen između elemenata. Ali vrijedi napomenuti da se razmaci zbrajaju i da je udaljenost između elemenata dvostruko veća od udaljenosti između rubova spremnika i najudaljenijih elemenata.
align-items	Određuje poravnanje elemenata duž poprečne osi. Moguće vrijednosti: flex-start– savitljivi elementi su pritisnuti na početak poprečne osi (standardno); savitljivi kraj– fleksibilni elementi su pritisnuti na kraj poprečne osi; centar– savitljivi elementi su poravnati prema središtu poprečne osi; Osnovna linija– savitljivi elementi su poravnati duž svoje osnovne linije. Osnovna linija je zamišljena linija koja se proteže duž donjeg ruba znakova bez uzimanja u obzir prepusta, kao što su slova "d", "r", "ts", "sch"; protežu se– fleksibilni elementi rastežu se zauzimajući sav raspoloživi prostor duž poprečne osi. Ali ako elementi imaju zadanu visinu, tada protežu se bit će zanemaren.
poravnati sadržaj	Određuje poravnanje poprečne osi cijelih redova savitljivih stavki. Moguće vrijednosti: flex-start– redovi savitljivih elemenata pritisnuti su na početak poprečne osi (standardno); savitljivi kraj– nizovi savitljivih elemenata pritisnuti su na kraj poprečne osi; centar– nizovi savitljivih elemenata poravnati su prema središtu poprečne osi; razmak između– nizovi savitljivih elemenata raspoređeni su po poprečnoj osi, pri čemu je prvi red pritisnut na početak osi, a posljednji na kraj; prostor-okolo– nizovi savitljivih elemenata raspoređeni su po poprečnoj osi, s tim da je slobodan prostor ravnomjerno raspoređen između redova. Ali vrijedi napomenuti da se razmaci zbrajaju i da je udaljenost između linija dvostruko veća od udaljenosti između rubova spremnika i najudaljenijih linija. protežu se– redovi savitljivih elemenata se razvlače, zauzimajući sav raspoloživi prostor duž poprečne osi. Ali ako elementi imaju zadanu visinu, tada protežu se bit će zanemaren. Ovo svojstvo ne radi za jednolinijski fleksibilni spremnik.

Svojstva Flex elementa
narudžba	Određuje redoslijed u kojem se jedan flex element pojavljuje unutar flex spremnika. Navedeno kao cijeli broj. Zadana vrijednost je 0, a zatim elementi slijede jedan za drugim prirodnim redoslijedom. Značenje narudžba specificira težinu pozicije elementa u nizu, a ne njegovu apsolutnu poziciju.
flex-osnova	Definira osnovnu veličinu fleksibilne stavke prije dodjele prostora unutar spremnika. Može se navesti u px, %, em i drugim mjernim jedinicama. U biti, ovo je neka vrsta polazne točke u odnosu na koju se element rasteže ili sabija. Zadana vrijednost – auto, pri čemu veličina elementa ovisi o veličini unutarnjeg sadržaja.
flex-grow	Određuje koliko će slobodnog prostora unutar spremnika fleksibilna stavka dodati svojoj osnovnoj veličini. Određeno cijelim brojem koji služi kao proporcija. Zadana vrijednost je 0. Ako su svi elementi flex-grow: 1, onda će svi biti iste veličine. Ako jednu fleksibilnu stavku postavite na 2, svojoj će osnovnoj veličini dodati dvostruko više od ostalih.
flex-shrink	Određuje koliko će se, ako nema dovoljno prostora, flex element smanjiti u odnosu na smanjenje susjednih elemenata unutar flex spremnika. Određeno cijelim brojem koji služi kao proporcija. Zadana vrijednost je 1. Ako je jedan flex element postavljen na savitljivo skupljanje: 2, tada će se dvostruko više oduzeti od njegove osnovne veličine nego od ostalih ako je spremnik manji od zbroja osnovnih veličina elemenata koje sadrži.
savijati	Definira tri parametra odjednom: flex-grow, flex-shrink, flex-basis. Na primjer, flex: 1 1 200px;
poravnati se	Nadjačava zadano poravnanje ili align-items, za određeni savitljivi element. Moguće vrijednosti: flex-start– savitljivi element je pritisnut na početak poprečne osi (standardno); savitljivi kraj– savitljivi element se pritisne na kraj poprečne osi; centar– savitljivi element je poravnat sa središtem poprečne osi; Osnovna linija– savitljivi element je poravnat s osnovnom linijom; protežu se– fleksibilni elementi se rastežu, zauzimajući sav raspoloživi prostor duž poprečne osi. Ali ako je navedena visina, onda protežu se bit će zanemaren.

Značajke korištenja Flexboxa u praksi

1. Desno poravnanje

S razvojem internetskih tehnologija, uključujući HTML i CSS, programerima se stalno otvaraju nove mogućnosti za izradu web stranica. Jedan od problema ostaje prisutnost zastarjelih verzija preglednika. Ovo se uglavnom odnosi na Internet Explorer, posebno za one koji koriste Windows XP.

Dizajner izgleda internetske stranice često se suočava sa zadatkom poravnavanja CSS blokova na stranici. Na primjer, možete rasporediti sve blokove jedan za drugim, vodoravno, postaviti ih u središte ili na dno spremnika itd. S pojavom parametra svojstva display - flex, ovaj zadatak je znatno pojednostavljen. Ova je tehnologija dizajnirana za raspored podređenih elemenata, odnosno elemenata unutar bloka ili spremnika. Parametri ovog izgleda su više nego dovoljni.

Dakle, prije svega, trebate stvoriti nadređeni spremnik. Kreirajmo ga tako da se oko njega pojavi okvir radi jasnoće. CSS kod za spremnik bit će sljedeći:

Spremnik (
širina:450px;
visina:250px;
obrub: 1px čvrsti #000000;
zaslon: savitljiv;
flex-wrap: omot;
align-content:stretch;
}

Glavna imovina je zaslon: flex. Kako bi podređeni elementi bili smješteni u nekoliko redaka, dodajte svojstvo - flex-wrap: omotaj.

I samo vlasništvo poravnati sadržaj određuje kako css blokovi trebaju biti postavljeni i poravnati. Parametar protežu se omogućuje ravnomjerno raspoređivanje blokova u spremniku. Istodobno, njihova se visina može automatski odabrati. Kako izgleda? Dodajmo css za interne blokove.

Spremnik div (
širina: 50px;
pozadina:zelena;
margina:5px;
}

Visinu ne postavljamo namjerno. HTML kôd izgleda ovako:

Rezultat koda prikazan je na slici.

Što se događa ako odredite i visinu blokova:

Spremnik div (
širina: 50px;
visina: 50px;
pozadina:zelena;
margina:5px;
}

Sada uklonimo visinu i učinimo širinu blokova jednakom 100%

Spremnik div (
širina: 100%;
pozadina:zelena;
margina:5px;
}

Razumijemo.

Još jedan parametar poravnati sadržaj je centar i omogućuje poravnavanje svih blokova u sredini.

Spremnik (
širina:450px;
visina:250px;
obrub: 1px čvrsti #000000;
zaslon: savitljiv;
flex-wrap: omot;
align-content:center;
}
.spremnik div(
širina: 50px;
visina:50px;
pozadina:zelena;
margina:5px;
}

Proizlaziti:

Druga opcija savitljivi kraj Svojstva poravnati sadržaj omogućit će vam postavljanje blokova na dno spremnika.

Spremnik (
širina:450px;
visina:250px;
obrub: 1px čvrsti #000000;
zaslon: savitljiv;
flex-wrap: omot;
align-content:flex-end;
}

Parametar flex-start učinit će sve upravo suprotno.

Spremnik (
širina:450px;
visina:250px;
obrub: 1px čvrsti #000000;
zaslon: savitljiv;
flex-wrap: omot;
align-content:flex-start;
}

Još jedan parametar svojstva poravnati sadržaj, čije rezultate neće biti lako stvoriti bez upotrebe fleksibilnog spremnika - ovo razmak između. Svojstvo postavlja prvi redak na vrh, a drugi na dno, stvarajući prazan prostor između njih.

Dio CSS koda:

Spremnik (
širina:450px;
visina:250px;
obrub: 1px čvrsti #000000;
zaslon: savitljiv;
flex-wrap: omot;
align-content:space-between;
}

Proizlaziti:

Vlasništvo prostor-okolo dodaje prazan prostor na vrhu i dnu. Štoviše, svaki od njih jednak je polovici praznog prostora u središtu.

Spremnik (
širina:450px;
visina:250px;
obrub: 1px čvrsti #000000;
zaslon: savitljiv;
flex-wrap: omot;
align-content:space-around;
}

Dakle, svojstvo css poravnati sadržaj ima mnogo parametara: rastezanje, savijanje-početak, savijanje-kraj, središte, razmak između, razmak-okolo.

Kao što možete vidjeti iz gornjih primjera, promjenom jednog parametra svojstva css align-content, koristimo poravnanje css blokova pomoću flex tehnologije na potpuno različite načine. Ovaj kôd ne radi u Internet Exploreru do inačice 10.

U ovom ćemo članku predstaviti tehnologiju CSS Flexbox, osmišljenu za izradu fleksibilnih izgleda web stranica.

Svrha CSS Flexboxa

CSS Flexbox je za stvaranje fleksibilnih izgleda. Koristeći ovu tehnologiju možete vrlo jednostavno i fleksibilno složiti elemente u spremnik, raspodijeliti raspoloživi prostor između njih i poravnati ih na ovaj ili onaj način, čak i ako nemaju određene dimenzije.

CSS Flexbox čini stvaranje responzivnog dizajna puno lakšim nego korištenjem Float-a i pozicioniranja.

Flexbox se može koristiti i za CSS označavanje cijele stranice i njezinih pojedinačnih blokova.

Podrška preglednika za CSS Flexbox

CSS Flexbox podržavaju svi moderni preglednici koji se trenutno koriste (koristeći prefikse: IE10+, Edge12+, Firefox 2+, Chrome 4+, Safari 3.1+, Opera 12.1+, iOS Safari 3.2, Opera mini, Android 2.1+, Blackberry 7+) .

Osnove CSS Flexboxa

Stvaranje CSS markupa pomoću Flexboxa počinje postavljanjem svojstva CSS prikaza potrebnog HTML elementa na flex ili flex-inline.

Nakon toga ovaj element postaje fleksibilni spremnik i sve to direktno podređeni elementi su fleksibilni elementi. Štoviše, kada govorimo o flexboxu, mislimo samo na element s display:flex ili display:flex-inline i sve elemente direktno koji se nalazi u njemu. Dakle, u CSS Flexboxu postoje samo dvije vrste elemenata: flex kontejner i flex element.

Svojstva prefiksa i maksimalne širine dodana su u CSS za podršku izgleda u većini preglednika.

Da biste "pretvorili" blok u fleksibilni spremnik, koristite klasu reda. Postavljanje širine .col__article i .col__aside flex elemenata unutar flex spremnika vrši se korištenjem flex CSS svojstva.

Kao primjer, označimo još jedno podnožje pomoću flexboxa i stvorimo blok koji se sastoji od tri elementa u elementu .col__article (minimalna širina jednog elementa je 300px). U podnožje ćemo postaviti četiri bloka (minimalna širina jednog bloka je 200px).

Svojstvo poredak kontrolira redoslijed u kojem se podređeni elementi pojavljuju unutar fleksibilnog spremnika. Prema zadanim postavkama, raspoređeni su redoslijedom kojim su izvorno dodani u flex spremnik.

Vrijednosti

.flex-item ( narudžba:<целое число>; }

Flex stavke mogu se mijenjati redoslijedom pomoću ovog jednostavnog svojstva bez mijenjanja HTML koda.

Zadana vrijednost: 0.

flex-grow

Ovo svojstvo specificira faktor rasta, koji određuje koliko će flex stavka rasti u odnosu na druge flex stavke u flex spremniku prilikom dodjele pozitivnog slobodnog prostora.

Vrijednosti

.flex-item (flex-grow:<число>; }

Ako sve flex stavke imaju istu vrijednost flex-grow, tada će sve stavke imati istu veličinu u spremniku.

Druga fleksibilna stavka zauzima više prostora u odnosu na veličinu ostalih fleksibilnih stavki.

Zadana vrijednost: 0.

flex-shrink

flex-shrink specificira faktor skupljanja koji određuje koliko će se savitljiva stavka smanjiti u odnosu na druge savitljive stavke u savitljivom spremniku prilikom distribucije negativnog slobodnog prostora.

Vrijednosti

.flex-item ( flex-shrink:<число>; }

Prema zadanim postavkama, sve fleksibilne stavke mogu se smanjiti, ali ako vrijednost fleksibilnog skupljanja postavimo na nulu (bez skupljanja), tada stavke zadržavaju svoju izvornu veličinu.

Zadana vrijednost: 1.

Negativni brojevi nisu dopušteni.

flex-osnova

Ovo svojstvo ima iste vrijednosti kao i svojstva širine i visine i određuje početnu osnovnu veličinu savitljivog elementa, prije nego što se slobodni prostor dodijeli prema omjerima.

Vrijednosti

.flex-item ( flex-basis: auto |<ширина>; }

flex-basis specificiran je za četvrtu flex stavku i diktira njezinu početnu veličinu.

Zadana vrijednost:auto.

savijati

Ovo svojstvo je skraćenica za svojstva flex-grow, flex-shrink i flex-basis. Između ostalih vrijednosti, također možete postaviti automatski (1 1 auto ) i ništa (0 0 auto ).

Vrijednosti

.flex-item (flex: ništa | auto | [ ? || ]; }

Zadana vrijednost: 0 1 auto .

W3C preporučuje korištenje skraćenog svojstva flex umjesto pojedinačnih svojstava jer flex ispravno resetira sve neodređene komponente za tipičnu upotrebu.

poravnati se

Svojstvo align-self omogućuje vam nadjačavanje zadanog poravnanja (ili vrijednosti navedene putem align-items ) za pojedinačne fleksibilne stavke. Da biste razumjeli dostupne vrijednosti, pogledajte opis align-items za flex spremnik.

Vrijednosti

.flex-item ( align-self: auto | flex-start | flex-end | center | baseline | stretch; )

Za treći i četvrti flex element, poravnanje je redefinirano putem svojstva align-self.