Složeni izgledi pomoću flex css primjera. Flexbox nekoliko korisnih primjera za rad

U ovom ćemo članku pogledati 5 tehnika koje rješavaju glavne probleme CSS izgleda. Također smo uključili nekoliko praktičnih primjera iz stvarnih projekata koji jasno pokazuju kako se ove tehnike mogu koristiti.

Stvaranje stupaca iste visine

U početku može izgledati vrlo jednostavno, ali ovaj zadatak ponekad može biti dosadan. Korištenje min-height neće funkcionirati jer čim se neki sadržaj pojavi, veličina stupaca će se odmah početi mijenjati.

Rješavanje ovog problema s flexboxom također nije rješenje budući da će stupci stvoreni s flexbox CSS-om u početku biti jednake duljine. Samo trebamo uvesti "fleksibilni" model i zatim se uvjeriti da su svojstva flex-direction i align-items ispravno postavljena.

.container ( display: flex; /* Inicijalizirajte flex model */ /* Ovo su zadane vrijednosti, ali ih još uvijek možete promijeniti */ flex-direction: row; /* Stavke unutar spremnika bit će postavljene vodoravno */ align -items : stretch; /* Elementi unutar spremnika bit će rastegnuti cijelom svojom visinom */ )

Preuređivanje elemenata

Nekada davno, dinamičko mijenjanje redoslijeda određenih elemenata bio je zadatak koji je mogao obaviti samo JavaScript. Ali s dolaskom flexboxa, ove poteškoće više ne postoje, jer rješenje leži u samo jednom CSS svojstvu.

Svojstvo order, koje dopušta korištenje flexbox izgleda, govori samo za sebe. Omogućuje nam promjenu bilo kojeg broja "fleksibilnih" elemenata i njihov redoslijed. Jedini parametar ovog svojstva je cijeli broj koji određuje poziciju ovog elementa; što je veći broj, to je veći prioritet ovog elementa.

.container( display: flex; ) /* Opadajući broj prioriteta */ .blue( redoslijed: 3; ) .red( redoslijed: 2; ) .green( redoslijed: 1; )

Svojstvo reda ima mnogo namjena. Ako želite vidjeti neke od njih, možete pogledati ovaj, gdje koristimo ovu tehniku ​​za stvaranje responzivnog odjeljka komentara.

Horizontalno i okomito centriranje

Usklađivanje u CSS-u je još uvijek prilično veliki problem. Čak i ako se obratite tražilici, ona će vam vratiti hrpu rješenja, od kojih će većina sugerirati korištenje tablica i transformacija, što nije sasvim prikladno ako govorimo o prilagodljivom izgledu.

Jednostavno rješenje bio bi flexbox layout, s kojim se elementi jednostavno pomiču po koordinatnoj ravnini, poravnavajući kako želite.

.container( display: flex; /* Centrirano oko glavne osi */ justify-content: center; /* Centrirano oko sporedne osi */ align-items: center; )

Da biste vidjeli ovo rješenje na djelu i saznali više o njemu, možete otići na , koji je u istoj temi.

Stvaranje potpuno responzivnih mreža

Mnogi webmasteri oslanjaju se na razne CSS biblioteke i okvire za stvaranje responzivnih mreža. Najčešći alat u ovom području je Bootstrap. Međutim, on nije jedini takve vrste. Stotine sličnih pomoćnika već su razvijene. Svi oni rade relativno dobro i imaju impresivan raspon opcija, no nikada se neće riješiti jednog problema - glomaznosti. Stoga, ako ste osoba koja voli sve raditi sama ili jednostavno ne želite instalirati cijeli framework radi grida, onda će vam flexbox layout pomoći!

Red u rešetki flexboxa samo je spremnik. Horizontalni stupci unutar njega mogu biti bilo koji broj elemenata, čija se veličina postavlja pomoću flex-a. Ovaj se model prilagođava svakoj veličini zaslona, ​​tako da bi krajnji rezultat trebao izgledati dobro na većini uređaja. Međutim, ako odlučimo da nema dovoljno vodoravnog prostora na zaslonu, tada se izgled jednostavno može pretvoriti u okomiti pomoću medijskog upita.

