Poravnavanje okvira s css-om pomoću flex kontejnera. Sve što trebate znati o Flexbox Alignment Flex stavkama

Flexbox modul za označavanje ( od engleskog Flexible Box - fleksibilni blok), koji je trenutno u fazi “ Moguća preporuka»W3C standardizacija ( Preporuka kandidata za W3C) ima za cilj pružiti učinkovitiji način označavanja, poravnanja i raspodjele prostora između elemenata u spremniku, čak i ako je njihova veličina nepoznata i/ili određena dinamički ( zato se i zvao "fleksibilan").

Glavna ideja fleksibilnih izgleda je dati kontejneru mogućnost promjene visine/širine (i redoslijeda) svojih elemenata kako bi se optimalno ispunio raspoloživi prostor ( uglavnom za podršku svih vrsta i veličina zaslona).

Fleksibilni spremnik rasteže predmete kako bi ispunio slobodan prostor ili skuplja stavke kako bi spriječio njihovo izlazak izvan granica.

Ono što je najvažnije, Flexbox izgled je neovisan o smjeru, za razliku od uobičajenih izgleda ( blokovi koji su orijentirani okomito i inline elementi koji su horizontalno).

Iako obični elementi označavanja dobro funkcioniraju na stranicama, nedostaje im fleksibilnost ( a ovo nije igra riječi) za podršku velikih i složenih aplikacija ( osobito kada je riječ o promjeni orijentacije, dimenzija, rastezanju, skupljanju i tako dalje).

Napomena: oznaka Flexboxa najprikladnija je za komponente aplikacije i male izglede, dok je oznaka temeljena na mreži najprikladnija za rasporede velikih razmjera.

Osnovni pojmovi i pojmovi

Budući da je Flexbox cijeli modul, a ne zasebno svojstvo, sadrži mnogo elemenata, uključujući cijeli skup svojstava. Neki od njih namijenjeni su za nanošenje na spremnik ( roditeljski element poznat kao flex kontejner), dok druge treba primijeniti na djecu ( nazovimo ih flex predmetima).

Dok se konvencionalno označavanje temelji na kutiji i inline smjerovima, flex markiranje se temelji na smjerovima flex toka. Pogledajte dijagram u nastavku iz specifikacije kako biste objasnili osnovnu ideju iza flex markupa:

U osnovi, elementi će biti postavljeni ili duž glavne osi ( od točke glavnog početka do glavnog kraja), ili duž poprečne osi ( od križnog početka do križnog kraja):

glavna os je glavna os savitljivog kontejnera duž koje se polažu flex stavke. Budite oprezni, ne mora biti vodoravno, njegov položaj ovisi o svojstvu flex-direction (vidi dolje);
glavni početak | glavni kraj - flex stavke se nalaze unutar kontejnera, počevši od glavne početne točke i dosežući glavnu krajnju točku;
glavna veličina je širina ili visina flex stavke, ovisno o glavnoj veličini. Svojstvo glavne veličine može se postaviti na širinu ili visinu;
križna os - poprečna os okomita na glavnu os. Njegov smjer ovisi o smjeru glavne osi.
križni početak | križni kraj - savitljive linije se pune predmetima i stavljaju u spremnik, počevši od poprečne početne strane prema poprečnoj strani;
cross size - širina ili visina flex stavke, ovisno o odabranoj dimenziji. Svojstvo može imati vrijednost širine ili visine poprečne dimenzije.

Svojstva roditeljske klase (fleksibilni spremnik)

prikaz

Ovo svojstvo definira flex kontejner: umetnuti ili blok, ovisno o postavljenoj vrijednosti. Također omogućuje flex kontekst za sve svoje izravne potomke:

Spremnik (prikaz: flex; / * ili inline-flex * /)

Imajte na umu da CSS stupci nemaju učinka u flex kontejneru.

flex-direction

Ovo svojstvo postavlja glavnu os, koja određuje smjer u kojem se flex stavke postavljaju u flex spremnik. Flexbox ( isključujući opcionalno omatanje) je koncept jednosmjernog označavanja.

Zamislite da su flex stavke primarno pozicionirane u horizontalnim ili okomitim stupcima:

Kontejner (smjer savijanja: red | red-obrnuti | stupac | stupac-obrnut;)

redak (zadano): slijeva na desno za ltr; zdesna nalijevo za rtl;
red-obrnuti: desno na lijevo za u ltr; lijevo na desno za rtl;
stupac: isto kao i redak, ali od vrha do dna;
stupac-obrnuti: isto kao i red-obrnuti, ali odozdo prema gore.

flex-wrap

Prema zadanim postavkama, flex stavke će se pokušati stisnuti u jedan redak. Ovo možete promijeniti i ovim svojstvom omotati elemente po želji. Ovdje također igra ulogu smjer u kojem se nalaze nove linije:

Spremnik (flex-wrap: nowrap | wrap | wrap-reverse;)

nowrap (zadano): jedan red / lijevo na desno za ltr; zdesna nalijevo za rtl;
omot: višelinijski / lijevo na desno za ltr; zdesna nalijevo za rtl;
wrap-reverse: višelinijski / desno na lijevo za ltr; lijevo na desno za rtl.

flex-flow (odnosi se na roditelj flex spremnika)

Ovo je skraćeni oblik svojstava flex-direction i flex-wrap, koji zajedno definiraju glavnu i križnu os flex kontejnera. Zadana vrijednost je red nowrap:

flex-flow:<‘flex-direction’> || <‘flex-wrap’>

opravdati-sadržaj

Ovo svojstvo postavlja poravnanje duž glavne osi. To pomaže u dodjeli viška slobodnog prostora kada su sve fleksibilne stavke u nizu nefleksibilne ili fleksibilne, ali su dosegle svoju maksimalnu veličinu. Također, ovo svojstvo omogućuje vam da dobijete kontrolu nad poravnavanjem elemenata kada nadiru granice linije:

Kontejner (justify-content: flex-start | flex-end | center | space-between | space-around;)

flex-start (zadano): stavke su poravnate s početkom retka;
flex-end: stavke su poravnate do kraja retka
središte: stavke su poravnate sa središtem retka;
razmak između: elementi su ravnomjerno raspoređeni u retku: prvi element se nalazi na početku retka, posljednji - na kraju;
space-around: stavke su ravnomjerno raspoređene na liniji s istim razmakom.

align-items

Ovo svojstvo određuje kako se fleksibilne stavke postavljaju prema zadanim postavkama u odnosu na poprečnu os na trenutnom retku. Može se smatrati verzijom justify-contenta s poprečnom osi ( okomito na glavnu):

Spremnik (stavke poravnanja: flex-start | flex-end | center | baseline | stretch;)

flex-start: granica poprečnih startnih stavki je na liniji križnog početka;
flex-end: granica cross-početnih stavki je na liniji križnog kraja;
centar: predmeti su centrirani na poprečnoj osi;
osnovna linija: elementi su poravnati prema osnovnoj liniji;
rastezanje (zadano): elementi se rastežu kako bi ispunili spremnik ( uzimajući u obzir vrijednosti min-width/max-width).

align-content

Ovo svojstvo omogućuje poravnavanje linija unutar flex spremnika kada postoji slobodan prostor na poprečnoj osi, slično kao što svojstvo justify-content poravnava pojedinačne stavke s glavnom osi.

Napomena: ovo svojstvo neće raditi ako postoji samo jedan red flex stavki:

