- Prevod
o autoru: Rachel Andrew nije samo glavna urednica Smashing Magazina, već i web programer, pisac i govornik. Autorka je niza knjiga, uključujući Novi CSS izgled, jedan od programera Perch sistema za upravljanje sadržajem. Piše o poslovanju i tehnologiji na svojoj web stranici rachelandrew.co.uk.
Sažetak: U ovom članku ćemo pogledati svojstva poravnanja u Flexboxu i neka osnovna pravila o tome kako funkcionira poravnanje duž glavne i poprečne ose.
Vrijednosti rade na isti način okomito, to jest, ako se flex-direction primjenjuje na stupac . Istina, možda nećete imati slobodan prostor u koloni za distribuciju ako ne dodate visinu ili veličinu bloka u kontejner, kao u ovoj demonstraciji.
Poravnanje osi pomoću align-content
Ako kontejner ima više osa i naveden je flex-wrap: wrap, tada se align-content može koristiti za poravnavanje redova na poprečnoj osi. Ali potreban je dodatni prostor. U ovom demonstraciji, poprečna os ide u smjeru stupca, a ja sam odredio visinu kontejnera na 60vh. Pošto je ovo više nego što je potrebno za prikaz svih elemenata, postoji slobodan vertikalni prostor.Tada mogu primijeniti align-content sa bilo kojim od .
Ako je flex-direction stupac, tada align-content radi kao u sljedećem primjeru.
Kao i sa justify-content, radimo sa grupom redova i dodeljujemo slobodan prostor.
Vlasništvo po sadržaju mjesta
U specifikaciji za poravnanje okvira možete pronaći svojstvo sadržaja mjesta. Korištenje ovog svojstva znači da istovremeno postavljate justify-content i align-content. Prva vrijednost je za align-content, druga je za justify-content. Ako je navedena samo jedna vrijednost, ona se primjenjuje na oba svojstva:Kontejner (sadržaj mesta: razmak između rastezanja; )
Ovom odgovara:
Kontejner ( align-content: razmak-između; justify-content: rastegnuti; )
I ovaj kod:
Kontejner (sadržaj mesta: razmak između; )
Ekvivalentno sljedećem:
Kontejner ( align-content: razmak-između; justify-content: razmak-između; )
Poravnanje osi pomoću align-items
Sada znamo da skup elemenata ili redova možemo poravnati kao grupu. Međutim, postoji još jedan način da se elementi poravnaju jedan u odnosu na drugi na poprečnoj osi. Kontejner ima visinu, koja je određena visinom najvišeg elementa.
Alternativno, može se definirati svojstvom visine u kontejneru:
Zašto su elementi rastegnuti do veličine najvišeg elementa je zato što je početna vrijednost parametra align-items stretch . Elementi se razvlače duž poprečne ose do veličine kontejnera u tom pravcu.
Imajte na umu da u kontejneru s više redaka svaki red djeluje kao novi kontejner. Najviši element u tom redu će odrediti veličinu svih elemenata u tom redu.
Pored početne vrijednosti stretch , možete postaviti align-items na flex-start , u kom slučaju su poravnate s početkom spremnika i više se ne protežu po visini.
Vrijednost flex-end ih pomiče na kraj kontejnera duž poprečne ose.
Ako koristite centar vrijednosti, tada su elementi centrirani jedan u odnosu na drugi:
Možemo ih i poravnati sa osnovnom linijom. Ovo osigurava da je tekst poravnat na istoj osnovi, za razliku od poravnanja margina oko teksta.
Sve ove opcije se mogu isprobati u demo verziji.
Prilagođeno poravnanje sa align-self
Svojstvo align-items specificira poravnanje svih elemenata odjednom. Zapravo, postavlja vrijednosti align-self za sve elemente grupe. Također možete koristiti svojstvo align-self na bilo kojem pojedinačnom elementu da ga poravnate unutar linije i u odnosu na druge elemente.Sljedeći primjer koristi align-items u kontejneru za centriranje cijele grupe, ali i align-self za prvi i posljednji element.
Zašto ne postoji opravdanje?
Često se postavlja pitanje zašto jedan element ili grupu elemenata nije moguće poravnati duž glavne ose. Zašto Flexbox nema svojstvo -self za poravnanje glavne ose? Ako razmišljate o justify-content i align-contentu kao o načinu dodjeljivanja prostora, odgovor postaje očigledniji. Bavimo se elementima kao grupom i postavljamo slobodan prostor na određeni način: bilo na početku ili na kraju grupe, ili između elemenata.Također bi moglo biti korisno razmisliti o tome kako funkcionišu justify-content i align-content u CSS Grid Layoutu. U Grid-u, ova svojstva se koriste za dodjelu slobodnog prostora u grid kontejneru. između staza mreže. I ovdje uzimamo grupu staza - i pomoću ovih svojstava distribuiramo slobodan prostor između njih. Budući da radimo u grupi i u Grid iu Flexboxu, ne možemo uzeti jedan element i učiniti nešto drugačije s njim. Međutim, postoji način da se dobije dizajn izgleda koji dizajneri izgleda žele kada govore o vlastitom vlasništvu na glavnoj osi. Ovo je upotreba automatskih polja.
Korištenje automatskih margina na primarnoj osi
Ako ste ikada centrirali blok u CSS-u (na primjer, omot za sadržaj početne stranice postavljanjem lijeve i desne margine na auto), onda već imate iskustva s automatskim marginama. Vrijednost auto za margine ispunjava što je moguće više prostora u navedenom smjeru. Da bismo centrirali blok, postavili smo i lijevu i desnu marginu na auto: svaka od njih pokušava zauzeti što je moguće više prostora i stoga postavlja naš blok u centar.Automatske margine rade vrlo dobro u Flexboxu za poravnavanje pojedinačnih elemenata ili grupa elemenata na glavnoj osi. Sljedeći primjer pokazuje tipičan slučaj. Postoji traka za navigaciju, stavke se prikazuju kao string i koriste početnu vrijednost justify-content: start . Želim da se posljednja stavka pojavi odvojeno od ostalih na kraju reda - pod uvjetom da u redu ima dovoljno mjesta da se to dogodi.
Uzimamo ovaj element i postavljamo svojstvo margin-left na auto. To znači da kutija pokušava dobiti što više prostora lijevo od elementa, što znači da je element gurnut na desnu ivicu.
Ako koristite automatske margine na glavnoj osi, justify-content više neće imati efekta jer će automatske margine zauzeti sav prostor koji bi inače bio dodijeljen korištenjem justify-content .
Rezervno poravnanje
Za svaki metod poravnanja opisan je rezervni način - šta će se dogoditi ako navedeno poravnanje nije moguće. Na primjer, ako imate samo jedan element u kontejneru i navedete justify-content: space-between , što bi se trebalo dogoditi? U ovom slučaju se primjenjuje rezervno poravnanje flex-start - jedan element će biti poravnat na početku spremnika. U slučaju justify-content: space-around, rezervno poravnanje je centar.U trenutnoj specifikaciji ne možete promijeniti rezervno poravnanje. Postoji bilješka o specifikaciji koja dozvoljava mogućnost specificiranja proizvoljnog zamjenskog rješenja u budućim verzijama.
Sigurno i nesigurno poravnanje
Nedavni dodatak specifikaciji Box Alignment je koncept sigurnog i nesigurnog poravnanja pomoću ključnih riječi sigurno I nesigurno.U sljedećem kodu, posljednji element je preširok za kontejner, a sa nesigurnim poravnanjem i savitljivim kontejnerom na lijevoj strani stranice, element je odsječen jer se prekoračenje proteže izvan granica stranice.
Kontejner (prikaz: flex; flex-direction: stupac; širina: 100px; align-items: nesigurno središte; ) .item:last-child (širina: 200px; ) 
Sigurno poravnanje sprječava gubitak podataka pomicanjem preljeva na drugu stranu.
Kontejner (prikaz: flex; flex-direction: stupac; širina: 100px; align-items: siguran centar; ) .item:last-child (širina: 200px; ) 
Ove ključne riječi još uvijek nisu podržane od strane svih pretraživača, ali pokazuju kako specifikacije za poravnanje okvira dodaju kontrolu Flexboxu.
Zaključak
Svojstva poravnanja su počela kao lista u Flexboxu, ali sada imaju vlastitu specifikaciju i primjenjuju se na druge kontekste izgleda. Evo nekoliko ključnih činjenica koje će vam pomoći da zapamtite njihovu upotrebu u Flexboxu:- poravnati - za glavne ose i poravnati - za poprečne;
- align-content i justify-content zahtijevaju slobodan prostor;
- svojstva align-content i justify-content se primjenjuju na elemente u grupi, raspodjeljujući prostor između njih. Ne možete specificirati poravnanje pojedinačnog elementa jer nedostaje svojstvo -self;
- ako želite da poravnate jedan element ili podelite grupu duž glavne ose, koristite automatska polja;
- align-items postavlja ista svojstva align-self za cijelu grupu. Koristite align-self na podređenom elementu grupe da pojedinačno postavite njegovu vrijednost.
Oznake: Dodajte oznake
Flexbox (Flexible Box Layout Module) Specifikacija je metoda pozicioniranja elemenata u horizontalnom ili okomitom smjeru.
Flexbox kombinuje skup svojstava za roditeljski flex kontejner i za podređene flex stavke.
Da bi element postao flex kontejner, mora biti dodijeljen displej: flex; ili displej: inline-flex;(blok ili linija).
Unutar flex kontejnera kreiraju se dvije ose: glavna i poprečna osa okomita na nju. Prvo se savitljivi elementi poravnavaju duž glavne ose, a zatim duž poprečne.
Flex svojstva kontejnera |
|
| flex-direction | Definira smjer glavne ose. Moguće vrijednosti:
|
| flex-wrap | Određuje da li je kontejner višeredni. Moguće vrijednosti:
|
| 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 ose. Moguće vrijednosti:
|
| align-items | Određuje poravnanje elemenata duž poprečne ose. Moguće vrijednosti:
|
| align-content | Određuje poprečno poravnanje ose čitavih redova flex stavki. Moguće vrijednosti:
Ovo svojstvo ne radi za fleksibilni kontejner s jednom linijom. |
Svojstva Flex elementa |
|
| red | Određuje redoslijed u kojem se jedan flex element pojavljuje unutar flex kontejnera. Naveden kao cijeli broj. Zadana vrijednost je 0, tada elementi slijede jedan za drugim prirodnim redoslijedom toka. Značenje red specificira težinu pozicije elementa u nizu, a ne njegovu apsolutnu poziciju. |
| flex-basis | Definira osnovnu veličinu flex stavke prije dodjeljivanja prostora unutar kontejnera. Može se specificirati u px, %, em i drugim mjernim jedinicama. U suštini, ovo je neka početna tačka u odnosu na koju se element rasteže ili sabija. Zadana vrijednost - auto, pri čemu veličina elementa zavisi od veličine unutrašnjeg sadržaja. |
| flex-grow | Određuje koliko će slobodnog prostora unutar kontejnera flex stavka dodati svojoj osnovnoj veličini. Specificirano cijelim brojem koji služi kao proporcija. Zadana vrijednost je 0. Ako su svi elementi flex-grow: 1, tada će svi biti iste veličine. Ako jednu flex stavku postavite na 2, ona će dodati dvostruko više svojoj osnovnoj veličini od ostalih. |
| flex-shrink | Određuje koliko će se, ako nema dovoljno prostora, flex element smanjiti u odnosu na smanjenje susjednih elemenata unutar flex kontejnera. Specificirano cijelim brojem koji služi kao proporcija. Podrazumevano je 1. Ako je jedan flex element postavljen na fleksibilno skupljanje: 2, tada će se od njegove osnovne veličine oduzeti dvostruko više nego od ostalih ako je kontejner manji od zbira osnovnih veličina elemenata koji sadrži. |
| flex | Definira tri parametra odjednom: flex-grow, flex-shrink, flex-basis. Na primjer, flex: 1 1 200px; |
| align-self | Poništava zadano poravnanje ili align-items, za određeni flex element. Moguće vrijednosti:
|
Karakteristike korištenja Flexboxa u praksi
1. Desno poravnanje
Flexbox se s pravom može nazvati uspješnim pokušajem rješavanja ogromnog spektra problema pri izgradnji izgleda u CSS-u. Ali prije nego što pređemo na njegov opis, hajde da otkrijemo šta nije u redu sa metodama rasporeda koje sada koristimo?
Svaki dizajner rasporeda zna nekoliko načina da nešto poravna okomito ili da napravi raspored od 3 kolone sa gumenim srednjim stupcem. Ali priznajmo da su sve ove metode prilično čudne, izgledaju kao hak, nisu prikladne u svim slučajevima, teško ih je razumjeti i ne funkcioniraju ako nisu ispunjeni određeni magični uvjeti koji su se povijesno razvijali.
To se dogodilo jer su se html i css razvili evolucijski. Na početku su web stranice izgledale kao tekstualni dokumenti s jednim niti, nešto kasnije, razbijanje stranice na blokove je rađeno pomoću tabela, zatim je postalo moderno rasporediti s plutajućim znakovima, a nakon službene smrti ie6, inline-block tehnike su uvedene. takođe dodao. Kao rezultat toga, naslijedili smo eksplozivnu mješavinu svih ovih tehnika, korištenih za pravljenje izgleda za 99,9% svih postojećih web stranica.
Višelinijska organizacija blokova unutar flex kontejnera.
flex-wrap
Svi primjeri koje smo dali gore izgrađeni su uzimajući u obzir jednolinijski (jednostupačni) raspored blokova. Mora se reći da će po defaultu flex kontejner uvijek rasporediti blokove unutar sebe u jednu liniju. Međutim, specifikacija također podržava višelinijski način rada. Svojstvo flex-wrap CSS odgovorno je za sadržaj sa više redaka unutar flex kontejnera.
Dostupne vrijednosti flex-wrap:
- nowrap (zadana vrijednost): blokovi su raspoređeni u jednu liniju s lijeva na desno (u rtl s desna na lijevo)
- wrap: blokovi su raspoređeni u nekoliko horizontalnih redova (ako se ne uklapaju u jedan red). Prate jedni druge s lijeva na desno (u rtl s desna na lijevo)
- wrap-reverse: isto kao zamotati, ali su blokovi raspoređeni obrnutim redoslijedom.
flex-flow je zgodna skraćenica za flex-direction + flex-wrap
U suštini, flex-flow pruža mogućnost opisa smjera glavne i višelinijske poprečne ose u jednom svojstvu. Zadani flex-flow: red nowrap .
flex-flow:<‘flex-direction’> || <‘flex-wrap’>
CSS
/* tj. ... */ .my-flex-block( flex-directrion:column; flex-wrap: wrap; ) /* ovo je isto kao... */ .my-flex-block( flex-flow: premotavanje stupca ; )align-content
Postoji i svojstvo align-content, koje određuje kako će rezultirajući redovi blokova biti vertikalno poravnati i kako će podijeliti cijeli prostor flex kontejnera.
Bitan: align-content radi samo u višelinijskom načinu (tj. u slučaju flex-wrap:wrap; ili flex-wrap:wrap-reverse;)
Dostupne vrijednosti align-content:
- flex-start: redovi blokova su pritisnuti na početak flex kontejnera.
- flex-end: redovi blokova su pritisnuti do kraja flex kontejnera
- centar: redovi blokova su u centru flex kontejnera
- razmak između: prvi red blokova nalazi se na početku flex kontejnera, posljednji red blokova je na kraju, svi ostali redovi su ravnomjerno raspoređeni u preostalom prostoru.
- space-around: redovi blokova su ravnomjerno raspoređeni od početka do kraja flex kontejnera, dijeleći sav raspoloživi prostor jednako.
- rastezanje (zadana vrijednost): Redovi blokova su razvučeni kako bi zauzeli sav raspoloživi prostor.
CSS svojstva flex-wrap i align-content treba da se primenjuju direktno na flex kontejner, a ne na njegovu decu.
Demo višelinijskih svojstava u flexu
CSS pravila za podređene elemente flex kontejnera (flex blokovi)
flex-basis – osnovna veličina jednog flex bloka
Postavlja početnu veličinu glavne ose za flex blok prije nego što se na njega primjene transformacije zasnovane na drugim faktorima fleksibilnosti. Može se navesti u bilo kojoj jedinici dužine (px, em, %, ...) ili auto (podrazumevano). Ako je postavljeno kao auto, dimenzije bloka (širina, visina) se uzimaju kao osnova, što zauzvrat može ovisiti o veličini sadržaja, ako nije eksplicitno navedeno.
flex-grow – “pohlepa” jednog flex bloka
Određuje koliko pojedinačni fleks blok može biti veći od susjednih elemenata, ako je potrebno. flex-grow prihvaća vrijednost bez dimenzije (podrazumevano 0)
Primjer 1:
- Ako sve flex kutije unutar flex kontejnera imaju flex-grow:1 onda će biti iste veličine
- Ako jedan od njih ima flex-grow:2 onda će biti 2 puta veći od svih ostalih
Primjer 2:
- Ako sve flex kutije unutar flex kontejnera imaju flex-grow:3 onda će biti iste veličine
- Ako jedan od njih ima flex-grow:12 onda će biti 4 puta veći od svih ostalih
To jest, apsolutna vrijednost flex-grow ne određuje tačnu širinu. On određuje njegov stepen „pohlepe“ u odnosu na druge fleks blokove istog nivoa.
flex-shrink – faktor “stisljivosti” jednog flex bloka
Određuje koliko će se flex blok smanjiti u odnosu na susjedne elemente unutar flex kontejnera ako nema dovoljno slobodnog prostora. Podrazumevano je 1.
flex – skraćenica za svojstva flex-grow, flex-shrink i flex-basis
flex: nema | [<"flex-grow"> <"flex-shrink">? || <"flex-basis"> ]
CSS
/* tj. ... */ .my-flex-block( flex-grow:12; flex-shrink:3; flex base: 30em; ) /* ovo je isto kao... */ .my-flex-block( flex : 12 3 30em; )Demo za flex-grow, flex-shrink i flex-basis
align-self – poravnanje jednog flex bloka duž poprečne ose.
Omogućava zaobilaženje svojstva align-items fleksibilnog kontejnera za pojedinačni flex blok.
Dostupne vrijednosti align-self (istih 5 opcija kao i align-items)
- flex-start: flex blok je pritisnut na početak poprečne ose
- flex-end: flex blok je pritisnut na kraj poprečne ose
- centar: flex blok se nalazi u centru poprečne ose
- osnovna linija: flex blok je poravnat sa osnovnom linijom
- rastezanje (zadana vrijednost): Flex blok se rasteže da zauzme sav raspoloživi prostor duž poprečne ose, uzimajući u obzir minimalnu/maksimalnu širinu ako je postavljeno.
poredak – redosled jednog flex bloka unutar flex kontejnera.
Podrazumevano, svi blokovi će se pratiti jedan za drugim redosledom navedenim u html-u. Međutim, ovaj redoslijed se može promijeniti korištenjem svojstva naloga. Naveden je kao cijeli broj i zadana vrijednost je 0.
Vrijednost reda ne specificira apsolutnu poziciju elementa u nizu. Određuje težinu položaja elementa.
HTML
U ovom slučaju, blokovi će se nizati jedan za drugim duž glavne ose u sljedećem redoslijedu: item5, item1, item3, item4, item2
Demo za poravnanje i red
margina: auto vertikalno. Snovi postaju stvarnost!
Možete voljeti Flexbox barem zato što poznato horizontalno poravnanje preko margin:auto ovdje radi i za vertikale!
My-flex-container (prikaz: flex; visina: 300px; /* Ili bilo šta */ ) .my-flex-block (širina: 100px; /* Ili bilo šta */ visina: 100px; /* Ili bilo šta * / margina: auto; /* Magic! Blok je centriran okomito i horizontalno! */ )
Stvari koje treba zapamtiti
- Ne biste trebali koristiti flexbox tamo gdje to nije potrebno.
- Definiranje regiona i promjena redoslijeda sadržaja u mnogim slučajevima je i dalje korisno za ovisnost o strukturi stranice. Razmislite dobro.
- Razumjeti flexbox i znati osnove. To znatno olakšava postizanje očekivanog rezultata.
- Ne zaboravite na margine. Oni se uzimaju u obzir pri postavljanju poravnanja osi. Takođe je važno zapamtiti da se margine u flexbox-u ne „urušavaju” kao u normalnom toku.
- Pokretna vrijednost flex blokova se ne uzima u obzir i nema značenje. Ovo se vjerovatno nekako može iskoristiti za gracioznu degradaciju pri prelasku na flexbox.
- Flexbox je vrlo pogodan za raspored web komponenti i pojedinačnih dijelova web stranica, ali nije pokazao svoju najbolju stranu pri postavljanju osnovnih izgleda (pozicija članka, zaglavlja, podnožja, navigacijske trake itd.). Ovo je još uvijek kontroverzno, ali ovaj članak prilično uvjerljivo pokazuje nedostatke xanthir.com/blog/b4580
Konačno
Mislim da flexbox, naravno, neće zamijeniti sve druge metode rasporeda, ali, naravno, u bliskoj budućnosti će zauzeti dostojnu nišu u rješavanju ogromnog broja problema. I naravno, sada morate pokušati raditi s njim. Jedan od sljedećih članaka bit će posvećen konkretnim primjerima rada sa flex rasporedom. Pretplatite se na novosti ;)
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 funkcionišu svojstva poravnanja i poravnanja 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 da poravnamo stavku na glavnoj osi, koja u ovom slučaju inline osa radi horizontalno.
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 kontrolišu poravnanje
Svojstva koja ćemo pogledati u ovom vodiču su sljedeća.
- justify-content - kontroliše poravnanje svih stavki na glavnoj osi.
- align-items - kontrolira poravnanje svih stavki na poprečnoj osi.
- align-self - kontrolira poravnanje pojedinačne flex stavke na poprečnoj osi.
- align-content - opisano u specifikaciji kao za “pakovanje fleks linija”; kontroliše 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 su stavljena u vlastitu specifikaciju - CSS Box Alignment Level 3. Očekuje se da će ova specifikacija na kraju zamijeniti svojstva koja su definirana u Flexbox Level One.
Cross Axis
Align-items i align-self svojstva kontroliraju poravnanje naših flex stavki na poprečnoj osi, niz kolone ako je flex-direction red i duž reda ako je flex-direction stupac .
Koristimo poravnanje unakrsne osi u najjednostavnijem fleksibilnom primjeru. Ako u kontejner dodamo display: flex, sve podređene stavke postaju flex stavke poredane u niz. 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 kontejner ima postavljenu visinu, onda ć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 da kontroliramo 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 poravnavaju jedna naspram druge u flex kontejneru.
Poravnavanje jedne stavke sa 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 prihvata sve iste vrijednosti kao align-items plus vrijednost auto, što će resetirati vrijednost na onu koja je definirana u flex kontejneru.
U ovom sljedećem živom primjeru, flex kontejner ima align-items: flex-start , što znači da su sve stavke poravnate s početkom poprečne ose. Ciljao sam prvu stavku koristeći selektor prvog djeteta i postavio tu stavku na align-self: stretch ; druga stavka je odabrana koristeći svoju klasu odabranog i zadato align-self: center . Možete promijeniti vrijednost align-items ili promijeniti vrijednosti align-self na pojedinačnim stavkama da vidite kako to funkcionira.
Promjena glavne ose
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 ose pomiče stavke gore i dolje.
Ako promijenimo naš flex-direction u stupac, align-items i align-self će poravnati stavke lijevo i desno.
Ovo možete isprobati u primjeru ispod, koji ima flex kontejner sa flex-direction: stupcem, ali je inače potpuno isti kao prethodni primjer.
Poravnavanje sadržaja na poprečnoj osi - svojstvo align-content
Do sada smo poravnavali stavke, ili pojedinačne stavke unutar područja definiranog flex-kontejnerom. Ako imate umotan višelinijski flex kontejner, možda ćete htjeti koristiti svojstvo align-content za kontrolu raspodjele prostora između redova. U specifikaciji je to opisano kao fleksibilne linije za pakovanje.
Da bi align-content funkcionirao, potrebna vam je veća visina u vašem flex kontejneru nego što je potrebno za prikaz stavki. Zatim radi na svim stavkama kao skupu i diktira šta će se dogoditi sa tim slobodnim prostorom i poravnavanje cijelog skupa stavki unutar njega.
Svojstvo align-content uzima sljedeće vrijednosti:
- align-content: flex-start
- align-content: flex-end
- align-content: centar
- align-content: prostor-između
- align-content: space-around
- align-content: rastegnuti
- align-content: ravnomjerno u prostoru (nije definirano u Flexbox specifikaciji)
U donjem primjeru uživo, flex kontejner 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 ravni sa početkom i krajem kontejnera 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 ranije, 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 flexbox specifikaciji i kasniji je dodatak specifikaciji za poravnanje okvira. Podrška pretraživača za ovu vrijednost nije tako dobra kao ona za vrijednosti definirane u flexbox specifikaciji.
Ukratko, Flexbox izgled nam daje jednostavna rješenja za nekada teške probleme. Na primjer, kada trebate poravnati element okomito, ili pritisnuti podnožje na dno ekrana, ili jednostavno umetnuti nekoliko blokova u jedan red tako da zauzmu sav slobodan prostor. Slični problemi se mogu riješiti bez fleksa. Ali po pravilu, ova rješenja više liče na „štake“ - tehnike za korištenje CSS-a u svrhe koje nisu namijenjene. Dok se sa flexboxom takvi zadaci rješavaju upravo onako kako je flex model zamišljen.
CSS Fleksibilni Box Layout Module (CSS modul za rasporede sa fleksibilnim blokovima), ukratko flexbox, kreiran je da eliminiše nedostatke prilikom kreiranja širokog spektra HTML dizajna, uključujući i one prilagođene različitim širinama i visinama, i učini izgled logičnim i jednostavnim . A logičan pristup, po pravilu, funkcioniše na neočekivanim mestima, gde rezultat nije proveren - logika je sve!
Flexbox vam omogućava da elegantno kontrolišete različite parametre elemenata unutar kontejnera: pravac, red, širinu, visinu, poravnanje duž i poprečno, distribuciju slobodnog prostora, rastezanje i kompresiju elemenata.
Osnovno znanje
FlexBox se sastoji od kontejnera i njegovih stavki (fleksibilnih elemenata).
Da biste omogućili flexbox, bilo kojem HTML elementu samo treba dodijeliti CSS svojstvo 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 poređani duž glavne ose. Podrazumevano, glavna os je horizontalna i usmjerena s lijeva na desno (→), a poprečna os je shodno tome vertikalna i usmjerena odozgo prema dolje (↓).
Glavna i poprečna os 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 su jednostavno zamenile mesta . U ovom slučaju, početak i kraj rasporeda elemenata se ne mijenja - mijenjaju se samo smjerovi (ose)! Zbog toga morate zamisliti osovine unutar kontejnera. Međutim, ne treba misliti da 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 poravnanje promijeniti: elementi su bili u sredini horizontalno, ali su postali u sredini okomito... Pogledajte 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, ima mnogo elemenata i oni se ne „uklapaju“ u kontejner, pa se pomjeraju u drugi red. One. kontejner izgleda ovako: kontejner sa dva reda unutar njega, svaki red sadrži nekoliko elemenata. Uvedeni? Sada zapamtite da možemo vertikalno poravnati ne samo elemente, već i redove! Kako to funkcionira jasno se vidi u primjeru za imovinu. A ovako to izgleda shematski:
CSS svojstva koja mogu uticati na model izgleda: float, clear, vertical-align, kolone ne rade u flex dizajnu. Ovdje se koristi drugačiji model za izradu rasporeda i ova CSS svojstva se jednostavno zanemaruju.
Flexbox CSS svojstva
Flexbox sadrži različita CSS pravila za kontrolu cjelokupnog flex dizajna. Neke je potrebno primijeniti na glavni kontejner, a druge na elemente ovog kontejnera.
Za kontejner
prikaz:Omogućava flex svojstvo za element. Ovo svojstvo pokriva sam element i njegove ugniježđene elemente: pogođeni su samo potomci prve razine - oni će postati elementi flex kontejnera.
- flex- element se proteže cijelom širinom i ima svoj puni prostor među okolnim blokovima. Prelomi linija se javljaju na početku i na kraju bloka.
- inline-flex- element je omotan oko drugih elemenata. U ovom slučaju, njegov unutrašnji dio je formatiran kao blok element, a sam element je formatiran kao inline.
flex i inline-flex se razlikuju po tome što različito djeluju s okolnim elementima, slično kao display:block i display:inline-block.
flex-direction: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-obrnuti- smjer elemenata s desna na lijevo (←)
- kolona-revers- smjer elemenata odozdo prema gore ()
Kontrolira prijenos elemenata koji se ne uklapaju u kontejner.
- Nowrap (zadano)- ugniježđeni elementi se postavljaju u jedan red (sa smjerom=red) ili u jednu kolonu (sa smjerom=kolona) bez obzira da li se uklapaju u kontejner ili ne.
- zamotati- uključuje pokretne elemente u sljedeći red ako se ne uklapaju u kontejner. To omogućava kretanje elemenata duž poprečne ose.
- omotati-obrnuti- isto kao i wrap, samo prijenos neće biti dolje, već gore (u suprotnom smjeru).
Kombinira svojstva flex-direction i flex-wrap. Često se koriste zajedno, pa je stvoreno svojstvo flex-flow kako bi pomoglo u pisanju manje koda.
flex-flow prihvata 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 će ostati malo prostora na kraju).
- flex-end- elementi su poravnati na kraju (razmak će ostati na početku)
- centar- u centru (ostat će prostor s lijeve i desne strane)
- prostor-između- krajnji vanjski elementi su pritisnuti uz rubove (prostor između elemenata je raspoređen ravnomjerno)
- prostor-okolo- slobodni prostor je ravnomjerno raspoređen između elemenata (krajnji vanjski elementi nisu pritisnuti uz rubove). Razmak između ruba posude i vanjskih elemenata bit će upola manji od razmaka između elemenata u sredini reda.
- prostorno ravnomerno
Poravnava redove koji sadrže elemente duž poprečne ose. Isto kao i justify-content samo 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 kruto postavljena i mora biti veća od visine redova, inače će sami redovi rastegnuti kontejner i svako njihovo poravnanje postaje besmisleno, 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 poravnavanje redova odmah ima smisla...
- rastezanje (zadano)- redovi se rastežu kako bi se red potpuno ispunio
- flex-start- redovi su grupisani na vrhu kontejnera (možda ostane malo prostora na kraju).
- flex-end- redovi su grupirani na dnu kontejnera (razmak će ostati na početku)
- centar- redovi su grupirani u sredini kontejnera (razmak će ostati na rubovima)
- prostor-između- vanjski redovi su pritisnuti uz rubove (prostor između redova je ravnomjerno raspoređen)
- prostor-okolo- slobodni prostor je ravnomjerno raspoređen između redova (najudaljeniji elementi nisu pritisnuti na rubove). Razmak između ruba posude i vanjskih elemenata bit će upola manji od razmaka između elemenata u sredini reda.
- prostorno ravnomerno- isto kao i space-around , samo što je udaljenost između vanjskih elemenata i rubova kontejnera ista kao i 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) su poravnati preko align-items i duž poprečne ose. Ne postoji takva podjela duž glavne ose, nema koncepta redova i elementi se poravnavaju preko 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 sa središtem reda
- osnovna linija- elementi su poravnati sa osnovnom linijom teksta
Za elemente kontejnera
flex-grow:Postavlja faktor uvećanja 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 će se svi jednako rastegnuti i ispuniti sav slobodan prostor u kontejneru.
- Ako navedete flex-grow:1 za jedan od elemenata, on će popuniti sav slobodan prostor u kontejneru i poravnanja preko justify-contenta 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 2 puta veći od svih ostalih
- Ako sve flex kutije unutar flex kontejnera imaju flex-grow:3 onda ć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. To znači da je u kontejneru ostalo 300 slobodnih piksela. Sada, ako specificiramo 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. Ovo se objašnjava činjenicom da je raspoloživih 300px slobodnog prostora u kontejneru raspoređeno između elemenata u omjeru 2:1, +200px za prvi i +100px za drugi.
Napomena: možete odrediti razlomke u vrijednosti, na primjer: 0,5 - flex-grow:0,5
flex-shrink:Postavlja faktor redukcije elementa. 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. Dajte prvom elementu flex-shrink: 2; , 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 se skupljati u omjeru 2:1, tj. prvi blok će se smanjiti za 200px, a drugi za 100px i nove veličine elemenata će postati 100px i 200px.
Napomena: možete odrediti razlomke u vrijednosti, na primjer: 0,5 - flex-shrink:0,5
flex-basis:Postavlja osnovnu širinu elementa - širinu prije nego što se izračunaju 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 autom, element dobija osnovnu širinu u odnosu na sadržaj unutar njega.
Podrazumevano: auto
Ponekad je bolje postaviti širinu elementa preko uobičajenog svojstva širine. Na primjer, širina: 50%; će značiti da će element unutar kontejnera biti tačno 50%, ali 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 "rigidna" ako su stretch i shrink postavljeni na nulu: flex-basis:200px; flex-grow:0; flex-shrink:0; . Sve ovo se može napisati ovako: flex:0 0 200px; .
flex: (osnova raste, smanji se)Kratak sažetak tri svojstva: 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.
Zadano: iz kontejnera align-items
- 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 order, tada će elementi biti raspoređeni 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.
Na ovaj način, na primjer, možete premjestiti prvi element na kraj bez promjene smjera kretanja preostalih elemenata ili HTML koda.
Bilješke
Koja je razlika između flex-basisa i širine?
Ispod su važne razlike između flex-basisa i širine/visine:
- Kada koristite svojstvo flex, 3 vrijednosti (flex-grow/flex-shrink/flex-basis) mogu se kombinirati i kratko napisati, ali za povećanje ili smanjenje širine potrebno je pisati odvojeno. Na primjer: flex:0 0 50% == širina:50%; flex-shrink:0; . Ponekad je jednostavno nezgodno.
flex-basis radi samo za glavnu osovinu. To znači da sa flex-direction:row flex-basis kontroliše širinu, a sa flex-direction:column kontroliše visinu. .
flex-basis se odnosi samo na flex elemente. To znači da ako onemogućite flex za kontejner, ovo svojstvo neće imati efekta.
Apsolutni elementi kontejnera ne učestvuju u flex konstrukciji... To znači da flex-basis ne utiče na flex elemente kontejnera ako su apsolutni position:apsolute . Morat će odrediti širinu/visinu.
Ako je moguće, ipak preferirajte flex bazu. Koristite širinu samo kada flex-basis nije prikladan.
Razlika između flex-basisa i širine - greška ili karakteristika?
Sadržaj unutar flex elementa ga gura i ne može ići dalje od njega. Međutim, ako postavite širinu koristeći width ili max-width umjesto flex-basis , tada će se element unutar flex kontejnera moći proširiti izvan granica tog kontejnera (ponekad je to upravo ono ponašanje koje želite). primjer:
Primjeri Flex rasporeda
Nigdje u primjerima se 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 sa vertikalnim i horizontalnim poravnanjem
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 (prekid) između elemenata fleksibilnog bloka
Da biste pozicionirali elemente kontejnera duž rubova i nasumično odabrali element nakon kojeg će doći do prekida, trebate koristiti svojstvo margin-left:auto ili margin-right:auto.
#2 Prilagodljivi meni na flex-u
Napravimo meni na samom vrhu stranice. Na širokom ekranu bi trebao biti na desnoj strani. U prosjeku, poravnajte u sredini. A na malom, svaki element mora biti na novoj liniji.
#3 Adaptivna 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 Adaptivni blokovi na flexu
Recimo da trebamo izbaciti 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 sa fleksom i prijelazom
Ovaj primjer pokazuje koliko brzo možete napraviti slatku harmoniku sa slikama koristeći flex. 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. Neophodno je da je slika na vrhu, dugme uvek na dnu, a tekst u sredini počinje duž jedne horizontalne linije...
Da bi se riješio ovaj problem, sami blokovi se rastežu sa fleksom i postavljaju na najveću moguću širinu. Svaki unutrašnji blok je takođe fleksibilna struktura, sa rotiranom osom flex-direction:column; a element u sredini (gdje je tekst) je rastegnut flex-grow:1; da se popuni sav slobodan prostor, ovako se postiže rezultat - 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 dizajn. 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, dok 98,3% koristi prefikse. Ovo je odličan pokazatelj da pouzdano koristite flexbox.
Da bih znao koji su prefiksi relevantni danas (jun 2019.), dat ću primjer svih flex pravila sa sa potrebnim prefiksima:
/* 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; ) /* Elementi */ .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.
Ova lista ne sadrži prefikse koji su danas nepotrebni (prema caniuse), ali generalno ima više prefiksa.
| Chrome | Safari | Firefox | Opera | I.E. | Android | iOS |
|---|---|---|---|---|---|---|
| 20- (staro) | 3.1+ (staro) | 2-21 (staro) | 10 (tweener) | 2.1+ (staro) | 3.2+ (staro) | |
| 21+ (novo) | 6.1+ (novo) | 22+ (novo) | 12.1+ (novo) | 11+ (novo) | 4.4+ (novo) | 7.1+ (novo) |
- (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:
Korisni linkovi na Flex-u
flexboxfroggy.com - flexbox edukativna igra.
Flexplorer je vizualni graditelj flex koda.