.container( display: flex; ) /* Klase za svaki stupac s veličinom. */ .col-1( flex: 1; ) .col-2( flex: 2; ) @media (max-width: 800px)( .container( /* Pretvori vodoravni objekt u okomiti. */ flex- smjer: stupac ;) )

Varijabilnost ove tehnike možete vidjeti u uputama: Najlakši način za stvaranje.

Stvaranje fiksnog podnožja

Flexbox CSS ima jednostavno rješenje i za ovaj problem. Stvaranjem stranice koja sadrži ljepljivo podnožje, ispisano kroz flex elemente, više neće biti potrebno razmišljati o tome da bi se moglo pomaknuti.

Primjena display: flex na oznaku body omogućit će nam korištenje "flex mode" kroz cijeli izgled. Kada je sve spremno, glavni dio stranice bit će jedan "fleksibilni" element, a podnožje drugi, što će pojednostaviti manipulaciju njihovim pozicijama.

html( height: 100%; ) body( display: flex; flex-direction: column; height: 100%; ) .main( /* Glavni odjeljak ispunit će sve što je dostupno slobodno mjesto na stranici koja nije zauzeta podnožjem */ flex: 1 0 auto; ) podnožje( /* Podnožje će dodijeliti točno onoliko prostora koliko mu je potrebno i ni piksel više */ flex: 0 0 auto; )

Više informacija o ovoj tehnici pronaći ćete u članku "".

Zaključak

Većina današnjih preglednika podržava fleksibilni način izgleda, š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 znanje CSS-a. Sretno!

CSS flexbox (Fleksibilni modul rasporeda okvira)- fleksibilni modul rasporeda kontejnera - je način rasporeda elemenata, koji se temelji na ideji osi.

Flexbox se sastoji od fleksibilni spremnik I fleksibilni predmeti. Fleksibilni elementi mogu se poredati u niz ili stupac, a preostali slobodni prostor raspoređuje se između njih na razne načine.

Modul flexbox omogućuje rješavanje sljedećih zadataka:

• Rasporedite elemente u jednom od četiri smjera: slijeva nadesno, zdesna nalijevo, odozgo prema dolje ili odozdo prema gore.
• Zaobiđite redoslijed prikaza elemenata.
• Automatski odredite veličinu elemenata tako da stanu u raspoloživi prostor.
• Riješite problem horizontalnim i vertikalnim centriranjem.
• Premještajte predmete unutar spremnika bez prelijevanja.
• Napravite stupce iste visine.
• Stvaranje pritisnuto na dno stranice.

Flexbox rješava specifične probleme - stvaranje jednodimenzionalnih izgleda, na primjer, navigacijske trake, budući da se flex elementi mogu postaviti samo duž jedne od osi.

Možete pročitati popis trenutnih problema modula i rješenja za njih u različitim preglednicima u članku 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 fleksibilnog protoka i način snimanja određuju podudarnost ovih izraza s fizičkim smjerovima: gore/desno/dolje/lijevo, osi: okomito/vodoravno i dimenzijama: širina/visina.

Glavna os— os duž koje su položeni savitljivi elementi. Proteže se u glavnu dimenziju.

Glavni početak i glavni kraj— linije koje definiraju početnu i krajnju stranu fleksibilnog spremnika, u odnosu na koje su postavljeni fleksibilni elementi (počevši od glavnog početka prema glavnom kraju).

Glavna veličina) - širina ili visina fleksibilnog spremnika ili fleksibilnih stavki, ovisno o tome koja je od njih u glavnoj dimenziji, određuje glavnu veličinu fleksibilnog spremnika ili fleksibilne stavke.

Križna os- os okomita na glavnu os. Proteže se u poprečnoj dimenziji.

Križni početak i križni kraj— linije koje definiraju početnu i završnu stranu poprečne osi, u odnosu na koju su položeni savitljivi elementi.