flex-start: linije se nalaze na početku spremnika;
flex-end: linije se nalaze na kraju spremnika;
središte: linije su postavljene u sredini spremnika;
razmak između: redovi su ravnomjerno raspoređeni; prvi red je na početku spremnika, a posljednji je na kraju;
space-around: linije su ravnomjerno raspoređene na istoj udaljenosti jedna od druge;
rastezanje (zadano): linije se rastežu kako bi popunile preostali prostor.

Dječja svojstva

(fleksibilne stavke)

Narudžba

Prema zadanim postavkama, flex stavke su raspoređene izvornim redoslijedom. Međutim, svojstvo order kontrolira redoslijed u kojem se stavke pojavljuju u flex spremniku:

Stavka (narudžba: ; }

flex-grow

Ovo svojstvo omogućuje da flex stavka "raste" prema potrebi. Ona poprima bezdimenzionalnu vrijednost koja služi kao proporcija. Ova vrijednost određuje koliko dostupnog prostora unutar flex spremnika stavka može zauzeti.

Ako sve stavke imaju flex-grow postavljeno na 1, tada će svaka podređena stavka biti postavljena na istu veličinu unutar spremnika. Ako jedno od djece postavite na 2, tada će zauzimati dvostruko više prostora od ostalih:

Stavka (flex-grow: ; / * zadano 0 * /)

flex-skupljati

Ovo svojstvo čini da se fleksibilne stavke skupljaju prema potrebi:

Stavka (fleksibilno skupljanje: ; / * zadano 1 * /)

Negativni brojevi nisu dopušteni.

flex-basis

Ovo svojstvo određuje zadanu veličinu elemenata prije dodjeljivanja preostalog prostora:

Stavka (flex-basis: | auto; / * zadano je automatski * /)

savijati

Ovo svojstvo je skraćenica za kombinaciju flex-grow, flex-shrink i flex-basis. Drugi i treći parametar (flex-shrink i flex-basis) nisu obavezni. Zadane vrijednosti: 0 1 auto:

Stavka (fleksibilnost: nema | [<"flex-grow"> <"flex-shrink">? || <"flex-basis"> ] }

poravnati-sebe

Ovo svojstvo omogućuje vam da nadjačate zadano poravnanje ( ili definirano svojstvom align-items) za pojedinačne flex stavke.

Dostupne vrijednosti mogu se pronaći u opisu svojstva align-items:

Imajte na umu da float, clear i vertical-align ne rade s flex elementima.

Primjeri za

Počnimo s vrlo jednostavnim primjerom, rješavanjem gotovo svakodnevnog problema: savršeno centriranje. Ne može biti lakše koristiti flexbox:

Roditelj (prikaz: flex; visina: 300px; / * Ili što god * /) .child (širina: 100px; / * Ili bilo što * / visina: 100px; / * Ili što god * / margina: auto; / * Magic ! * / )

Ovaj se primjer temelji na činjenici da svojstvo margine postavljeno na auto troši dodatni prostor. Stoga, ova postavka udubljenja poravnava element točno u središtu obiju osi.

Sada upotrijebimo još nekoliko svojstava. Pretpostavimo da imamo popis od 6 elemenata, svi su fiksne veličine ( za estetiku), ali s mogućnošću automatskog punjenja.

Želimo da budu lijepi, ravnomjerno raspoređeni duž vodoravne osi tako da kada se promijeni veličina prozora preglednika, sve izgleda dobro ( bez korištenja medijskih upita):

Flex-kontejner (/ * Prvo kreirajte kontekst flex izgleda * / display: flex; / * Zatim definirajte smjer toka i želimo li da stavke budu omotane. * Zapamtite da je ovo isto kao: * flex-direction : row; * flex-wrap: wrap; * / flex-flow: row wrap; / * Sada definiramo kako dodijeliti preostali prostor * / justify-content: space-around;)

Spreman! Sve ostalo je već problem dizajna. Evo demo ovog primjera. Slijedite vezu i pokušajte promijeniti veličinu prozora da vidite što se događa:

HTML:

CSS:

Flex-kontejner (podstava: 0; margina: 0; stil popisa: nema; prikaz: -webkit-box; prikaz: -moz-box; zaslon: -ms-flexbox; prikaz: -webkit-flex; prikaz: flex; -webkit-flex-flow: premotavanje redaka; justify-content: space-around;). flex-item (pozadina: rajčica; padding: 5px; širina: 200px; visina: 150px; margin-top: 10px; visina linije: 150px; boja: bijela; težina fonta: podebljano; veličina fonta: 3em; poravnanje teksta: središte;)

Pokušajmo još jednu stvar. Recimo da imamo desno poravnat navigacijski izbornik na samom vrhu naše web stranice, ali želimo da bude centriran na zaslonima srednje veličine i jedan stupac na malim uređajima. Sve je prilično jednostavno:

CSS:

/ * Veliki zasloni * / .navigacija (prikaz: flex; flex-flow: premotavanje redaka; / * Poravnajte stavke do kraja retka duž glavne osi * / justify-content: flex-end;) / * Srednji zasloni * / @media all i (max-width: 800px) (.navigation (/ * Za srednje zaslone, centriramo elemente ravnomjerno raspodjeljujući slobodan prostor između njih * / justify-content: space-around;)) / * Mali zasloni * / @media all and (max-width: 500px) (.navigation (/ * Za male zaslone koristimo stupac, a ne redove * / flex-direction: column;))

HTML:

CSS:

Navigacija (stil liste: nema; margina: 0; pozadina: deepskyblue; zaslon: -webkit-box; zaslon: -moz-box; zaslon: -ms-flexbox; zaslon: -webkit-flex; zaslon: flex; -webkit -flex-flow: premotavanje reda; justify-content: flex-end;) .navigacija a (dekoracija teksta: nema; prikaz: blok; padding: 1em; boja: bijela;) .navigacija a: lebdenje (pozadina: zatamniti ( deepskyblue, 2%);) @media all and (max-width: 800px) (.navigation (justify-content: space-around;)) @media all and (max-width: 600px) (.navigation (-webkit- flex-flow: premotavanje stupca; flex-flow: premotavanje stupca; padding: 0;). navigacija a (poravnanje teksta: središte; padding: 10px; border-top: 1px solid rgba (255,255,255,0.3); border-bottom: 1px solid rgba (0,0,0,0.1);). Navigacija li: zadnji-od tipa a (bord-bottom: none;))

Isprobajmo to još bolje igrajući se "fleksibilnošću" flex predmeta. Što kažete na mobilni izgled s tri stupca s zaglavljem i podnožjem pune širine? I s izlazom elemenata neovisnim o redoslijedu koji je dao izvorni kod:

CSS:

Omot (prikaz: flex; flex-flow: row wrap;) / * Postavite sve stavke na 100% širine * / .header, .main, .nav, .aside, .footer (flex: 1 100%;) / * In u ovom slučaju oslanjamo se na izvornu narudžbu za ciljanje mobilnih uređaja: * 1. naslov * 2. navigacija * 3. tijelo * 4. bočna traka * 5. podnožje * / / * Srednji zasloni * / @media svi i (min -width : 600px) (/ * Obje bočne trake su na istoj liniji * / .sa strane (flex: 1 auto;)) / * Veliki zasloni * / @media all i (min-width: 800px) (/ * Okrenite redoslijed prikaza na prva bočna traka i glavno tijelo i recite glavnom elementu da zauzima najviše dvostruko više prostora od dvije bočne trake * / .main (flex: 2 0px;) .aside-1 (red: 1;) .main (red : 2;) .sa strane-2 (red: 3;) .podnožje (red: 4;))

HTML:

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Enejski ultricies mi vitae est. Mauris placerat eleifend leo.

CSS:

