Svojstvo align-content postavlja tip poravnanja linija unutar flex kontejnera duž poprečne ose kada postoji slobodan prostor.
To se odnosi na Dodatna oprema: flex kontejner.
Zadana vrijednost: rastezanje.
Flex-start linije su pozicionirane na početku poprečne ose. Svaki sljedeći red je u ravnini s prethodnim. flex-end Redovi se postavljaju počevši od kraja poprečne ose. Svaki prethodni red je u ravni sa sljedećim. centar Linije su centrirane na kontejneru. space-between Linije su ravnomjerno raspoređene u kontejneru i razmak između njih je isti. space-around Linije su ravnomjerno raspoređene tako da je razmak između dvije susjedne linije jednak. Beli prostor ispred prvog reda i posle poslednjeg reda jednak je polovini razmaka između dve susedne linije. ravnomjerno u prostoru Redovi su ravnomjerno raspoređeni. Razmak prije prvog reda i poslije posljednjeg reda je iste širine kao i ostali redovi. rastezanje Linije se ravnomjerno rastežu kako bi popunile slobodan prostor.
Svojstvo align-content poravnava linije flex kontejnera unutar flex kontejnera kada postoji dodatni prostor na poprečnoj osi, slično kao što justify-content poravnava pojedinačne stavke unutar glavne ose. Imajte na umu da ovo svojstvo nema efekta na jednoredni flex kontejner. Vrijednosti imaju sljedeća značenja:
Napomena: Samo višeredni fleksibilni kontejneri ikada imaju slobodan prostor u poprečnoj osi za linije koje treba poravnati, jer se u jednom fleksibilnom kontejneru jedina linija automatski rasteže kako bi ispunila prostor.
Odnosi se na Dodatna oprema: flex kontejneri.
Inicijal: rastezanje.
Flex-start Linije se pakuju prema početku flex kontejnera. Poprečna početna ivica prvog reda u flex kontejneru postavljena je u ravni sa poprečnom početnom ivicom flex kontejnera, a svaki sledeći red je postavljen u ravni sa prethodnim redom. flex-end Line se pakuju prema kraju flex kontejnera. Poprečna ivica posljednje linije postavljena je u ravnini sa poprečnom ivicom savitljivog kontejnera, a svaka prethodna linija postavljena je u ravni sa sljedećim redom. sredina Line su zbijene prema sredini flex kontejnera. Linije u flex kontejneru su postavljene u ravni jedna s drugom i poravnate u sredini flex kontejnera, sa jednakim razmakom između poprečnog početnog ruba sadržaja flex kontejnera i prve linije u flex kontejneru, i između poprečni rub sadržaja flex kontejnera i zadnji red u flex kontejneru. (Ako je preostali slobodni prostor negativan, linije će se ravnomjerno prelijevati u oba smjera.) Razmak između linija Linije su ravnomjerno raspoređene u flex kontejneru. Ako je preostali slobodni prostor negativan, ova vrijednost je identična flex-start. Inače, poprečna početna ivica prvog reda u flex kontejneru postavljena je u ravni sa ivicom sadržaja sa poprečnim početkom flex kontejnera, poprečna ivica poslednjeg reda u flex kontejneru postavljena je u ravni sa poprečnim krajnji rub sadržaja flex kontejnera, a preostale linije u flex kontejneru su raspoređene tako da je razmak između bilo koje dvije susjedne linije isti. space-around Linije su ravnomjerno raspoređene u flex kontejneru, s razmacima polovine veličine na oba kraja. Ako je preostali slobodni prostor negativan, ova vrijednost je identična centru. Inače, linije u flex kontejneru su raspoređene tako da je razmak između bilo koje dve susedne linije isti, a razmak između prvih/zadnjih redaka i ivica flex kontejnera je upola manji od razmaka između flex linija. ravnomjerno u prostoru Linije su ravnomjerno raspoređene u flex kontejneru. Ako je preostali slobodni prostor negativan, ova vrijednost je identična centru. Inače, linije u flex kontejneru su raspoređene tako da je razmak između svake flex linije isti. rastezanje Linije se rastežu kako bi zauzele preostali prostor. Ako je preostali slobodni prostor negativan, ova vrijednost je identična flex-start. U suprotnom, slobodni prostor se jednako dijeli između svih linija, povećavajući njihovu veličinu križa.
CSS flexbox (Modul fleksibilnog rasporeda kutije)- modul rasporeda fleksibilnog kontejnera - je način raspoređivanja elemenata, zasnovan na ideji ose.
Flexbox se sastoji od flex kontejner i flex items... Flex stavke se mogu poredati u red ili kolonu, a preostali slobodni prostor se između njih raspoređuje na različite načine.
Flexbox modul vam omogućava da ostvarite sljedeće zadatke:
- Rasporedite predmete u jednom od četiri smjera: slijeva nadesno, zdesna nalijevo, odozgo prema dolje ili odozdo prema gore.
- Poništi redoslijed prikaza stavki.
- Automatski promijenite veličinu elemenata kako bi se uklopili u raspoloživi prostor.
- Riješite problem horizontalnim i vertikalnim centriranjem.
- Zamotajte predmete unutar kontejnera bez prelijevanja.
- Napravite kolone jednake visine.
- Kreiraj zakačen na dno stranice.
Flexbox se bavi specifičnim potrebama kreiranja jednodimenzionalnih rasporeda, kao što je navigacijska traka, budući da flex stavke mogu biti raspoređene samo duž jedne ose.
Za listu trenutnih problema s modulima i rješenja za više pretraživača, pogledajte članak Philipa Waltona.
Šta je flexbox
Podrška za pretraživač
IE: 11.0, 10.0 -ms-
Firefox: 28.0, 18.0 -moz-
Chrome: 29.0, 21.0 -webkit-
safari: 6.1 -webkit-
Opera: 12.1 -webkit-
iOS Safari: 7.0 -webkit-
Opera Mini: 8
Android pretraživač: 4.4, 4.1 -webkit-
Chrome za Android: 44
1. Osnovni pojmovi
Rice. 1. Flexbox model Određeni skup termina se koristi za opisivanje Flexbox modula. Vrijednost flex-flow i način pisanja definiraju kako ovi pojmovi odgovaraju fizičkim pravcima: gore / desno / dolje / lijevo, ose: vertikalno / horizontalno i dimenzije: širina / visina.
Glavna osovina- osovina 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 kontejnera, u odnosu na koje su flex stavke postavljene (počevši od glavnog početka prema glavnom kraju).
Glavna veličina) - Širina ili visina fleksibilnog kontejnera ili flex stavki, ovisno o tome što je u osnovnoj dimenziji, određuje osnovnu veličinu fleksibilnog kontejnera ili flex stavke.
Cross axis- osa okomita na glavnu osu. Proširuje se bočno.
Unakrsni početak i križni kraj- Linije koje definiraju početnu i krajnju stranu poprečne ose oko koje su položene flex stavke.
Križna veličina- širina ili visina fleksibilnog kontejnera ili fleksibilnih predmeta, koja god da je u poprečnoj dimenziji, je njihova poprečna dimenzija.
Rice. 2. Režim reda i kolone 2. Flex kontejner
Flex kontejner postavlja novi fleksibilni kontekst formatiranja 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đe, na flex kontejner ne utiču svojstva kolone- *, koja kreiraju kolone u tekstu i pseudoelementi :: prvog reda i :: prvog slova.
Model izgleda flexbox-a povezan je sa određenom vrijednošću u svojstvu prikaza CSS roditeljskog html elementa koji sadrži podređene kutije. Da biste upravljali elementima pomoću ovog modela, morate postaviti svojstvo prikaza na sljedeći način:
Flex-kontejner (/ * generiše flex kontejner na nivou bloka * / display: -webkit-flex; display: flex;). Flex-container (/ * generiše flex kontejner na nivou reda * / display: -webkit-inline- flex; display: inline-flex;)
Nakon postavljanja ovih vrijednosti svojstva, svako dijete automatski postaje fleksibilna stavka, poređajući se u jednom redu (duž glavne ose). Međutim, blok i inline djeca se ponašaju isto, tj. širina blokova jednaka je širini njihovog sadržaja, uzimajući u obzir padding i granice elementa.
Rice. 3. Poravnavanje stavki u flexbox modelu Ako roditeljski blok sadrži tekst ili slike bez omota, oni postaju anonimne flex stavke. Tekst se poravnava sa gornjom ivicom bloka kontejnera, a visina slike postaje jednaka visini bloka, tj. deformiše se.
3. Flex stavke
Flex stavke su blokovi koji predstavljaju sadržaj flex kontejnera u toku. Flex kontejner postavlja novi kontekst formatiranja za svoj sadržaj koji pruža sljedeće karakteristike:
- Za flex stavke, njihova vrijednost svojstva prikaza je zaključana. Prikaz vrijednosti: inline-block; i prikaz: ćelija-tabela; evaluirano na displeju: 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 stilizirati sam po sebi, ali će ih naslijediti (kao što su postavke fonta) iz flex kontejnera.
- Apsolutno pozicionirana flex stavka ne učestvuje u rasporedu flex rasporeda.
- Polja margina susjednih flex stavki se ne skupljaju.
- Procenti margine i dopuna se izračunavaju iz unutrašnje 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.
- Podrazumevana automatska minimalna veličina za flex stavke je minimalna veličina njenog sadržaja, odnosno min-width: auto; ... Za pomične kontejnere, automatska minimalna veličina je obično nula.
4. Prikažite redoslijed fleksibilnih stavki i orijentaciju
Sadržaj flex kontejnera može se rasporediti u bilo kojem smjeru i bilo kojim redoslijedom (promjena poretka flex stavki unutar kontejnera utječe samo na vizualno prikazivanje).
4.1. Smjer glavne ose: flex-direction
Svojstvo je specifično za flex kontejner. Kontrolira smjer glavne ose duž koje se fleksibilne stavke slažu prema trenutnom načinu pisanja. Nije naslijeđen.
| flex-direction | |
|---|---|
| vrijednosti: | |
| red | Zadana vrijednost je slijeva na desno (u rtl-u, zdesna na lijevo). Flex stavke su raspoređene na liniji. Smjer glavnog početka i glavnog kraja glavne ose 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 desnu ivicu kontejnera (u rtl - lijevo). |
| kolona | Smjer od vrha do dna. Flex stavke su raspoređene u koloni. |
| kolona-revers | Kolona s elementima obrnutim redoslijedom, odozdo prema gore. |
| početni | |
| nasljediti | |
Rice. 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 kontejnera: flex-wrap
Svojstvo određuje da li će flex kontejner biti jednoredni ili višeredni, a takođe postavlja smer poprečne ose, koji određuje pravac u kojem se slažu nove linije flex kontejnera.
Prema zadanim postavkama, flex stavke su naslagane u jednu liniju, duž glavne ose. Ako se preliju, izaći će izvan graničnog okvira flex kontejnera. Imovina se ne nasljeđuje.
Rice. 5. Kontrola više linija sa svojstvom Flex-Wrap za LTR jezike Sintaksa
Flex-kontejner (prikaz: -webkit-flex; -webkit-flex-wrap: omotač; ekran: flex; flex-wrap: omotač;)
4.3. Skraćenica za smjer i više linija: flex-flow
Svojstvo vam omogućava da definirate smjerove glavne i poprečne osi, kao i mogućnost premotavanja flex stavki u više linija, ako je potrebno. To je skraćenica za svojstva flex-direction i flex-wrap. Zadani flex-flow: red nowrap; ... imovina nije naslijeđena.
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 u kojem se flex stavke prikazuju i pozicioniraju unutar flex kontejnera. Odnosi se na flex stavke. Imovina se ne nasljeđuje.
U početku, sve flex stavke imaju redosled: 0; ... Ako navedete vrijednost između -1 za element, on se pomiče na početak vremenske linije, a vrijednost 1 na kraj. Ako više fleksibilnih stavki ima istu vrijednost narudžbe, bit će prikazane prema njihovom originalnom redoslijedu.
Sintaksa
Flex-kontejner (prikaz: -webkit-flex; prikaz: flex;) .flex-item (-webkit-order: 1; red: 1;) 
Rice. 6. Prikažite redoslijed flex stavki
5. Fleksibilnost fleksibilnih stavki
Definirajući aspekt fleksibilnog rasporeda je mogućnost "preklapanja" fleksibilnih stavki promjenom njihove širine/visine (u zavisnosti od toga koja je veličina na glavnoj osi) kako bi se popunio raspoloživi prostor u osnovnoj dimenziji. Ovo se radi pomoću svojstva flex. Flex kontejner dodjeljuje slobodan prostor između svojih djece (proporcionalno njihovom omjeru savijanja i rasta) kako bi ispunio kontejner ili ih skuplja (proporcionalno njihovom omjeru savijanja i skupljanja) kako bi spriječio prelijevanje.
Flex stavka će biti potpuno nefleksibilna ako su njene 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 specificirati jednu ili sve tri vrijednosti svojstva. Imovina se ne nasljeđuje.
Sintaksa
Flex-kontejner (prikaz: -webkit-flex; display: 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 kontejneru kada dodjeljuje pozitivan bijeli prostor. Ako je zbroj vrijednosti flex-grow-a flex stavki u redu manji od 1, one zauzimaju manje od 100% slobodnog prostora. Imovina se ne nasljeđuje.
Rice. 7. Upravljanje slobodnim prostorom u traci za navigaciju pomoću flex-grow Sintaksa
Flex-kontejner (prikaz: -webkit-flex; ekran: flex;). Flex-item (-webkit-flex-grow: 3; flex-grow: 3;)
5.3. Omjer skupljanja: fleksibilno skupljanje
Svojstvo specificira koliko će se flex stavka smanjiti u odnosu na druge flex stavke kada dodjeljuje negativni bijeli prostor. Pomnoženo osnovnom veličinom flex-basis. Negativni prostor se dodjeljuje 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.
Rice. 8. Sužavanje fleksibilnih stavki u nizu Sintaksa
Flex-kontejner (prikaz: -webkit-flex; ekran: 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 je definirana na isti način kao i širina u horizontalnim načinima pisanja. Procenti su relativni u odnosu na veličinu flex kontejnera, a ako veličina nije navedena, vrijednost koja se koristi za flex-basis je veličina njegovog sadržaja. Nije naslijeđen.
Sintaksa
Flex-kontejner (prikaz: -webkit-flex; prikaz: flex;). Flex-item (-webkit-flex-basis: 100px; flex-basis: 100px;)
6. Poravnanje
6.1. Poravnanje glavne ose: justify-content
Svojstvo poravnava flex stavke prema glavnoj osi flex kontejnera tako što raspoređuje slobodan prostor koji nije zauzet flex stavkama. Kada se stavka konvertuje u flex kontejner, fleksibilne stavke se podrazumevano grupišu zajedno (osim ako za njih nije postavljena margina). Razmak se dodaje nakon izračunavanja vrijednosti margine i flex-grow. Ako bilo koja stavka ima nenulti flex-grow ili marginu: auto; , vlasništvo neće imati efekta. Imovina se ne nasljeđuje.
| vrijednosti: | |
| flex-start | Zadana vrijednost. Flex stavke su položene u smjeru dalje od početne linije flex kontejnera. |
| flex-end | Flex stavke su položene u smjeru od krajnje linije flex kontejnera. |
| centar | Flex stavke su poravnate sa središtem flex kontejnera. |
| prostor-između | Flex stavke su ravnomjerno raspoređene duž linije. Prva fleksibilna stavka je postavljena u ravnini s rubom početne linije, posljednja fleksibilna 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 redu, 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 ista, a udaljenost između prve/zadnje flex stavke i ivica flex kontejnera je polovina udaljenosti između flex stavki. |
| početni | Postavlja vrijednost svojstva na njegovu zadanu vrijednost. |
| nasljediti | Nasljeđuje vrijednost svojstva od roditeljskog elementa. |
Rice. 9. Poravnavanje stavki i dodjela slobodnog prostora pomoću svojstva Justify-Content Sintaksa
Flex-kontejner (prikaz: -webkit-flex; -webkit-justify-content: flex-start; display: flex; justify-content: flex-start;)
6.2. Poravnanje preko ose: align-items i align-self
Flex stavke se mogu poravnati s poprečnom osom trenutnog reda flex kontejnera. align-items postavlja poravnanje za sve stavke flex kontejnera, uključujući anonimne flex stavke. align-self vam omogućava da poništite ovo poravnanje za pojedinačne flex stavke. Ako je bilo koja od poprečnih margina flex stavke automatska, align-self nema efekta.
6.2.1. Align-items
Poravnava flex stavke, uključujući anonimne flex stavke, duž poprečne ose. Nije naslijeđen.
| vrijednosti: | |
| flex-start | |
| flex-end | |
| centar | |
| osnovna linija | Osnovne linije svih flex stavki uključenih u poravnanje su iste. |
| rastezanje | |
| početni | Postavlja vrijednost svojstva na njegovu zadanu vrijednost. |
| nasljediti | Nasljeđuje vrijednost svojstva od roditeljskog elementa. |
Rice. 10. Poravnajte predmete u kontejneru okomito Sintaksa
Flex-kontejner (prikaz: -webkit-flex; -webkit-align-items: flex-start; display: flex; align-items: flex-start;)
6.2.2. Align-self
Svojstvo je odgovorno za poravnavanje jedne flex stavke sa visinom flex kontejnera. Nadjačava poravnanje specificirano od strane align-items. Nije naslijeđen.
| vrijednosti: | |
| auto | Zadana vrijednost. Flex stavka koristi poravnanje navedeno u svojstvu align-items flex kontejnera. |
| flex-start | Gornja ivica flex stavke postavljena je u ravni sa linijom savijanja (ili razmakom, s obzirom na navedenu marginu i ivicu elementa) koja prolazi kroz ishodište poprečne ose. |
| flex-end | Donja ivica flex stavke je postavljena u ravni sa linijom savijanja (ili razmakom, s obzirom na specificiranu marginu i ivicu elementa) koja prolazi kroz kraj poprečne ose. |
| centar | Margine flex stavke su centrirane na poprečnoj osi unutar fleksibilne linije. |
| osnovna linija | Flex stavka je poravnata s osnovnom linijom. |
| rastezanje | Ako je unakrsna 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 njegovu zadanu vrijednost. |
| nasljediti | Nasljeđuje vrijednost svojstva od roditeljskog elementa. |
Rice. 11. Poravnajte pojedinačne flex stavke Sintaksa
Flex-kontejner (prikaz: -webkit-flex; prikaz: flex;). Flex-item (-webkit-align-self: centar; align-self: centar;)
6.3. Poravnavanje redova flex kontejnera: align-content
Svojstvo poravnava redove u flex kontejneru kada postoji dodatni prostor na poprečnoj osi, slično kao kada se pojedinačne stavke poravnavaju na glavnoj osi pomoću svojstva justify-content. Svojstvo nema utjecaja na jednoliner flex kontejner. Nije naslijeđen.
| vrijednosti: | |
| flex-start | Linije su naslagane prema početku flex kontejnera. Rub prvog reda se postavlja blizu ivice flex kontejnera, svaki sledeći red se postavlja blizu prethodnog reda. |
| flex-end | Linije su naslagane prema kraju flex kontejnera. Rub posljednjeg reda se postavlja blizu ruba flex kontejnera, svaki prethodni red se postavlja blizu sljedećeg reda. |
| centar | Linije su naslagane prema sredini flex kontejnera. Redovi su blizu jedan drugom i poravnati sa središtem flex kontejnera sa jednakim razmakom između početne ivice sadržaja flex kontejnera i prvog reda, i između krajnjeg ruba sadržaja flex kontejnera i poslednjeg reda. |
| 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 kontejneru, ova vrijednost je identična flex-start. Inače, ivica prve linije je postavljena blizu početne ivice sadržaja flex kontejnera, a ivica poslednjeg reda je postavljena blizu zadnje ivice sadržaja flex kontejnera. Ostale linije su raspoređene tako da je razmak između bilo koje dvije susjedne linije isti. |
| prostor-okolo | Linije su ravnomjerno raspoređene u fleksibilnom kontejneru sa polovičnim razmakom 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 koje dvije susjedne linije isti, a razmak između prvih/zadnjih redaka i rubova sadržaja flex kontejnera je polovina razmaka između redova. |
| rastezanje | Zadana vrijednost. Redovi fleksibilnih predmeta ravnomjerno se protežu kako bi popunili sav raspoloživi prostor. Ako je preostali slobodni prostor negativan, ova vrijednost je identična flex-start. U suprotnom, slobodni prostor će biti jednako podijeljen između svih linija, povećavajući njihovu bočnu veličinu. |
| početni | Postavlja vrijednost svojstva na njegovu zadanu vrijednost. |
| nasljediti | Nasljeđuje vrijednost svojstva od roditeljskog elementa. |
Rice. 12. Višelinijsko poravnanje flex stavki Sintaksa
Flex-kontejner (prikaz: -webkit-flex; -webkit-flex-flow: premotavanje reda; -webkit-align-content: flex-end; display: flex; flex-flow: premotavanje reda; align-content: flex-end ; visina: 100px;)
Ništa ne miruje, razvijaju se tehnologije i standardi, pojavljuju se nove tehnike i metode postavljanja sajta, na primer, raspored sa tabelarnim elementima, koji iz objektivnih razloga nismo razmatrali, zamenjen je rasporedom sa plutajućim elementima.
Mnogi uređivači koda imaju zgodan dodatak za brzo označavanje Emmet-a koji je ugrađen prema zadanim postavkama ili je dostupan za preuzimanje, omogućava vam da napravite glavnu oznaku ovog primjera na sljedeći način: odjeljak> div * 3> lorem+ Tab (vrijednost lorem generira tekst prikazan na slici ispod).
Napominjemo da smo uz malo truda dobili da kolone našeg rasporeda budu iste visine bez obzira na njihov sadržaj, što je odlično. Elementi
nisu fleksibilne stavke prema zadanim postavkama i nalaze se u toku treći element
Rezultat našeg primjera:
Inline flex kontejner
Po analogiji sa blok elementima, flex kontejneri mogu biti inline. Pogledajmo koja je razlika između inline flex kontejnera i blokova. U prethodnom primjeru, pogledali smo korištenje blok kontejnera, baš kao i običan blok element, proteže se cijelom širinom ekrana i ponaša se kao običan element na nivou bloka. Što se tiče inline flex kontejnera, oni postaju regularni inline elementi dok elementi ostaju fleksibilni.
U sljedećem primjeru razmotrit ćemo ovu razliku, budući da prethodni primjer ne bi bio indikativan iz razloga što veličina podređenih flex elemenata nije eksplicitno postavljena, a kao rezultat toga, naš kontejner, bilo da je inline ili blok, ponašao bi se isto i zauzimao bi cijelu širinu ekrana.
U ovom primjeru smo postavili dva mala slova i dva blok flex kontejnere, unutar njih smo postavili pet elementi
Za brzo generiranje sličnog rasporeda koristite Emmet ukucajte sljedeće u uređivaču: div.inline-flex * 2> div * 5 + Tab, i istu stvar s drugom klasom div.flex * 2> div * 5 + Tab.
Pogledajte rezultat našeg primjera, razlika između inline i block flex kontejnera bi vam sada trebala biti očigledna. Umetnuti kontejner se ponaša kao inline element i zauzima širinu koju zahtijevaju samo njegovi podređeni flex elementi, a blok flex kontejner, bez obzira na veličinu njegovih flex djece, zauzima cijelu širinu ekrana.
Rezultat našeg primjera:
Rice. 205 Primjer razlike između inline-flex kontejnera i flex kontejnera.
Smjer? U kom pravcu?
Smjer savitljivih elemenata formira se na osnovu položaja dvije osi: glavna osovina flex kontejner i njegov poprečna os koji se uvek nalazi okomito na glavnu... Glavna os u ltr smjeru (globalni HTML atribut dir, ili svojstvo CSS direction s vrijednošću ltr) je pozicionirana s lijeva na desno, a poprečna os je od vrha do dna (ovo je zadano), za rtl vrijednost se odražava u skladu s tim.
U ovom članku ćemo vas provesti kroz 5 tehnika za rješavanje osnovnih problema CSS izgleda. Također smo dodali nekoliko studija slučaja iz stvarnog svijeta kako bismo ilustrirali kako se ove tehnike mogu koristiti.
Pravljenje kolona jednake visine
U početku može izgledati prilično jednostavno, ali ovaj zadatak ponekad može biti neugodan. Korištenje min-height neće raditi, jer kada se pojavi neki sadržaj, stupci će odmah početi mijenjati veličinu.
Rješavanje ovog problema sa flexboxom također nije rješenje, jer će kolone kreirane flexbox CSS-om u početku imati jednaku dužinu. Samo treba da uvedemo "fluidni" model i onda se uverimo da su svojstva flex-direction i align-items ispravno postavljena.
Preuređivanje elemenata
Nekada u prošlosti, dinamička promena redosleda određenih elemenata bila je zadatak koji je mogao da uradi samo JavaScript. Ali sa pojavom flexboxa, ova poteškoća se više ne pojavljuje, jer rješenje leži u samo jednom CSS svojstvu.
Svojstvo order, koje nam omogućava da koristimo flexbox raspored, govori samo za sebe. Omogućava nam da promijenimo bilo koji broj "fleksibilnih" elemenata i njihov redoslijed. Jedini parametar ovog svojstva je cijeli broj, koji određuje poziciju ovog elementa, što je veći broj - veći je prioritet ovog elementa.
Svojstvo naloga ima mnogo namjena. Ako želite vidjeti neke od njih, možete pogledati ovaj, u kojem koristimo ovu tehniku za kreiranje responzivnog odjeljka za komentare.
Horizontalno i vertikalno centriranje
Usklađivanje u CSS-u je još uvijek prilično ozbiljan problem. Čak i ako se okrenete tražilici, ona će vam dati gomilu rješenja, od kojih će većina nuditi korištenje tablica i transformacija, što nije sasvim prikladno ako govorimo o responsive layoutu.
Jednostavno rješenje bi bio izgled flexbox-a, s kojim se elementi mogu trivijalno pomicati duž koordinatne ravni, poravnavajući je kako želite.
Da vidite ovo rješenje na djelu i naučite više o njemu, možete otići na ono u istoj temi.
Kreirajte potpuno prilagodljive mreže
Mnogi webmasteri se oslanjaju na različite CSS biblioteke i okvire za kreiranje responzivnih mreža. Najrasprostranjeniji alat u ovoj oblasti je Bootstrap. Međutim, nije jedini te vrste. Na stotine takvih asistenata je već razvijeno. Svi oni funkcionišu relativno dobro i mogu se pohvaliti impresivnim skupom opcija, ali nikada se neće riješiti jednog problema – on je glomazan. Stoga, ako ste osoba koja voli sve raditi sama, ili jednostavno ne želite da stavljate cijeli okvir zarad grida, onda će vam flexbox layout pomoći!
Red u flexbox mreži je samo kontejner. Horizontalni stupci unutar njega mogu biti bilo koji broj stavki, čija se veličina postavlja pomoću flex-a. Ovaj model će se prilagoditi veličini bilo kojeg ekrana, tako da bi krajnji rezultat trebao izgledati dobro na većini uređaja. Međutim, ako odlučimo da nema dovoljno prostora na horizontalnoj ravni, onda se raspored jednostavno može pretvoriti u vertikalni pomoću medijskog upita.
Promjenjivost ove tehnike možete vidjeti u uputama: Najlakši način za kreiranje.
Kreiranje fiksnog podnožja
Flexbox CSS ima jednostavno rješenje i za ovaj problem. Kreiranjem stranice koja sadrži usidreno podnožje napisano preko flex stavki, ne morate više brinuti da će se pomicati.
Primjena prikaza: flex na body tag će nam omogućiti da koristimo "flex mode" kada gradimo cijeli raspored. Kada sve bude spremno, glavni dio stranice će biti jedan "fleksibilni" element, a podnožje drugi, to će pojednostaviti manipulaciju njihovim pozicijama.
Više informacija o ovoj tehnici pronaći ćete u članku "".
Zaključak
Većina pretraživača danas podržava fleksibilan izgled, što znači da je sigurno reći da je flexbox spreman pomoći mnogim programerima.
Nadam se da vam je ovaj članak bio od pomoći i da ste poboljšali svoje CSS vještine. Sretno!
Flexboxovi su idealni za kreiranje široko korištenih izgleda web stranica, kao što je trokolona, takozvani izgled „Sveti gral“, gdje svi stupci moraju biti pune visine, bez obzira na njihov sadržaj. U ovom slučaju, u izvornom kodu glavni sadržaj ide prije navigacije, a na samoj stranici glavni sadržaj ide nakon navigacije.
Volim ovo.
Prije pojave flexboxa, takav raspored je bilo prilično teško dobiti bez upotrebe hakova. Programeri su često morali raditi stvari poput dodavanja dodatnih oznaka, primjene negativnih margina i drugih trikova kako bi se stvari ispravno postavile bez obzira na volumen sadržaja ili veličinu ekrana. Ali, kao što gornji primjer pokazuje, flexbox je mnogo lakši.
Ovdje je sažetak koda. U ovom primjeru, #main element činimo flex kontejnerom, a zaglavlje i podnožje ostavljamo kao blok elemente. Drugim riječima, samo srednji dio postaje flexbox. Evo isječka koji ga čini fleksibilnim kontejnerom.
#main (zaslon: flex; min-visina: calc (100vh - 40vh);)
Samo koristite display: flex da kreirate flex kontejner. Imajte na umu da smo također postavili minimalnu visinu pomoću funkcije calc () i postavili #main na 100% visine prozora za prikaz. oduzeti visina kape i podruma (po 20vh). Ovo osigurava da raspored zauzima punu visinu ekrana, čak i ako ima malo sadržaja. Kao rezultat toga, podnožje se nikada neće podići i neće ostaviti prazan prostor ispod ako je sadržaj manji od visine ekrana.
Izračunavanje min-visine bilo je dovoljno jednostavno s obzirom da smo primijenili box-sizing: border-box na sve elemente. Ako nismo, onda bismo morali da dodamo vrijednost dodatka zbiru za oduzimanje.
Nakon ugradnje flex kontejnera, bavimo se flex stavkama.
#main> article (flex: 1;) #main> nav, #main> aside (flex: 0 0 20vw; background: beige;) #main> nav (red: -1;)
Svojstvo flex je skraćenica za svojstva flex-grow, flex-shrink i flex-basis. U prvom slučaju, napisali smo samo jednu vrijednost, tako da flex postavlja svojstvo flex-grow. U drugom slučaju, napisali smo sve tri vrijednosti za