Veličina križa— širina ili visina fleksibilnog spremnika ili fleksibilnih predmeta, što god je u poprečnoj dimenziji, njihova je poprečna dimenzija.

Riža. 2. Način reda i stupca

2. Flex kontejner

Flex spremnik postavlja novi fleksibilni kontekst oblikovanja za svoj sadržaj. Fleksibilni spremnik nije blok spremnik, tako da CSS svojstva kao što su float, clear, vertical-align ne rade za podređene elemente. Također, na flex spremnik ne utječu svojstva column-* koja stvaraju stupce u tekstu i pseudo-elements::first-line i::first-letter.

Flexbox model izgleda povezan je s određena vrijednost CSS prikazuje svojstva nadređenog HTML elementa koji sadrži podređene blokove. Za kontrolu elemenata pomoću ovog modela morate postaviti svojstvo prikaza na sljedeći način:

Flex-container ( /*generira flex spremnik na razini bloka*/ display: -webkit-flex; display: flex; ) .flex-container ( /*generira flex spremnik na razini linije*/ display: -webkit-inline- flex; zaslon: inline-flex; )

Nakon postavljanja ovih vrijednosti svojstava, svaki podređeni element automatski postaje fleksibilni element, poredajući se u jedan red (duž glavne osi). U ovom slučaju blok i inline podređeni elementi ponašaju se isto, tj. Širina blokova jednaka je širini njihovog sadržaja, uzimajući u obzir unutarnje margine i granice elementa.

Riža. 3. Poravnanje elemenata u flexbox modelu

Ako nadređeni blok sadrži tekst ili slike bez omotača, oni postaju anonimne fleksibilne stavke. Tekst se poravnava s gornjim rubom bloka spremnika, a visina slike postaje jednaka visini bloka, tj. deformiran je.

3. Flex elementi

Flex stavke su blokovi koji predstavljaju sadržaj flex spremnika u toku. Flex spremnik uspostavlja novi kontekst oblikovanja za svoj sadržaj, što uzrokuje sljedeće značajke:

• Za fleksibilne stavke, njihova vrijednost svojstva prikaza je zaključana. Vrijednost prikaza: inline-block; i prikaz: tablica-ćelija; procijenjeno u prikazu: blok; .
• Bijeli razmak između stavki nestaje: ne postaje vlastita fleksibilna stavka, čak i ako je tekst međustavki omotan u anonimnu fleksibilnu stavku. Sadržaj anonimne flex stavke ne može se stilizirati, ali će naslijediti stilove (kao što su opcije fonta) iz flex spremnika.
• Apsolutno pozicionirani flex element ne sudjeluje u layoutu flex layout-a.
• Rubovi susjednih savitljivih elemenata se ne skupljaju.
• Postotna margina i vrijednosti popune izračunavaju se iz unutarnje veličine bloka koji ih sadrži.
• margina: auto; proširiti, apsorbirajući dodatni prostor u odgovarajućoj dimenziji. Mogu se koristiti za poravnavanje ili guranje susjednih savitljivih predmeta.
• Auto minimalna veličina fleksibilne stavke zadano postavljaju minimalnu veličinu svog sadržaja, tj. min-width: auto; . Za spremnike koji se mogu pomicati, automatska minimalna veličina obično je nula.

4. Redoslijed i usmjerenje prikaza fleksibilnih stavki

Sadržaj fleksibilnog spremnika može se postaviti u bilo kojem smjeru i bilo kojim redoslijedom (preslagivanje fleksibilnih stavki unutar spremnika utječe samo na vizualno iscrtavanje).

4.1. Smjer glavne osi: smjer savijanja

Svojstvo se odnosi na fleksibilni spremnik. Upravlja smjerom glavne osi duž koje se polažu savitljivi elementi, u skladu s trenutni režim zapisa. Nije naslijeđeno.