Omot (zaslon: -webkit-box; zaslon: -moz-box; zaslon: -ms-flexbox; zaslon: -webkit-flex; zaslon: flex; -webkit-flex-flow: premotavanje redaka; flex-flow: premotavanje redaka ; font-weight: bold; text-align: center;) .wrapper> * (padding: 10px; flex: 1 100%;) .header (pozadina: rajčica;) .footer (pozadina: svijetlozelena;) .main (tekst -align: lijevo; pozadina: deepskyblue;) .aside-1 (background: gold;) .aside-2 (background: hotpink;) @media all and (min-width: 600px) (.aside (flex: 1 auto); )) @media all i (min-width: 800px) (.main (flex: 2 0px;) .aside-1 (red: 1;) .main (red: 2;) .aside-2 (red: 3; ) .podnožje (red: 4;))

Korištenje flexbox prefiksa

Flexbox zahtijeva da većina preglednika podržava prefikse dobavljača. To uključuje ne samo korištenje prefiksa dobavljača prije svojstava, već i potpuno različite nazive i vrijednosti svojstava.

To je zato što se specifikacija flexboxa razvijala tijekom vremena, stvarajući "stare", "tweener" i "nove" verzije.

Možda je najbolji izlaz iz ove situacije pisanje koda koristeći novu (i konačnu) sintaksu i pokretanje CSS-a kroz Autoprefixer, koji vrlo dobro obrađuje vraćanja.

Alternativno, ispod je Sass metoda @mixin za pomoć s nekim prefiksima, koja također daje ideju o tome što treba poduzeti:

SCSS:

@mixin flexbox () (prikaz: -webkit-box; zaslon: -moz-box; zaslon: -ms-flexbox; zaslon: -webkit-flex; zaslon: flex;) @mixin flex (vrijednosti $) (-webkit- box-flex: $ vrijednosti; -moz-box-flex: $ vrijednosti; -webkit-flex: $ vrijednosti; -ms-flex: $ vrijednosti; flex: $ vrijednosti;) @mixin red ($ val) (-webkit- box-ordinal-group: $ val; -moz-box-ordinal-group: $ val; -ms-flex-order: $ val; -webkit-order: $ val; red: $ val;) .wrapper (@include flexbox ();) .item (@include flex (1 200px); @include order (2);)

Podrška za preglednik

Podijeljeno po flexbox "verzijama" na:

(novo) - znači podršku za najnoviju sintaksu iz specifikacije (na primjer, zaslon: flex;
Pseudoelement boje rezerviranog mjesta :: (ili u nekim slučajevima pseudo-klasa) omogućuje vam da odredite sadržaj teksta elementa obrasca. Postavlja se pomoću atributa rezerviranog mjesta: .

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. Pomoću Flexbox možete jednostavno poravnati elemente vodoravno i okomito, promijeniti smjer i redoslijed elemenata, rastegnuti blokove do pune visine nadređenog ili ih pribiti na donji rub.

UPD od 02.02.2017: napravio praktičan flexbox cheat sheet, s demo uživo i opisima iz specifikacije: Flexbox cheatsheet.

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

Prema caniuse.com, Flexbox nije podržan od strane IE 8 i 9 i Opera Mini, a nisu sva svojstva i/ili prefiksi potrebna u drugim preglednicima.

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

Prvo, morate znati da su flex stavke postavljene duž osi. Prema zadanim postavkama, stavke su poredane vodoravno - uzduž glavna os- glavna os.

Također treba imati na umu da prilikom korištenja Flexbox float, clear i vertical-align ne rade za unutarnje blokove, kao ni svojstva koja postavljaju stupce u tekstu.

Pripremimo poligon za eksperimente:

Jedan roditeljski blok (žuti) i 5 djece.

Zaslon: flex

A sada dodajte display: flex roditeljskom elementu; ... Unutarnji divovi su poredani (duž glavne osi) u stupce iste visine, bez obzira na sadržaj.

zaslon: flex; čini svu djecu fleksibilnom - fleksibilnom, a ne inline ili blokovnom kao što su izvorno bila.

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

Prikaži svojstvo za Flexbox može imati dvije vrijednosti:

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

inline-flex - ponaša se kao inline-block. Prioritet sadržaja (sadržaj proširuje blokove na potrebnu širinu kako bi se linije što više uklapale).

Flex-smjer

Smjer rasporeda kutija kontrolira svojstvo flex-direction.

Moguće vrijednosti:

red - red (zadana vrijednost); row-reverse - red s elementima obrnutim redoslijedom; stupac - stupac; stupac-reverse - stupac s elementima obrnutim redoslijedom.

red i red-obrnuti

stupac i stupac-revers

Flex-wrap

Na jednoj liniji može biti mnogo blokova. Hoće li se omotati ili ne, određeno je svojstvom flex-wrap.

Moguće vrijednosti:

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

Da biste ukratko napisali 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: stupac; flex-flow: wrap-reverse; flex-flow: stupac-reverse wrap;

Demo za row-reverse wrap-reverse:

Narudžba

Svojstvo order koristi se za kontrolu redoslijeda blokova.

Moguće vrijednosti: brojevi. Da biste blok stavili na prvo mjesto, postavite mu redoslijed: -1:

Opravdajte-sadržaj

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

justify-content i align-items primjenjuju se na roditeljski spremnik, align-self na djecu.

justify-content je odgovoran za poravnavanje s glavnom osi.

Moguće vrijednosti za justify-content:

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

flex-start i flex-end

prostor-između, prostor-okolo

Poravnajte stavke

align-items je odgovoran za okomito poravnanje osi.

Moguće vrijednosti za stavke poravnanja:

flex-start - stavke su poravnate od početka okomite osi; flex-end - stavke su poravnate s kraja okomite osi; centar - stavke su centrirane; osnovna linija - elementi su poravnati s baznom linijom; stretch - Elementi su rastegnuti kako bi ispunili sav prostor duž okomite osi (zadano).

flex-start, flex-end

osnovna linija, rastezanje

Poravnaj-sebe

align-self je također odgovoran za okomito poravnanje osi, ali je postavljen na pojedinačne flex stavke.

Moguće vrijednosti align-self:

auto je zadana postavka. Znači da element koristi align-itemove roditeljskog elementa; flex-start - stavka je poravnata od početka okomite osi; flex-end - predmet je poravnat s kraja okomite osi; centar - element je centriran; osnovna linija - element je poravnat s osnovnom linijom; stretch - Element se rasteže kako bi ispunio cijelu visinu.

Poravnaj-sadržaj

Za kontrolu poravnanja unutar višerednog flex spremnika postoji svojstvo align-content.

Moguće vrijednosti:

flex-start - stavke su poravnate od početka glavne osi; flex-end - stavke su poravnate s kraja glavne osi; centar - stavke su poravnate sa središtem glavne osi; prostor između - elementi su poravnati duž glavne osi, dijeleći slobodan prostor među sobom; prostor oko - elementi su poravnati duž glavne osi, raspoređujući slobodan prostor oko njih; stretch - Elementi se rastežu kako bi ispunili cijelu svoju visinu (zadano).

flex-start, flex-end

središte, rastezanje

prostor-između, prostor-okolo

P.s: Neke stvari nisam uspio vidjeti u akciji, na primjer, liniju flex-flow: column wrap ili kompletan zapis istog flex-direction: column; flex-wrap: omotati; ...

Elementi su složeni, ali se ne nose:

Wrap se ne aktivira kada flex-direction: column; , iako u specifikaciji izgleda ovako:

Mislim da će s vremenom uspjeti.

UPD od 21.06.2014. sve radi ako bloku date visinu. Hvala na savjetu

Modul Flexbox Layout (Fleksibilna kutija) ima za cilj pružiti učinkovitiji način pozicioniranja, poravnanja i raspodjele slobodnog prostora između stavki u spremniku, čak i kada je njihova veličina nepoznata i/ili dinamična (otuda riječ "flex").

Osnovna ideja fleksibilnih izgleda je dati kontejneru mogućnost promjene širine/visine (i redoslijeda) svojih stavki kako bi najbolje ispunio raspoloživi prostor (uglavnom da stane na sve vrste i veličine zaslona). Flexbox spremnik proširuje stavke kako bi ispunio slobodan prostor ili ih skuplja kako bi se izbjeglo prelijevanje.

Ono što je najvažnije, Flexbox je usmjeren agnostik, za razliku od konvencionalnih izgleda (kutije temeljene na vertikalnom pozicioniranju i inline elementi temeljeni na horizontalnom pozicioniranju). Iako rade dovoljno dobro, nedostaje im fleksibilnost za podršku velikih ili složenih aplikacija (osobito kada je u pitanju preusmjeravanje, promjena veličine, rastezanje, skupljanje itd.).

Bilješka. Flexbox je prikladniji za komponente aplikacije i male rasporede, dok je CSS Grid za veće rasporede.

Osnove i terminologija

Budući da je Flexbox cijeli modul, a ne zasebno svojstvo, sadrži mnogo različitih stvari, uključujući čitav niz svojstava. Neki su dizajnirani da budu postavljeni na njihov spremnik (roditelj, poznat kao "fleksibilni spremnik"), dok su drugi namijenjeni za postavljanje djece (poznati kao "fleksibilne stavke").

Dok se konvencionalni sustav rasporeda temelji na kutijama i inline smjerovima, Flexbox se temelji na "smjerovima flex-flow". Molimo pogledajte ovu sliku iz specifikacije kako biste objasnili osnovnu ideju iza Flexboxa.

U osnovi, elementi će biti smješteni duž glavna os(od glavnog početka do glavnog kraja) ili poprečna os(od križnog početka do križnog kraja).

Podrška za preglednik

CSS fleksibilni modul izgleda kutije

Chrome za Android

Preglednik Blackberry, počevši od verzije 10, podržava novu sintaksu.

Svojstva za spremnik

Svojstva za elemente

Svojstva za roditelj (fleksibilni spremnik)

prikaz

Definira flex kontejner; niz ili blok ovisi o proslijeđenoj vrijednosti. Uključuje fleksibilni kontekst za svu svoju izravnu djecu.

Spremnik (prikaz: flex; / * ili inline-flex * /)

Imajte na umu da CSS stupci ne utječu na flex spremnik.

flex-direction

Postavlja glavnu os, na taj način određuje smjer elemenata koji se nalaze u spremniku. Flexbox (osim opcionalnog omota) je koncept jednosmjernog izgleda. Zamislite fleksibilne stavke prvenstveno kao horizontalne redove ili okomite stupce.

Kontejner (smjer savijanja: red | red-obrnuti | stupac | stupac-obrnut;)

redak (zadano)- s lijeva na desno u ltr; s desna na lijevo u rtl;
red-obrnuti- s desna na lijevo u ltr; s lijeva na desno u rtl;
stupac- isto kao i red, samo odozgo prema dolje;
stupac-revers- isto što i red-obrnuti, samo odozdo prema gore;

flex-wrap

Prema zadanim postavkama, stavke će pokušati ispuniti samo jedan redak. Možete promijeniti ovo ponašanje i dopustiti elementima da se prelože u sljedeći redak, ako je potrebno.

Spremnik (flex-wrap: nowrap | wrap | wrap-reverse;)

Nowrap (zadano)- sve flex stavke bit će smještene na jednom redu;
zamotati- flex stavke bit će raspoređene u više redaka, od vrha do dna;
zamotati-obrnuti- flex stavke bit će raspoređene u više redaka, odozdo prema gore;

opravdati-sadržaj

Određuje poravnanje duž glavne osi. To pomaže u raspodjeli slobodnog prostora koji je ostao nakon što sve fiksne i nefiksne flex stavke dostignu svoju maksimalnu veličinu. Također vam pomaže zadržati određenu kontrolu nad poravnavanjem elemenata kada prelivaju liniju.

Kontejner (justify-content: flex-start | flex-end | center | space-between | space-around;)

flex-start (zadano)- elementi su pritisnuti na početak reda;
flex-end- elementi su pritisnuti do kraja linije;
centar- stavke su centrirane duž linije;
prostor-između- elementi su postavljeni ravnomjerno na liniji; prvi element je na početku retka, zadnji element je na kraju reda;
prostor-okolo- elementi su postavljeni ravnomjerno na liniji s istim prostorom oko njih. Imajte na umu da vizualno prostor nije isti jer svi elementi imaju isti prostor s obje strane. Prvi element će imati jednu jedinicu prostora na bočnoj strani spremnika, ali dvije jedinice između njega i sljedećeg elementa, jer sljedeći element također ima jednu jedinicu s obje strane.

align-items

Ovo svojstvo određuje kako se fleksibilne stavke ponašaju duž poprečne osi na trenutnoj liniji. Razmislite o tome kao o, samo za poprečnu os (okomito na glavnu os).

Spremnik (stavke poravnanja: flex-start | flex-end | center | baseline | stretch;)

flex-start - elementi se postavljaju na početku poprečne osi;
savitljivi kraj - elementi se postavljaju na kraju poprečne osi;
centar - elementi se nalaze u središtu poprečne osi;
Osnovna linija- elementi su poravnati s baznom linijom;
rastezanje (zadano)- rastegnite se da ispunite cijeli spremnik (i dalje poštujete minimalnu/maksimalnu širinu);

align-content

Bilješka. Ovo svojstvo nema učinka kada postoji samo jedan red flex stavki.

flex-start- linije se nalaze na početku kontejnera;
flex-end- linije se nalaze na kraju kontejnera;
centar- linije se postavljaju u središte spremnika;
prostor-između- redovi su raspoređeni ravnomjerno, prvi red je na početku spremnika, a zadnji red na kraju;
prostor-okolo- linije su raspoređene ravnomjerno, s istom udaljenosti između njih;
rastezanje (zadano)- linije se protežu cijelom širinom kako bi zauzele preostali prostor;

Nekretnine za djecu (fleksibilne stvari)

narudžba

Prema zadanim postavkama, svi elementi su raspoređeni u izvornom redoslijedu. Međutim, svojstvo reda kontrolira redoslijed u kojem su elementi raspoređeni unutar spremnika.

Stavka (narudžba: ; }

flex-grow

Svojstvo određuje sposobnost elementa da raste u veličini, ako je potrebno. Uzima vrijednost bez jedinica kao omjer, koji određuje koliko slobodnog prostora unutar spremnika element treba zauzeti.

Ako sve stavke imaju flex-grow postavljeno na 1, tada će slobodni prostor unutar spremnika biti ravnomjerno raspoređen na sve stavke. Ako jedan od elemenata ima vrijednost 2, tada će element zauzimati dvostruko više prostora od ostalih (barem će pokušati).

Stavka (flex-grow: ; / * zadano 0 * /)

Negativni brojevi se ne mogu specificirati.

flex-basis

Određuje zadanu veličinu elementa, prije nego što se dodijeli preostali prostor. Može biti duljina (20%, 5rem, itd.) ili ključna riječ. Ključna riječ auto znači "izgledaj kao moje svojstvo širine ili visine". Ključna riječ sadržaja znači "veličina se temelji na sadržaju elementa" - ova ključna riječ još nije dobro podržana, tako da ju je teško testirati, a još teže znati koji su njeni braća i sestre min-content, max-content i fit-content rade.

Stavka (flex-basis: | auto; / * zadani automatski * /)

Ako je postavljeno na 0, dodatni prostor oko sadržaja neće se računati. Ako je postavljeno na automatski, dodatni prostor će se dodijeliti na temelju vrijednosti.

savijati

Ovo je skraćenica za, i. Drugi i treći parametar (flex-shrink i flex-basis) nisu obavezni. Zadana vrijednost je 0 1 auto.

Stavka (fleksibilnost: nema | [<"flex-grow"> <"flex-shrink">? || <"flex-basis"> ] }

poravnati-sebe

Ovo svojstvo omogućuje vam da nadjačate zadano (ili skup svojstava) poravnanje za pojedinačne flex stavke.

Pogledajte objašnjenje svojstva kako biste razumjeli dostupne vrijednosti.

Imajte na umu da float, clear i vertical-align nemaju utjecaja na flex stavku.

Primjeri za

Počnimo s najjednostavnijim primjerom koji rješava problem koji se javlja gotovo svaki dan: savršeno centriranje. Ne može biti lakše ako koristite Flexbox.

Roditelj (zaslon: flex; visina: 300px;) .dijete (širina: 100px; visina: 100px; margina: auto;)

Ovisi o automatskoj margini flex kontejnera koja apsorbira dodatni prostor. Dakle, postavljanje vertikalne margine na auto na elementu učinit će element savršeno centriranim na obje osi.

Sada upotrijebimo još nekoliko svojstava. Razmotrite popis od 6 elemenata, svi su estetski fiksirani, ali mogu biti automatski. Želimo da budu ravnomjerno raspoređeni duž vodoravne osi i da budu u redu kada se mijenja veličina preglednika (bez medijskih upita!).

Flex-kontejner (prikaz: flex; flex-flow: premotavanje reda; justify-content: space-around;)

Spreman! Sve ostalo je samo nekoliko problema dizajna. Ispod je primjer CodePena, svakako idite tamo i pokušajte promijeniti veličinu prozora da vidite što se događa.

Pokušajmo nešto drugo. Zamislite da imamo desno poravnanu navigaciju na samom vrhu zaslona, ali želimo da bude usredotočena na srednje velike zaslone i jedan stupac na male zaslone. Lako kao pita.

Navigacija (display: flex; flex-flow: row wrap; justify-content: flex-end;) @media all and (max-width: 800px) (.navigation (justify-content: space-around;)) @media all i (max-width: 500px) (.navigation (flex-direction: column;))

Pokušajmo učiniti nešto još bolje igrajući se fleksibilnošću naših fleksibilnih predmeta! Što kažete na izgled s tri stupca na prvom mjestu na mobilnim uređajima sa zaglavljem i podnožjem pune širine, a ne ovisno o izvornom redoslijedu elemenata.

Omot (prikaz: flex; flex-flow: row wrap;) .header, .main, .nav, .aside, .footer (flex: 1 100%;) @media all i (min-width: 600px) (.aside (flex: 1 auto;)) @media all i (min-width: 800px) (.main (flex: 2 0px;) .aside-1 (red: 1;) .main (red: 2;) .aside- 2 (red: 3;) .podnožje (red: 4;))

Povezana svojstva

Pogreške

Flexbox sigurno nije bez grešaka. Najbolja zbirka koju sam vidio dolazi od Philipa Waltona i Grega Whitwortha Flexbugs.Ovo je mjesto otvorenog koda za praćenje svih bugova, pa mislim da je najbolje samo objaviti vezu.

CSS flexbox (Modul fleksibilnog izgleda kutije)- modul rasporeda fleksibilnog kontejnera - je način raspoređivanja elemenata, zasnovan na ideji osi.

Flexbox se sastoji od flex kontejner i flex stavke... Flex stavke mogu se poredati u red ili stupac, a preostali slobodni prostor raspoređuje se između njih na različite načine.

Flexbox modul omogućuje vam da izvršite sljedeće zadatke:

Rasporedite predmete u jednom od četiri smjera: s lijeva na desno, zdesna nalijevo, odozgo prema dolje ili odozdo prema vrhu.
Nadjačajte redoslijed prikaza stavki.
Automatski promijenite veličinu elemenata kako bi se uklopili u raspoloživi prostor.
Riješite problem s horizontalnim i okomitim centriranjem.
Zamotajte predmete unutar spremnika bez prelijevanja.
Napravite stupce jednake visine.
Izrada prikvačena na dno stranice.

Flexbox rješava specifične potrebe stvaranja jednodimenzionalnih izgleda, kao što je navigacijska traka, budući da se flex stavke mogu rasporediti samo duž jedne osi.

Za popis aktualnih problema s modulima i rješenja za više preglednika, pogledajte članak Philipa Waltona.

Što je flexbox

Podrška za preglednik

IE: 11,0, 10,0 -ms-
Firefox: 28,0, 18,0 -moz-
Krom: 29.0, 21.0 -webkit-
Safari: 6.1 -webkit-
Opera: 12.1 -webkit-
iOS Safari: 7.0 -webkit-
Opera Mini: 8
Android preglednik: 4.4, 4.1 -webkit-
Chrome za Android: 44

1. Osnovni pojmovi

Riža. 1. Flexbox model

Za opisivanje Flexbox modula koristi se određeni skup pojmova. Vrijednost flex-flow i način pisanja definiraju kako ovi pojmovi odgovaraju fizičkim smjerovima: gore / desno / dolje / lijevo, osi: okomito / vodoravno i dimenzije: širina / visina.

Glavna os- os duž koje su fleksibilne stavke položene. Proteže se u glavnoj dimenziji.

Glavni početak i glavni kraj- linije koje definiraju početnu i završnu stranu flex spremnika, u odnosu na koje su fleksibilne stavke položene (počevši od glavnog početka prema glavnom kraju).

Glavna veličina) - Širina ili visina fleksibilnog spremnika ili flex stavki, ovisno o tome što je u osnovnoj dimenziji, određuje osnovnu veličinu fleksibilnog spremnika ili flex stavke.