flex-direction
Vrijednosti:
red	Zadana vrijednost je slijeva nadesno (u rtl-u, zdesna nalijevo). Flex elementi su postavljeni u nizu. Početak (main-start) i kraj (main-end) smjera glavne osi odgovaraju početku (inline-start) i kraju (inline-end) osi linije (inline-axis).
red-obrnuti	Smjer je s desna na lijevo (u rtl s lijeva na desno). Flex elementi su položeni u liniji u odnosu na desni rub spremnika (u rtl - lijevi).
stupac	Smjer od vrha prema dolje. Flex elementi su postavljeni u stupac.
stupac-revers	Stupac s elementima obrnutim redoslijedom, odozdo prema gore.
početni
naslijediti

Riža. 4. Svojstvo fleksibilnog smjera za jezike koji se pišu slijeva nadesno

Sintaksa

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

4.2. Upravljanje višelinijskim fleksibilnim spremnikom: flex-wrap

Svojstvo određuje hoće li flex spremnik biti jednolinijski ili višelinijski, a također postavlja smjer poprečne osi, koja određuje smjer u kojem će biti položene nove linije flex spremnika.

Prema zadanim postavkama, fleksibilne stavke su složene u jednu liniju, duž glavne osi. Ako se prelijevaju, proširit će se izvan graničnog okvira fleksibilnog spremnika. Imovina se ne nasljeđuje.

Riža. 5. Višelinijska kontrola korištenjem svojstva flex-wrap za LTR jezike

Sintaksa

Flex-spremnik ( display: -webkit-flex; -webkit-flex-wrap: wrap; display: flex; flex-wrap: wrap; )

4.3. Kratki sažetak o smjeru i više linija: flex-flow

Svojstvo vam omogućuje definiranje smjerova glavne i poprečne osi, kao i mogućnost pomicanja fleksibilnih elemenata, ako je potrebno, na nekoliko linija. Ovo je skraćenica za svojstva flex-direction i flex-wrap. Zadana vrijednost flex-flow: row nowrap; . imovina se ne nasljeđuje.

Sintaksa

Flex-spremnik ( display: -webkit-flex; -webkit-flex-flow: prelamanje redaka; display: flex; flex-flow: prelamanje redaka; )

4.4. Prikaz redoslijeda fleksibilnih stavki: poredak

Svojstvo definira redoslijed kojim se flex stavke prikazuju i raspoređuju unutar flex spremnika. Odnosi se na fleksibilne predmete. Imovina se ne nasljeđuje.

U početku sve fleksibilne stavke imaju redoslijed: 0; . Kada navedete vrijednost -1 za element, on se pomiče na početak vremenske trake, a vrijednost 1 pomiče se na kraj. Ako više fleksibilnih stavki ima istu vrijednost narudžbe, one će se prikazati prema izvornoj narudžbi.

Sintaksa

Flex-spremnik ( display: -webkit-flex; display: flex; ) .flex-item ( -webkit-order: 1; order: 1; )
Riža. 6. Prikaz redoslijeda fleksibilnih stavki

5. Fleksibilnost flex elemenata

Definirajući aspekt fleksibilnog izgleda je mogućnost "savijanja" fleksibilnih stavki, mijenjajući njihovu širinu/visinu (ovisno o veličini na glavnoj osi) kako bi se ispunio raspoloživi prostor u glavnoj dimenziji. To se radi korištenjem svojstva flex. Fleksibilni spremnik raspodjeljuje slobodan prostor između svojih potomaka (proporcionalno njihovom omjeru savijanja i rasta) kako bi ispunio spremnik ili ih skuplja (proporcionalno njihovom omjeru savijanja i skupljanja) kako bi spriječio prelijevanje.

Fleksibilni element će biti potpuno "nefleksibilan" ako su njegove vrijednosti za rast i savijanje nula, a "fleksibilan" u suprotnom.

5.1. Postavljanje fleksibilnih dimenzija 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 navesti jednu ili sve tri vrijednosti svojstva. Imovina se ne nasljeđuje.

Sintaksa