Križna os- os okomita na glavnu os. Proteže se bočno.

Križni početak i križni kraj- Linije koje definiraju početnu i krajnju stranu poprečne osi oko koje se postavljaju flex stavke.

Križna veličina- širina ili visina fleksibilnog spremnika ili fleksibilnih predmeta, ovisno o tome što je u poprečnoj dimenziji, njihova je poprečna dimenzija.

Riža. 2. Način rada redaka i stupca

2. Flex kontejner

Flex spremnik postavlja novi fleksibilni kontekst oblikovanja za svoj sadržaj. Flex kontejner nije blok kontejner, tako da CSS svojstva kao što su float, clear, vertical-align ne rade za podređene elemente. Također, na flex kontejner ne utječu svojstva stupca- *, koja stvaraju stupce u tekstu i pseudoelementi :: prvog reda i :: prvog slova.

Model izgleda flexboxa povezan je s određenom vrijednošću u svojstvu prikaza CSS roditeljskog html elementa koji sadrži podređene kutije. Za upravljanje elementima pomoću ovog modela, morate postaviti svojstvo prikaza na sljedeći način:

Flex-spremnik (/ * generira flex kontejner na razini bloka * / display: -webkit-flex; display: flex;). Flex-container (/ * generira flex kontejner na razini reda * / display: -webkit-inline- flex; prikaz: inline-flex;)

Nakon postavljanja ovih vrijednosti svojstava, svako dijete automatski postaje fleksibilna stavka, poredajući se u jedan red (duž glavne osi). Međutim, blok i inline djeca se ponašaju isto, t.j. širina blokova jednaka je širini njihovog sadržaja, uzimajući u obzir padding i granice elementa.

Riža. 3. Poravnavanje stavki u flexbox modelu

Ako roditeljski blok sadrži tekst ili slike bez omota, oni postaju anonimne flex stavke. Tekst se poravnava s gornjim rubom bloka spremnika, a visina slike postaje jednaka visini bloka, tj. deformira se.

3. Flex stavke

Flex stavke su blokovi koji predstavljaju sadržaj flex spremnika u toku. Flex spremnik postavlja novi kontekst oblikovanja za svoj sadržaj koji pruža sljedeće značajke:

Za flex stavke, njihova vrijednost svojstva prikaza je zaključana. Prikaz vrijednosti: inline-block; i prikaz: tablica-ćelija; evaluirano na zaslonu: blok; ...
Razmak između stavki nestaje: ne postaje vlastita flex stavka, čak i ako je tekst između stavki umotan u anonimnu flex stavku. Sadržaj anonimne flex stavke ne može se oblikovati samostalno, ali će ih naslijediti (kao što su postavke fonta) iz flex spremnika.
Apsolutno pozicionirana flex stavka ne sudjeluje u izgledu flex izgleda.
Polja margina susjednih flex stavki se ne skupljaju.
Postoci margine i dopuna izračunavaju se iz unutarnje veličine bloka koji sadrži.
margina: auto; proširiti, upijajući dodatni prostor u odgovarajućoj dimenziji. Mogu se koristiti za poravnavanje ili proširenje susjednih flex stavki.
Zadana automatska minimalna veličina za flex stavke je minimalna veličina njenog sadržaja, odnosno min-width: auto; ... Za spremnike s pomicanjem, automatska minimalna veličina obično je nula.

4. Prikaz redoslijeda fleksibilnih stavki i orijentacije

Sadržaj flex spremnika može se rasporediti u bilo kojem smjeru i bilo kojim redoslijedom (promjena redoslijeda flex stavki unutar spremnika utječe samo na vizualno renderiranje).

4.1. Smjer glavne osi: flex-direction

Svojstvo je specifično za flex kontejner. Upravlja smjerom glavne osi duž koje se fleksibilne stavke slažu u skladu s trenutnim načinom pisanja. Nije naslijeđena.

flex-direction
vrijednosti:
red	Zadana vrijednost je slijeva nadesno (u rtl-u, zdesna nalijevo). Flex stavke su položene na liniju. Smjer glavnog početka i glavnog kraja glavne osi odgovaraju inline-početku i inline-kraju inline-osi.
red-obrnuti	Smjer s desna na lijevo (u rtl s lijeva na desno). Flex stavke su položene u liniji u odnosu na desni rub spremnika (u rtl - lijevo).
stupac	Smjer od vrha do dna. Flex stavke su raspoređene u stupcu.
stupac-revers	Stupac s elementima obrnutim redoslijedom, odozdo prema gore.
početni
naslijediti

Riža. 4. Svojstvo flex-direction za jezike s lijeva na desno

Sintaksa

Flex-kontejner (prikaz: -webkit-flex; -webkit-flex-direction: row-reverse; display: flex; flex-direction: row-reverse;)

4.2. Kontroliranje višestrukog reda flex spremnika: flex-wrap

Svojstvo određuje hoće li flex spremnik biti jednoredni ili višeredni, a također postavlja smjer poprečne osi, koji određuje smjer u kojem se slažu nove linije flex spremnika.

Prema zadanim postavkama, flex stavke su naslagane u jednom retku, duž glavne osi. Ako se preliju, izaći će izvan graničnog okvira flex spremnika. Imovina se ne nasljeđuje.

Riža. 5. Kontroliranje više redaka sa svojstvom Flex-Wrap za LTR jezike

Sintaksa

Flex-kontejner (zaslon: -webkit-flex; -webkit-flex-wrap: omotati; zaslon: flex; flex-wrap: omotati;)

4.3. Skraćenica za smjer i više linija: flex-flow

Svojstvo vam omogućuje da definirate smjerove glavne i križne osi, kao i mogućnost premotavanja flex stavki u više redaka, ako je potrebno. To je skraćenica za svojstva flex-direction i flex-wrap. Zadani flex-flow: red nowrap; ... imovina se ne nasljeđuje.

Sintaksa

Flex-kontejner (prikaz: -webkit-flex; -webkit-flex-flow: premotavanje reda; prikaz: flex; flex-flow: premotavanje reda;)

4.4. Prikaz redoslijeda flex stavki: red

Svojstvo određuje redoslijed kojim se flex stavke prikazuju i postavljaju unutar flex spremnika. Odnosi se na flex stavke. Imovina se ne nasljeđuje.

U početku, sve flex stavke imaju redoslijed: 0; ... Ako za element navedete vrijednost između -1, on se pomiče na početak vremenske trake, a vrijednost 1 na kraj. Ako više flex stavki ima istu vrijednost narudžbe, bit će prikazane prema izvornom redoslijedu.

Sintaksa

Flex-container (prikaz: -webkit-flex; zaslon: flex;) .flex-item (-webkit-order: 1; red: 1;)
Riža. 6. Prikaz redoslijeda flex stavki

5. Fleksibilnost fleksibilnih predmeta

Definirajući aspekt fleksibilnog izgleda je mogućnost "preklapanja" fleksibilnih stavki promjenom njihove širine/visine (ovisno o tome koja je veličina na glavnoj osi) kako bi se ispunio raspoloživi prostor u osnovnoj dimenziji. To se radi pomoću svojstva flex. Flex kontejner dodjeljuje slobodan prostor između svojih djece (razmjerno njihovom omjeru savijanja i rasta) kako bi ispunio spremnik ili ih skuplja (razmjerno njihovom omjeru savijanja i skupljanja) kako bi spriječio prelijevanje.

Flex stavka će biti potpuno nefleksibilna ako su njezine vrijednosti flex-grow i flex-shrink jednake nuli, a flex u suprotnom.

5.1. Fleksibilno dimenzioniranje s jednim svojstvom: flex

Svojstvo je skraćenica za svojstva flex-grow, flex-shrink i flex-basis. Zadana vrijednost: flex: 0 1 auto; ... Možete odrediti jednu ili sve tri vrijednosti svojstva. Imovina se ne nasljeđuje.

Sintaksa

Flex-kontejner (prikaz: -webkit-flex; zaslon: flex;) .flex-item (-webkit-flex: 3 1 100px; -ms-flex: 3 1 100px; flex: 3 1 100px;)

5.2. Stopa rasta: flex-grow

Svojstvo kontrolira koliko će jedna flex stavka rasti u odnosu na druge flex stavke u flex spremniku pri dodjeljivanju pozitivnog bijelog prostora. Ako je zbroj vrijednosti flex-grow fleksibilnih stavki u retku manji od 1, one zauzimaju manje od 100% slobodnog prostora. Imovina se ne nasljeđuje.

Riža. 7. Upravljanje slobodnim prostorom na navigacijskoj traci pomoću flex-grow

Sintaksa

Flex-kontejner (prikaz: -webkit-flex; zaslon: flex;). Flex-item (-webkit-flex-grow: 3; flex-grow: 3;)

5.3. Omjer skupljanja: fleksibilno skupljanje