Flex-spremnik ( display: -webkit-flex; display: flex; ) .flex-item ( -webkit-flex: 3 1 100px; -ms-flex: 3 1 100px; flex: 3 1 100px; )

5.2. Faktor rasta: flex-grow

Svojstvo određuje stopu rasta jednog savitljivog elementa u odnosu na druge savitljive elemente u savitljivom spremniku prilikom distribucije pozitivnih slobodan prostor. Ako je zbroj vrijednosti flex-growa flex stavki u nizu manji od 1, one zauzimaju manje od 100% slobodnog prostora. Imovina se ne nasljeđuje.

Riža. 7. Upravljajte prostorom na navigacijskoj traci s Flex-Growom

Sintaksa

Flex-spremnik ( display: -webkit-flex; display: flex; ) .flex-item ( -webkit-flex-grow: 3; flex-grow: 3; )

5.3. Omjer kompresije: flex-shrink

Svojstvo specificira omjer kompresije fleksibilne stavke u odnosu na druge fleksibilne stavke pri distribuciji negativnog slobodnog prostora. Pomnoženo s veličinom fleksibilne baze. Negativan prostor dodjeljuje se proporcionalno tome koliko se stavka može smanjiti, tako da se, na primjer, mala savitljiva stavka neće smanjiti na nulu sve dok savitljiva stavka ne bude osjetno manja veća veličina. Imovina se ne nasljeđuje.

Riža. 8. Sužavanje savitljivih predmeta u nizu

Sintaksa

Flex-spremnik ( display: -webkit-flex; display: flex; ) .flex-item ( -webkit-flex-shrink: 3; flex-shrink: 3; )

5.4. Osnovna veličina: flex-baza

Svojstvo postavlja početnu osnovnu veličinu fleksibilne stavke prije dodjele slobodnog prostora prema faktorima fleksibilnosti. Za sve vrijednosti osim auto i content, osnovna fleksibilna veličina definirana je isto kao širina u vodoravnim načinima pisanja. Postotne vrijednosti definirane su u odnosu na veličinu flex spremnika, a ako veličina nije navedena, vrijednost koja se koristi za flex-basis je dimenzija njegovog sadržaja. Nije naslijeđeno.

Sintaksa

Flex-spremnik ( display: -webkit-flex; display: flex; ) .flex-item ( -webkit-flex-basis: 100px; flex-basis: 100px; )

6. Usklađivanje

6.1. Poravnanje glavne osi: justify-content

Svojstvo poravnava fleksibilne stavke duž glavne osi fleksibilnog spremnika, raspodjeljujući slobodni prostor nezauzet fleksibilnim stavkama. Kada se stavka pretvori u flex spremnik, flex stavke se prema zadanim postavkama grupiraju zajedno (osim ako nemaju postavljene margine). Praznine se dodaju nakon izračuna vrijednosti marže i fleksibilnog rasta. Ako neki elementi imaju flex-grow ili marginu različitu od nule: auto; , svojstvo neće imati učinka. Imovina se ne nasljeđuje.

Vrijednosti:
flex-start	Zadana vrijednost. Flex elementi su postavljeni u smjeru koji počinje od početne linije flex kontejnera.
savitljivi kraj	Flex predmeti se polažu u smjeru od krajnje linije fleksibilnog spremnika.
centar	Flex stavke su poravnate sa središtem Flex spremnika.
razmak između	Flex elementi su ravnomjerno raspoređeni duž linije. Prva fleksibilna stavka postavljena je u ravnini s rubom početne crte, posljednja fleksibilna stavka postavljena je u ravnini s rubom završne linije, a preostale fleksibilne stavke na liniji razmaknute su tako da je udaljenost između bilo koje dvije susjedne stavke jednaka isto. Ako je preostali slobodni prostor negativan ili postoji samo jedna flex stavka po retku, ova vrijednost je identična parametru flex-start.
prostor-okolo	Fleksibilne stavke na liniji su raspoređene tako da je udaljenost između bilo koje dvije susjedne fleksibilne stavke jednaka, a udaljenost između prve/zadnje fleksibilne stavke i rubova fleksibilnog spremnika je polovica udaljenosti između fleksibilnih stavki.
početni	Postavlja vrijednost svojstva na zadanu vrijednost.
naslijediti	Nasljeđuje vrijednost svojstva od nadređenog elementa.

Riža. 9. Poravnavanje elemenata i raspodjela slobodnog prostora korištenjem svojstva justify-content

Sintaksa

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

6.2. Poravnanje poprečne osi: align-items i align-self

Flex elementi se mogu poravnati duž poprečne osi strujne linije fleksibilnog spremnika. align-items postavlja poravnanje za sve stavke flex spremnika, uključujući anonimne flex stavke. align-self vam omogućuje nadjačavanje ovog poravnanja za pojedinačne fleksibilne stavke. Ako je bilo koja od križnih margina savitljivog elementa postavljena na auto, align-self nema učinka.

6.2.1. Poravnaj stavke

Svojstvo poravnava fleksibilne elemente, uključujući anonimne fleksibilne elemente, duž poprečne osi. Nije naslijeđeno.

Vrijednosti:
flex-start
savitljivi kraj
centar
Osnovna linija	Osnove svih fleksibilnih stavki uključenih u poravnanje su iste.
protežu se
početni	Postavlja vrijednost svojstva na zadanu vrijednost.
naslijediti	Nasljeđuje vrijednost svojstva od nadređenog elementa.

Riža. 10. Okomito poravnavanje elemenata u spremniku

Sintaksa

Flex-spremnik ( display: -webkit-flex; -webkit-align-items: flex-start; display: flex; align-items: flex-start; )

6.2.2. Poravnajte se

Svojstvo je odgovorno za poravnavanje jednog savitljivog elementa prema visini savitljivog spremnika. Nadjačava poravnanje određeno pomoću align-items. Nije naslijeđeno.

Vrijednosti:
auto	Zadana vrijednost. Element flex koristi poravnanje navedeno u svojstvu align-items spremnika flex.
flex-start	Gornji rub savitljivog elementa postavlja se uz liniju savijanja (ili na udaljenosti, uzimajući u obzir navedene margine i granice elementa) koja prolazi kroz početak poprečne osi.
savitljivi kraj	Donji rub savitljivog elementa postavlja se uz liniju savijanja (ili na udaljenosti, uzimajući u obzir navedene margine i granice elementa) koja prolazi kroz kraj poprečne osi.
centar	Rub savitljivog elementa centriran je duž poprečne osi unutar savitljive linije.
Osnovna linija	Fleksibilni element je poravnat s osnovnom linijom.
protežu se	Ako je unakrsna veličina fleksibilne stavke auto i nijedna od njegovih vrijednosti unakrsne margine nije auto, stavka je rastegnuta. Zadana vrijednost.
početni	Postavlja vrijednost svojstva na zadanu vrijednost.
naslijediti	Nasljeđuje vrijednost svojstva od nadređenog elementa.

Riža. 11. Poravnavanje pojedinačnih savitljivih stavki

Sintaksa

Flex-spremnik ( display: -webkit-flex; display: flex; ) .flex-item ( -webkit-align-self: center; align-self: center; )

6.3. Poravnavanje linija fleksibilnog spremnika: align-content

Svojstvo poravnava retke u fleksibilnom spremniku kada postoji dodatni prostor na poprečnoj osi, slično poravnanju pojedinačnih stavki na glavnoj osi pomoću svojstva justify-content. Svojstvo ne utječe na jednolinijski fleksibilni spremnik. Nije naslijeđeno.