Svojstvo određuje koliko će se flex stavka smanjiti u odnosu na druge flex stavke prilikom dodjele negativnog bijelog prostora. Pomnoženo s veličinom baze flex-basis. Negativni prostor dodjeljuje se proporcionalno tome koliko se stavka može smanjiti, tako da se, na primjer, mala flex stavka neće smanjiti na nulu sve dok se veća flex stavka vidljivo ne smanji. Imovina se ne nasljeđuje.

Riža. 8. Sužavanje flex stavki u nizu

Sintaksa

Flex-kontejner (zaslon: -webkit-flex; zaslon: flex;). Flex-item (-webkit-flex-shrink: 3; flex-shrink: 3;)

5.4. Veličina baze: flex-basis

Svojstvo postavlja početnu osnovnu veličinu flex stavke prije nego što se dodijeli slobodan prostor prema omjerima flex. Za sve vrijednosti osim auto i sadržaja, osnovna flex veličina definirana je na isti način kao i širina u horizontalnim načinima pisanja. Postoci su u odnosu na veličinu flex spremnika, a ako veličina nije navedena, vrijednost koja se koristi za flex-basis je veličina njegovog sadržaja. Nije naslijeđena.

Sintaksa

Flex-kontejner (prikaz: -webkit-flex; zaslon: flex;). Flex-item (-webkit-flex-basis: 100px; flex-basis: 100px;)

6. Poravnanje

6.1. Poravnanje glavne osi: justify-content

Svojstvo poravnava flex stavke prema glavnoj osi flex spremnika distribucijom slobodnog prostora koji nije zauzet flex stavkama. Kada se stavka pretvori u fleksibilni spremnik, flex stavke se grupiraju zajedno prema zadanim postavkama (osim ako za njih nije postavljena margina). Razmak se dodaje nakon izračunavanja vrijednosti margine i flex-grow. Ako neke stavke imaju nenulti flex-grow ili margin: auto; , vlasništvo neće imati učinka. Imovina se ne nasljeđuje.


vrijednosti:
flex-start	Zadana vrijednost. Flex stavke su položene u smjeru dalje od početne linije flex spremnika.
flex-end	Flex stavke su položene u smjeru od krajnje linije flex spremnika.
centar	Flex stavke su poravnate sa središtem flex spremnika.
prostor-između	Flex stavke ravnomjerno su raspoređene duž linije. Prva fleksibilna stavka postavljena je u ravnini s rubom početne linije, posljednja savitljiva stavka je u ravnini s rubom završne linije, a ostale flex stavke na liniji su razmaknute tako da razmak između bilo koje dvije susjedne stavke je isti. Ako je preostali razmak negativan ili ako postoji samo jedna flex stavka po retku, ova vrijednost je identična parametru flex-start.
prostor-okolo	Flex stavke na liniji su razmaknute tako da je udaljenost između bilo koje dvije susjedne flex stavke jednaka, a udaljenost između prve/zadnje flex stavke i rubova flex spremnika je polovica udaljenosti između flex stavki.
početni	Postavlja vrijednost svojstva na zadanu vrijednost.
naslijediti	Nasljeđuje vrijednost svojstva od nadređenog elementa.

Riža. 9. Poravnavanje stavki i dodjela slobodnog prostora pomoću svojstva Justify-Content

Sintaksa

Flex-spremnik (prikaz: -webkit-flex; -webkit-justify-content: flex-start; zaslon: flex; justify-content: flex-start;)

6.2. Poravnanje preko osi: align-items i align-self

Flex stavke mogu se poravnati s poprečnom osi trenutnog retka flex spremnika. align-items postavlja poravnanje za sve stavke flex spremnika, uključujući anonimne flex stavke. align-self omogućuje vam da nadjačate ovo poravnanje za pojedinačne flex stavke. Ako je bilo koja od poprečnih margina flex stavke automatska, align-self nema učinka.

6.2.1. Poravnajte stavke

Poravnava flex stavke, uključujući anonimne flex stavke, duž poprečne osi. Nije naslijeđena.


vrijednosti:
flex-start
flex-end
centar
Osnovna linija	Polazne linije svih flex stavki uključenih u poravnanje su iste.
rastegnuti
početni	Postavlja vrijednost svojstva na zadanu vrijednost.
naslijediti	Nasljeđuje vrijednost svojstva od nadređenog elementa.

Riža. 10. Poravnajte predmete u spremniku okomito

Sintaksa

Flex-kontejner (prikaz: -webkit-flex; -webkit-align-items: flex-start; zaslon: flex; align-items: flex-start;)

6.2.2. Poravnaj-sebe

Svojstvo je odgovorno za poravnavanje jedne flex stavke s visinom flex spremnika. Nadjačava poravnanje navedeno u align-items. Nije naslijeđena.


vrijednosti:
auto	Zadana vrijednost. Flex stavka koristi poravnanje navedeno u svojstvu align-items flex spremnika.
flex-start	Gornji rub flex stavke postavljen je u ravnini s flex linijom (ili razmakom, s obzirom na navedenu marginu i obrub elementa) koja prolazi kroz ishodište poprečne osi.
flex-end	Donji rub flex stavke postavljen je u ravnini s linijom savijanja (ili razmakom, s obzirom na navedenu marginu i obrub elementa) koja prolazi kroz kraj poprečne osi.
centar	Margine flex stavke su centrirane na poprečnoj osi unutar fleksibilne linije.
Osnovna linija	Flex stavka je poravnata s osnovnom linijom.
rastegnuti	Ako je križna veličina flex stavke automatska i nijedna od poprečnih margina nije automatska, stavka se rasteže. Zadana vrijednost.
početni	Postavlja vrijednost svojstva na zadanu vrijednost.
naslijediti	Nasljeđuje vrijednost svojstva od nadređenog elementa.

Riža. 11. Poravnajte pojedinačne flex stavke

Sintaksa

Flex-kontejner (prikaz: -webkit-flex; zaslon: flex;). Flex-item (-webkit-align-self: centar; align-self: centar;)

6.3. Poravnavanje redaka flex spremnika: align-content

Svojstvo poravnava retke u fleksibilnom spremniku kada postoji dodatni prostor na poprečnoj osi, slično poravnavanju pojedinačnih stavki na glavnoj osi pomoću svojstva justify-content. Svojstvo nema utjecaja na jednoslojni flex kontejner. Nije naslijeđena.


vrijednosti:
flex-start	Linije su naslagane prema početku flex kontejnera. Rub prvog retka postavljen je blizu ruba flex kontejnera, svaki sljedeći red je postavljen blizu prethodnog retka.
flex-end	Linije su naslagane prema kraju flex kontejnera. Rub posljednjeg retka postavljen je blizu ruba flex kontejnera, svaki prethodni redak je smješten blizu sljedećeg retka.
centar	Linije su naslagane prema sredini flex spremnika. Redovi su blizu jedan drugome i poravnati sa središtem flex spremnika s jednakim razmakom između početnog ruba sadržaja flex spremnika i prvog retka, te između završnog ruba sadržaja flex spremnika i posljednjeg retka.
prostor-između	Redovi su ravnomjerno raspoređeni u flex kontejneru. Ako je preostali slobodni prostor negativan ili postoji samo jedna flex linija u flex spremniku, ova vrijednost je identična flex-start. Inače, rub prvog retka postavljen je blizu početnog ruba sadržaja flex spremnika, a rub posljednjeg retka smješten je blizu zadnjeg ruba sadržaja flex spremnika. Ostale linije su raspoređene tako da je udaljenost između bilo koje dvije susjedne linije jednaka.
prostor-okolo	Linije su ravnomjerno raspoređene u flex kontejneru s pola prostora na oba kraja. Ako je preostali slobodni prostor negativan, ova vrijednost je identična centru centa. Inače, redovi su razmaknuti tako da je razmak između bilo koja dva susjedna reda isti, a razmak između prvih/zadnjih redaka i rubova sadržaja flex spremnika je polovica razmaka između redaka.
rastegnuti	Zadana vrijednost. Redovi fleksibilnih predmeta ravnomjerno se protežu kako bi ispunili sav raspoloživi prostor. Ako je preostali slobodni prostor negativan, ova vrijednost je identična flex-start. Inače će se slobodni prostor podijeliti jednako između svih linija, povećavajući njihovu bočnu veličinu.
početni	Postavlja vrijednost svojstva na zadanu vrijednost.
naslijediti	Nasljeđuje vrijednost svojstva od nadređenog elementa.