Vrijednosti:
flex-start	Redovi se slažu prema početku fleksibilnog spremnika. Rub prve linije postavlja se blizu ruba flex spremnika, svaka sljedeća linija se postavlja blizu prethodne linije.
savitljivi kraj	Redovi se slažu prema kraju fleksibilnog spremnika. Rub posljednjeg retka je postavljen blizu ruba flex spremnika, svaki prethodni red je postavljen blizu sljedećeg retka.
centar	Redovi se slažu prema sredini fleksibilnog spremnika. Redovi su blizu jedan uz drugog i poravnati sa središtem fleksibilnog spremnika, s jednakom udaljenošću između početnog ruba sadržaja fleksibilnog spremnika i prvog reda te između krajnjeg ruba sadržaja fleksibilnog spremnika i posljednjeg reda.
razmak između	Redovi su ravnomjerno raspoređeni u fleksibilnoj posudi. Ako je preostali slobodni prostor negativan ili postoji samo jedna flex linija u flex spremniku, ova vrijednost je identična flex-startu. U suprotnom, rub prvog retka postavlja se blizu početnog ruba sadržaja fleksibilnog spremnika, a rub zadnjeg retka nalazi se blizu krajnjeg ruba sadržaja fleksibilnog spremnika. Preostale linije su raspoređene tako da je udaljenost između bilo koje dvije susjedne linije jednaka.
prostor-okolo	Linije su ravnomjerno raspoređene u fleksibilnom spremniku s pola razmaka na oba kraja. Ako je preostali slobodni prostor negativan, ova vrijednost je identična središnjem centru. U suprotnom, linije su raspoređene tako da je udaljenost između bilo koje dvije susjedne linije jednaka, a udaljenost između prvih/posljednjih linija i rubova sadržaja flex spremnika je polovica udaljenosti između linija.
protežu se	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-startu. Inače će slobodni prostor biti ravnomjerno podijeljen između svih redaka, 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 savitljivih elemenata

Sintaksa

Flex-container ( display: -webkit-flex; -webkit-flex-flow: row wrap; -webkit-align-content: flex-end; display: flex; flex-flow: row wrap; align-content: flex-end ; visina: 100px; )

Flexboxovi su idealni za izradu često korištenih izgleda web stranice, kao što je layout s tri stupca, takozvani “Holy Grail”, gdje svi stupci moraju biti pune visine, bez obzira na njihov sadržaj. U isto vrijeme, u izvorni kod glavni sadržaj dolazi prije navigacije, a na samoj stranici glavni sadržaj dolazi nakon navigacije.

Kao ovo.

Policajac

Prije Flexboxa ovaj je izgled bilo prilično teško postići bez korištenja nekih hakova. Programeri su često morali raditi stvari poput dodavanja dodatnog označavanja, primjene negativnih margina i drugih trikova kako bi osigurali da će sve biti ispravno poredano bez obzira na količinu sadržaja ili veličinu zaslona. Ali, kao što gornji primjer pokazuje, sve je puno jednostavnije na Flexboxu.

Evo sažetka koda. U ovom primjeru, element #main činimo fleksibilnim spremnikom, a zaglavlje i podnožje ostavljamo kao blok elemente. Drugim riječima, samo srednji dio postaje flexbox. Evo isječka koji ga čini fleksibilnim spremnikom.

#main (zaslon: flex; min-height: calc(100vh - 40vh); )

Samo upotrijebite display: flex za izradu fleksibilnog spremnika. Imajte na umu da također postavljamo min-height pomoću funkcije calc() i postavljamo #main na 100% visine prozora minus visina zaglavlja i baze (po 20vh). To osigurava da će raspored ispuniti cijelu visinu zaslona, ​​čak i ako ima malo sadržaja. Kao rezultat toga, podnožje se nikada neće podići i ostaviti prazan prostor ispod sebe ako sadržaj zauzima manje od visine zaslona.

Izračunavanje min-height bilo je prilično jednostavno, s obzirom da smo primijenili box-sizing: border-box na sve elemente. Da to nismo učinili, tada bismo zbroju za oduzimanje morali dodati vrijednost popune.

Nakon ugradnje flex kontejnera, bavimo se flex elementima.

#main > article ( flex: 1; ) #main > nav, #main > side ( flex: 0 0 20vw; background: beige; ) #main > nav ( order: -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