Riža. 12. Višelinijsko poravnanje flex stavki

Sintaksa

Flex-kontejner (prikaz: -webkit-flex; -webkit-flex-flow: premotavanje reda; -webkit-align-content: flex-end; zaslon: flex; flex-flow: premotavanje reda; align-content: flex-end ; visina: 100px;)

Jedan od razloga zašto je flexbox brzo zainteresirao web programere je taj što je po prvi put donio odgovarajuće mogućnosti poravnanja na web. Omogućio je pravilno vertikalno poravnanje, tako da konačno možemo lako centrirati kutiju. U ovom vodiču ćemo detaljno pogledati kako svojstva poravnanja i poravnanja funkcioniraju u Flexboxu.

Za centriranje našeg okvira koristimo svojstvo align-items da poravnamo našu stavku na poprečnoj osi, što je u ovom slučaju os bloka koja ide okomito. Koristimo justify-content za poravnanje stavke na glavnoj osi, koja u ovom slučaju inline os ide vodoravno.

U nastavku možete pogledati kod ovog primjera. Promijenite veličinu spremnika ili ugniježđenog elementa i ugniježđeni element uvijek ostaje centriran.

Svojstva koja kontroliraju poravnanje

Svojstva koja ćemo pogledati u ovom vodiču su sljedeća.

justify-content - kontrolira poravnavanje svih stavki na glavnoj osi.
align-items - kontrolira poravnavanje svih stavki na poprečnoj osi.
align-self - kontrolira poravnavanje pojedinačne flex stavke na poprečnoj osi.
align-content - opisano u specifikaciji kao za “pakiranje flex lines”; kontrolira prostor između savitljivih linija na poprečnoj osi.

Također ćemo otkriti kako se automatske margine mogu koristiti za poravnanje u flexboxu.

Bilješka: Svojstva poravnanja u Flexboxu stavljena su u vlastitu specifikaciju - CSS Box Alignment Level 3. Očekuje se da će ova specifikacija u konačnici zamijeniti svojstva definirana u Flexbox Level One.

Poprečna os

Align-items i align-self svojstva kontroliraju poravnanje naših flex stavki na križnoj osi, niz stupce ako je flex-direction red i duž retka ako je flex-direction stupac.

Koristimo poprečno poravnanje osi u najjednostavnijem fleksibilnom primjeru. Ako u spremnik dodamo display: flex, sve podređene stavke postaju flex stavke poredane u red. Svi će se rastegnuti kako bi bili visoki koliko i najviši predmet, jer ta stavka definira visinu predmeta na poprečnoj osi. Ako vaš flex spremnik ima postavljenu visinu, tada će se stavke rastegnuti do te visine, bez obzira na to koliko sadržaja ima u stavci.

Razlog zašto stavke postaju iste visine je taj što je početna vrijednost align-items, svojstvo koje kontrolira poravnanje na poprečnoj osi, postavljeno na rastezanje.

Možemo koristiti druge vrijednosti za kontrolu kako se stavke poravnavaju:

align-items: flex-start
align-items: flex-end
align-items: centar
align-items: rastegnuti
align-items: osnovna linija

U donjem primjeru uživo, vrijednost align-items je stretch. Isprobajte druge vrijednosti i pogledajte kako se sve stavke međusobno poravnavaju u flex spremniku.

Poravnavanje jedne stavke s align-self

Svojstvo align-items postavlja svojstvo align-self na sve flex stavke kao grupu. To znači da možete eksplicitno deklarirati svojstvo align-self za ciljanje jedne stavke. Svojstvo align-self prihvaća sve iste vrijednosti kao align-items plus vrijednost auto, što će vratiti vrijednost na onu koja je definirana u flex spremniku.

U ovom sljedećem živom primjeru, flex spremnik ima align-items: flex-start, što znači da su sve stavke poravnate s početkom poprečne osi. Ciljao sam prvu stavku pomoću selektora prvog djeteta i postavio tu stavku na align-self: stretch; druga je stavka odabrana korištenjem svoje klase odabranog i zadanog align-self: centra. Možete promijeniti vrijednost align-items ili promijeniti vrijednosti align-self na pojedinačnim stavkama da vidite kako to funkcionira.

Promjena glavne osi

Do sada smo pogledali ponašanje kada je naš flex-direction red, i dok radimo na jeziku koji je napisan od vrha do dna. To znači da glavna os ide duž reda vodoravno, a naše poprečno poravnanje osi pomiče stavke gore i dolje.

Ako promijenimo naš flex-direction u stupac, align-items i align-self će poravnati stavke lijevo i desno.

To možete isprobati u donjem primjeru, koji ima flex kontejner sa flex-direction: stupcem, ali je inače potpuno isti kao i prethodni primjer.

Poravnavanje sadržaja na križnoj osi - svojstvo align-content

Do sada smo poravnavali stavke, ili pojedinačnu stavku unutar područja definiranog flex-kontejnerom. Ako imate omotani fleksibilni spremnik s više redaka, možda biste također htjeli koristiti svojstvo align-content za kontrolu raspodjele prostora između redaka. U specifikaciji je to opisano kao fleksibilne linije za pakiranje.

Da bi align-content funkcionirao, potrebna vam je veća visina u vašem flex spremniku nego što je potrebno za prikaz stavki. Zatim radi na svim stavkama kao skupu i diktira što se događa s tim slobodnim prostorom i poravnavanje cijelog skupa stavki unutar njega.

Svojstvo align-content ima sljedeće vrijednosti:

align-content: flex-start
align-content: flex-end
align-content: središte
align-content: prostor-između
align-content: prostor-okolo
align-content: rastegnuti
align-content: ravnomjerno po prostoru (nije definirano u Flexbox specifikaciji)

U donjem primjeru uživo, flex spremnik ima visinu od 400 piksela, što je više nego potrebno za prikaz naših stavki. Vrijednost align-content je space-between, što znači da se raspoloživi prostor dijeli između savitljive linije, koje su postavljene u ravnini s početkom i krajem spremnika na poprečnoj osi.

Isprobajte druge vrijednosti da vidite kako funkcionira svojstvo align-content.

Još jednom možemo prebaciti naš flex-direction na stupac kako bismo vidjeli kako se ovo svojstvo ponaša kada radimo po stupcu. Kao i prije, potrebno nam je dovoljno prostora u poprečnoj osi da imamo malo slobodnog prostora nakon prikaza svih stavki.

Bilješka: vrijednost ravnomjerno u prostoru nije definirana u specifikaciji flexboxa i kasniji je dodatak specifikaciji za poravnanje okvira. Podrška preglednika za ovu vrijednost nije tako dobra kao ona za vrijednosti definirane u specifikaciji flexboxa.