Zadana vrijednost: 0 1 auto.

W3C preporučuje upotrebu stenografskog svojstva flex umjesto pojedinačnih svojstava, jer flex ispravno resetira sve neodređene komponente za tipičnu upotrebu.

poravnati-sebe

Svojstvo align-self omogućuje vam da nadjačate zadano poravnanje (ili vrijednost navedenu putem align-items) za pojedinačne flex stavke. Za razumijevanje dostupnih vrijednosti, pogledajte opis poravnanja stavki za flex spremnik.

Vrijednosti

Redefinirano poravnanje za treću i četvrtu flex stavku putem svojstva align-self.

Modul Flexbox raspored(fleksibilna kutija - "fleksibilna kutija", uključena ovaj trenutak Preporuka za kandidate za W3C) pokušava predložiti efikasniji način rasporeda, poravnanja i distribucije slobodnog prostora između elemenata u spremniku, čak i kada je njihova veličina nepoznata i / ili dinamična (otuda riječ "fleksibilna").

Glavna ideja fleksibilnog rasporeda je dati spremniku mogućnost promjene širine / visine (i redoslijeda) njegovih elemenata kako bi najbolje ispunio prostor (u većini slučajeva, za podržavanje svih vrsta zaslona i veličina zaslona). Fleksibilni spremnik isteže predmete kako bi ispunio slobodan prostor ili ih smanjuje kako bi spriječio da izađu izvan granica.

Najvažnije je da je raspored flexbox-a neovisan o smjeru, za razliku od redovnih rasporeda (vertikalni okviri i horizontalni inline elementi). Iako je redovan izgled odličan za web stranice, nedostaje mu fleksibilnost (nije namjeravana igra riječi) za podršku velikim ili složenim aplikacijama (posebno kada je riječ o promjeni orijentacije ekrana, promjeni veličine, istezanju, skupljanju itd.) ...

Komentar: Izgled Flexbox-a je najprikladniji za dijelove aplikacija i male rasporede, dok je raspored mreže više korišten za rasporede velikih razmjera.

Osnove

Jer flexbox je cijeli modul, a ne samo jedno svojstvo, on grupira mnoga svojstva. Neke od njih treba primijeniti na spremnik (nadređeni element, tzv flex kontejner) dok se druga svojstva primjenjuju na djecu ili flex predmeti.

Dok se redoviti raspored zasniva na smjerovima protoka blokovskih i unutarnjih elemenata, fleksibilni rasporedi temelje se na "fleksibilnim smjerovima protoka". Pogledajte ovu shemu iz specifikacije kako biste objasnili osnovnu ideju koja stoji iza flex izgleda.

U osnovi, elementi će se distribuirati zajedno glavna osa(od glavni start prije glavni kraj) ili duž poprečna os(od unakrsni start prije cross-end).

• glavna osa- glavna os duž koje su položeni elementi savijanja. Imajte na umu da to ne mora biti vodoravno, sve ovisi o svojstvu flex-direction (vidi dolje).
• glavni start | glavni kraj- fleksibilni predmeti se stavljaju u posudu od glavnog početnog do glavnog krajnjeg položaja.
• glavna veličina- širina ili visina fleksibilnog predmeta, ovisno o odabranoj osnovnoj vrijednosti. Osnovna vrijednost može biti širina ili visina elementa.
• poprečna os- poprečna os okomita na glavnu. Njegov smjer ovisi o smjeru glavne osi.
• unakrsni start | cross-end- fleks linije se popunjavaju predmetima i stavljaju u posudu od poprečnog položaja do poprečnog položaja.
• ukrštena veličina- širina ili visina savitljivog predmeta, ovisno o odabranoj dimenziji, jednaka je ovoj vrijednosti. Ovo svojstvo odgovara širini ili visini elementa, ovisno o odabranoj dimenziji.

Svojstva

prikaz: flex | inline-flex;

Odnosi se na:

Definira flex kontejner (inline ili block, ovisno o odabranoj vrijednosti), povezuje flex kontekst za sve njegove neposredne potomke.

Imajte na umu:

• CSS stupci ne rade s flex spremnikom
• plutajuće, prozirno i okomito poravnanje ne rade s fleksibilnim predmetima

flex-direction

Odnosi se na: roditelj flex spremnika.

Postavlja glavnu os glavnoj osi, određujući na taj način smjer fleksibilnih predmeta smještenih u spremniku.

• red (zadano): slijeva nadesno za ltr, zdesna nalijevo za rtl;
• red unazad: zdesna ulijevo za ltr, slijeva udesno za rtl;
• stupac: isti kao i red, od vrha do dna;
• stupac-obrnuto: Slično obrnutom redu, odozdo prema gore.

flex-wrap

Odnosi se na: roditelj flex spremnika.

Određuje hoće li spremnik biti jednolinijski ili višelinijski, te smjer poprečne osi, koji određuje smjer u kojem će se nove linije postavljati.

• Nowrap (zadano): jedan red / slijeva udesno za ltr, zdesna ulijevo za rtl;
• omot: višeredni / slijeva udesno za ltr, zdesna ulijevo za rtl;
• premotavanje unazad: više redova / zdesna ulijevo za ltr, slijeva udesno za rtl.

flex-flow

Odnosi se na: roditelj flex spremnika.

Ovo je skraćenica za svojstva savijanja i savijanja, koja zajedno definiraju glavnu i poprečnu os. Podrazumijeva se da se redoslijed sada prebaci.

Odnosi se na: roditelj flex spremnika.

Određuje poravnanje u odnosu na glavnu osu. Pomaže u raspodjeli preostalog slobodnog prostora u slučaju kada se elementi linije ne „protežu“ ili protežu, ali su već dostigli maksimalnu veličinu. Omogućava i neku vrstu kontrole poravnanja elemenata kada izađu iz okvira.

• flex-start (zadano): stavke su pomaknute na početak retka;
• flex-end: stavke se guraju na kraj retka;
• sredina: stavke su poredane prema sredini linije;
• razmak između: elementi su ravnomjerno raspoređeni (prvi je element na početku retka, posljednji je na kraju);
• oko prostora: stavke su ravnomjerno raspoređene s jednakim razmakom između sebe i granica linija.

Odnosi se na: roditelj flex spremnika.

Definira zadano ponašanje za to kako se fleks stavke postavljaju u odnosu na poprečnu os na trenutnoj liniji. Zamislite ovo kao verziju poravnanja sadržaja (okomito na glavnu osu) preko osi.

• flex-start: granica unakrsnog starta za stavke postavljena je na poziciji cross-start;
• flex-end: poprečna ivica za predmete postavljena je na poprečnom položaju;
• sredina: predmeti su poravnati prema središtu poprečne osi;
• osnovna linija: elementi su poravnati sa svojom osnovnom linijom;
• stretch (zadano): Elementi se rastežu kako bi ispunili spremnik (na temelju minimalne širine / maksimalne širine).

Odnosi se na: roditelj flex spremnika.

Poravnava redove fleksibilnog spremnika kada ima slobodnog prostora na poprečnoj osi, slično onome kako opravdava-sadržaj na glavnoj osi.

Komentar: Ovo svojstvo ne radi s jednorednim flexbox-om.

• flex-start: linije su poravnate u odnosu na početak spremnika;
• flex-end: linije su poravnate u odnosu na kraj spremnika;
• sredina: linije su poredane prema sredini spremnika;
• razmak između: redovi su ravnomjerno raspoređeni (prvi redak je na početku reda, posljednji je na kraju);
• oko prostora: linije su ravnomjerno raspoređene s jednakim razmakom;
• istezanje (zadano): Linije se protežu kako bi popunile slobodan prostor.

red

Odnosi se na:

Prema zadanim postavkama, flex stavke su poredane u izvornom redoslijedu. Međutim, svojstvo narudžbe može kontrolirati redoslijed kojim se stavljaju u spremnik.

Redoslijed:<cijeli broj>

fleks-rasti

Odnosi se na: dijete / flex predmet.

Određuje sposobnost da fleksibilni predmet "raste" po potrebi. Uzima jedinicu vrijednosti koja služi kao proporcija. Određuje koliko slobodnog prostora unutar spremnika može uzeti element.

Ako su svi predmeti postavljeni na flex-grow postavljeni na 1, tada će svako dijete dobiti istu veličinu unutar spremnika. Ako jednom od djece postavite na 2, tada će zauzeti dvostruko više prostora od ostalih.

Flex-raste:<broj>(zadano 0)

fleksibilno skupljanje

Odnosi se na: dijete / flex predmet.

Utvrđuje sposobnost savijanja predmeta po potrebi.

Fleksibilno skupljanje: (zadano 1)

Negativni brojevi nisu prihvaćeni.

fleks-osnova

Odnosi se na: dijete / flex predmet.

Određuje zadanu veličinu elementa prije dodjele prostora u spremniku.

Fleksibilna osnova:<dužina>|. | auto (zadani automatski)

fleks

Odnosi se na: dijete / flex predmet.

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

poravnati-sebe

Odnosi se na: dijete / flex predmet.

Omogućuje vam da nadjačate zadano poravnanje ili poravnanje-stavke za pojedine fleks stavke.

Pogledajte opis svojstva align-items za bolje razumijevanje dostupnih vrijednosti.

Primjeri

Počnimo s vrlo, vrlo jednostavnim primjerom koji viđamo gotovo svakodnevno: poravnavanje tačno prema centru. Ne može biti lakše koristiti flexbox.

Ovaj se primjer oslanja na činjenicu da je marža flex kontejnera postavljena na automatski apsorbira dodatni prostor, pa će postavljanje obloga na ovaj način poravnati element tačno po sredini na obje osi.

Koristimo sada neka svojstva. Zamislite set od 6 elemenata fiksne veličine (za ljepotu), ali s mogućnošću promjene veličine spremnika. Želimo ih distribuirati ravnomjerno vodoravno, tako da sve izgleda dobro kada se promijeni veličina prozora pretraživača (bez upita @media!).

Spremni. Sve ostalo je stvar registracije. Ispod je CodePen koji demonstrira ovaj primjer. Obavezno pokušajte rastezati / smanjivati ​​prozor preglednika i vidjeti što će se dogoditi.

Pokušajmo nešto drugo. Zamislite da želimo navigaciju udesno na samom vrhu naše web stranice, ali želimo da bude poravnata prema sredini za srednje veličine ekrana i postane jedan stupac za male ekrane. Prilično je jednostavno.

Pokušajmo nešto bolje i poigrajmo se fleksibilnošću flex predmeta! Kako bi bilo da se usredsredite na mobilni uređaji raspored u tri kolone sa zaglavljem i podnožjem pune širine? I to drugačijim redoslijedom.

Ukratko, raspored sa Flexboxom daje nam jednostavna rješenja za nekada teške zadatke. Na primjer, kada trebate poravnati element vertikalno ili pritisnuti podnožje na dnu zaslona ili jednostavno umetnuti nekoliko blokova u jedan red tako da zauzmu sav slobodni prostor. Slični zadaci mogu se riješiti bez fleksibilnosti. Ali u pravilu su ova rješenja više poput "štaka" - trikova za korištenje css-a u druge svrhe. Dok se kod flexbox-a takvi zadaci rješavaju točno onako kako je model flex-a planirao.

CSS modul fleksibilnog okvira, ukratko, flexbox, stvoren je kako bi uklonio nedostatke u stvaranju širokog spektra HTML struktura, uključujući one prilagođene različitim širinama i visinama, i kako bi izgled učinio logičnim i jednostavnim. Logičan pristup, u pravilu, djeluje na neočekivanim mjestima, gdje rezultat nije provjeren - logika je naše sve!

Flexbox vam omogućava elegantno upravljanje širokim rasponom svojstava elemenata unutar spremnika: smjer, redoslijed, širina, visina, uzdužno i poprečno poravnanje, raspodjela slobodnog prostora, istezanje i skupljanje elemenata.

Osnovno znanje

FlexBox se sastoji od spremnika i njegovih predmeta (fleks predmeta).

Da bi omogućio flexbox, bilo ko HTML element samo dodijelite svojstvo display: flex css-u; ili prikaz: inline-flex; ...

Nakon omogućavanja svojstva flex, unutar spremnika kreiraju se dvije osi: glavna i poprečna (okomita (⊥), poprečna os). Svi ugniježđeni elementi (prvi nivo) poravnati su duž glavne osi. Prema zadanim postavkama, glavna os je vodoravna i ima smjer s lijeva na desno (→), a poprečna os je vertikalna i usmjerena odozgo prema dolje (↓).

Glavna i poprečna osa mogu se zamijeniti, tada će se elementi nalaziti odozgo prema dolje (↓), a kada prestanu odgovarati visini, pomicat će se slijeva udesno (→) - odnosno osi će se jednostavno zamijeniti. U tom se slučaju početak i kraj rasporeda elemenata ne mijenjaju - mijenjaju se samo smjerovi (osi)! Zbog toga trebate zamisliti osi unutar posude. Međutim, ne treba misliti da postoje neke "fizičke" osi i da one utječu na nešto. Os je ovdje samo smjer kretanja elemenata unutar spremnika. Na primjer, ako smo specificirali poravnanje elemenata u središtu glavne osi, a zatim promijenili smjer ove glavne osi, tada će se i poravnanje promijeniti: elementi su bili u sredini vodoravno, a u sredini vertikalno. Pogledajte primjer.

Još jedna važna karakteristika Flex-boksa je prisustvo redova u poprečnom smjeru. Da bismo razumjeli o čemu govorimo, zamislimo da postoji glavna vodoravna os, ima mnogo elemenata i oni se ne "penju" u spremnik, pa se premještaju u drugi red. Oni. spremnik izgleda ovako: spremnik, unutar njega se nalaze dva reda, svaki red sadrži nekoliko elemenata. Jeste li predstavili? Sad zapamtite da vertikalno možemo poravnati ne samo elemente, već i redove! Kako to funkcionira, jasno se vidi iz primjera za imovinu. I evo kako shematski izgleda:

CSS svojstvašto može utjecati na model izgleda: plutajući, prozirni, vertikalno poravnati, stupci ne rade u flex dizajnu. Za izgradnju izgleda koristi drugačiji model i ta css svojstva se jednostavno zanemaruju.

Flexbox CSS svojstva

Flexbox sadrži različita css pravila za kontrolu cjelokupnog flex dizajna. Neke treba primijeniti na glavni spremnik, a druge na elemente ovog spremnika.

Za kontejner

Uključuje svojstvo flex za stavku. Sam element i njegovi ugniježđeni elementi potpadaju pod ovo svojstvo: to utječe samo na potomke prvog nivoa - oni će postati elementi flex spremnika.

• fleks- element se proteže u punoj širini i ima puni prostor među okolnim blokovima. Linije su omotane na početku i na kraju bloka.
• inline-flex- element je omotan oko ostalih elemenata. Istovremeno, njegov unutarnji dio je formatiran kao blok element, a sam element formatiran je kao inline.

flex i inline-flex razlikuju se po tome što različito komuniciraju sa okolnim elementima, poput display: block i display: inline-block.

Mijenja smjer glavne osi spremnika. U skladu s tim mijenja se i poprečna os.

• red (zadano)- smjer elemenata slijeva udesno (→)
• stupac- smjer elemenata od vrha do dna (↓)
• red-unazad- smjer elemenata zdesna nalijevo (←)
• stupac-revers- smjer elemenata odozdo prema gore ()

Kontrolira prijenos predmeta koji nisu u kontejneru.

• nowrap (zadano)- ugniježđeni elementi raspoređeni su u jedan red (s smjerom = red) ili u jedan stupac (s smjerom = stupac), bez obzira na to jesu li smješteni u spremnik ili ne.
• zamotati- uključuje prijenos elemenata u sljedeći red ako se ne uklapaju u spremnik. Ovo uključuje kretanje elemenata duž poprečne osi.
• premotavanje unazad- takođe da umotavanje samo prijenosa neće biti prema dolje, već prema gore (u suprotnom smjeru).

Kombinira svojstva savijanja i savijanja. Često se koriste zajedno, pa je svojstvo flex-flow stvoreno za pisanje manje koda.

flex-flow prihvaća vrijednosti ove dvije osobine, odvojene razmakom. Ili možete odrediti jednu vrijednost za bilo koje svojstvo.

/ * samo flex-direction * / flex-flow: red; fleks-protok: red-unazad; flex-flow: stupac; fleks-protok: stupac-rikverc; / * samo flex-wrap * / flex-flow: nowrap; flex-flow: omot; flex-flow: premotavanje unazad; / * obje vrijednosti odjednom: flex-direction i flex-wrap * / flex-flow: row nowrap; flex-flow: omotavanje stupa; flex-flow: stupac-reverzni omotač-obrnuti; justify-content:

Poravnava elemente duž glavne osi: ako je smjer = red, onda vodoravno, a ako je smjer = stupac, onda okomito.

• flex-start (zadano)- elementi će početi od početka (na kraju može biti mjesta).
• flex-end- elementi su poravnati do kraja (razmak će ostati na početku)
• centar- u sredini (prostor će ostati lijevo i desno)
• razmak između- ekstremni elementi su pritisnuti uz ivice (prostor između elemenata je ravnomjerno raspoređen)
• svemir okolo- slobodni prostor se ravnomjerno raspoređuje između elemenata (ekstremni elementi se ne pritiskaju na ivice). Prostor između ruba spremnika i najudaljenijih elemenata bit će polovica prostora između elemenata u sredini reda.
• prostorno ravnomjerno

Poravnava redove koji sadrže stavke duž poprečne osi. 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.

Oni. if flex-direction: row onda će ovo svojstvo poravnati nevidljive redove vertikalno ¦. Ovdje je važno napomenuti da visina bloka mora biti strogo postavljena i mora biti veća od visine redova, inače će redovi sami rastezati spremnik i svako poravnanje gubi svoje značenje, jer između njih nema slobodnog prostora ... Ali kada se flex-direction: stupac, tada se redovi pomiču vodoravno → i širina spremnika je gotovo uvijek veća od širine redova i poravnanje redova odmah ima smisla ...

• rastezanje (zadano)- redovi se protežu da bi se linija u potpunosti popunila
• flex-start- redovi su grupirani na vrhu spremnika (na kraju može biti mjesta).
• flex-end- redovi su grupirani na dnu spremnika (prostor će ostati na početku)
• centar- redovi su grupirani u sredini spremnika (prostor će ostati na rubovima)
• razmak između- vanjski redovi su pritisnuti uz rubove (prostor između redova je ravnomjerno raspoređen)
• svemir okolo- slobodni prostor se ravnomjerno raspoređuje između redova (ekstremni elementi nisu pritisnuti uz ivice). Prostor između ruba spremnika i najudaljenijih elemenata bit će polovica prostora između elemenata u sredini reda.
• prostorno ravnomjerno- isto kao i prostor okolo, samo je udaljenost od vanjskih elemenata do rubova spremnika jednaka kao i između elemenata.

Poravnava elemente duž poprečne osi unutar reda (nevidljivi red). Oni. sami redovi su poravnati kroz align-content, a elementi unutar ovih redova (linije) kroz align-items, i sve to duž poprečne osi. Ne postoji takvo razdvajanje duž glavne osi, ne postoji koncept redova i elementi su poravnati putem justify-content.

• rastezanje (zadano)- elementi su rastegnuti kako bi u potpunosti ispunili liniju
• flex-start- elementi su pritisnuti na početak reda
• flex-end- elementi su pritisnuti na kraj reda
• centar- elementi su poravnati prema sredini reda
• osnovno stanje- elementi su poravnati s osnovnom linijom teksta

Za elemente kontejnera

Određuje faktor povećanja stavke kada u spremniku ima slobodnog prostora. Prema zadanim postavkama flex-grow: 0 tj. nijedan od elemenata ne smije rasti i ispunjavati prazan prostor u spremniku.

Zadani flex-grow: 0

• Ako su svi elementi postavljeni na fleks-rast: 1, tada se svi istežu na isti način i ispunjavaju sav slobodni prostor u spremniku.
• Ako je naveden jedan od elemenata flex-grow: 1, tada će ispuniti sav slobodni prostor u spremniku, a poravnanje putem justify-content više neće raditi: nema slobodnog prostora, nema se što poravnati ...
• Sa fleks-rastom: 1. Ako jedan od njih ima fleks-rast: 2, tada će biti 2 puta veći od svih ostalih.
• Ako sve fleks kutije unutar fleks kontejnera imaju flex-grow: 3, tada će biti iste veličine
• Sa fleks-rastom: 3. Ako jedan od njih ima fleks-rast: 12, tada će biti 4 puta veći od svih ostalih.

Kako radi? Recimo da je spremnik širok 500 piksela i sadrži dva elementa, svaki s osnovnom širinom od 100 piksela. To znači da u spremniku ima 300 slobodnih piksela. Ako je prvi element postavljen na flex-grow: 2; a drugi fleks-rast: 1; , tada će blokovi zauzimati cijelu dostupnu širinu spremnika, a širina prvog bloka bit će 300px, a drugog će biti 200px. To se objašnjava činjenicom da je raspoloživih 300 piksela slobodnog prostora u kontejneru bilo raspoređeno između elemenata u omjeru 2: 1, + 200 piksela za prvi i + 100 piksela za drugi.

Napomena: vrijednost se može navesti razlomljeni brojevi na primjer: 0,5 - fleks-rast: 0,5

Određuje faktor smanjenja za element. Suprotno od flex-grow određuje kako će se element smanjiti ako u spremniku nema mjesta. Oni. svojstvo počinje raditi kada je zbroj veličina svih elemenata veći od veličine spremnika.

Zadani flex-shrink: 1

Recimo da je kontejner širok 600 piksela i sadrži dva predmeta širine 300 piksela - fleksibilna osnova: 300 piksela; ... Oni. dva elementa u potpunosti ispunjavaju posudu. Prva stavka je fleksibilno skupljanje: 2; , a drugo savijanje: 1; ... Sada smanjimo širinu spremnika za 300px, tj. elementi se moraju smanjiti za 300 piksela da bi se uklopili u posudu. Smanjit će se u omjeru 2: 1, tj. prvi blok će se smanjiti za 200px, a drugi za 100px, a nove veličine elemenata bit će 100px i 200px.

Napomena: u vrijednosti možete koristiti razlomljene brojeve, na primjer: 0,5 - flex-shrink: 0,5

Postavlja osnovnu širinu elementa - izračunava se širina prije ostalih uvjeta koji utječu na širinu elementa. Vrijednost se može navesti u px, em, rem,%, vw, vh itd. Konačna širina ovisit će o osnovnoj širini i flex-grow-u, flex-shrink-u i sadržaju unutar bloka. Uz auto, elementu se daje osnovna širina u odnosu na sadržaj unutar njega.

Zadano: auto

Ponekad je bolje postaviti širinu elementa teško koristeći poznato svojstvo width. Na primjer, širina: 50%; značit će da će element unutar spremnika biti tačno 50%, ali to će i dalje održavati svojstva flex-grow i flex-shrink. Ovo može biti korisno kada se element proteže za sadržaj unutar njega izvan navedene fleks-osnove. Primjer.

flex-osnova bit će "kruta" ako se očiste rastezanje i skupljanje: flex-osnova: 200px; fleks-rast: 0; fleksibilno skupljanje: 0; ... Sve se to može napisati ovako: 0 0 200px; ...

Ukratko, tri svojstva: flex-grow flex-shrink flex-osnova.

Zadano: flex: 0 1 auto

Međutim, možete navesti jednu ili dvije vrijednosti:

Flex: nema; / * 0 0 auto * / / * broj * / flex: 2; / * flex-grow (flex-osnova ide na 0) * / / * nije broj * / flex: 10em; / * flex-osnova: 10em * / flex: 30px; / * flex-osnova: 30px * / flex: automatski; / * fleks osnova: automatski * / fleks: sadržaj; / * flex-osnova: sadržaj * / flex: 1 30px; / * flex-raste i flex-osnova * / flex: 2 2; / * flex-raste i flex-shrink (flex-osnova ide na 0) * / flex: 2 2 10%; / * flex-grow i flex-shrink i flex-osnova * / align-self:

Omogućuje vam da promijenite svojstvo align-items samo za jednu stavku.

Zadano: iz kontejnera align-items

• rastezanje- element je razvučen da u potpunosti popuni liniju
• flex-start- element je pritisnut na početak retka
• flex-end- element je pritisnut na kraj reda
• centar- element je poravnat prema sredini linije

osnovno stanje- element je poravnat s osnovnom linijom teksta

Omogućuje vam promjenu redoslijeda (položaja, položaja) elementa u zajedničkom redu.

Zadano: poredak: 0

Po defaultu, elementi imaju redoslijed: 0 i postavljaju se prema redoslijedu njihovog pojavljivanja u HTML kodu i smjeru reda. Ali ako promijenite vrijednost svojstva naloga, tada će elementi biti poredani redoslijedom vrijednosti: -1 0 1 2 3 .... Na primjer, ako odredite redoslijed: 1 za jedan od elemenata, prvo će ići sva nula, a zatim element s 1.

Tako, na primjer, prvi element možete baciti do kraja, a pritom ne mijenjati smjer kretanja ostalih elemenata ili HTML koda.

Napomene

Koja je razlika između fleksibilne osnove i širine?

Ispod su važne razlike između savitljive osnove i širine / visine:

flex-osnova radi samo za glavnu os. To znači da sa flex-direction: row flex-base kontrolira širinu, a flex-direction: column kontrolira visinu. ...

flex-osnova odnosi se samo na flex predmete. To znači da ako isključite fleksibilnost na spremniku, ovo svojstvo neće imati učinka.

Apsolutni elementi spremnika ne sudjeluju u flex dizajnu ... što znači da flex-osnova ne utječe na elemente flex spremnika sve dok su apsolutni položaj: apsolutni. Morat će odrediti širinu / visinu.

• Kada se koristi svojstvo flex 3, vrijednosti (flex-grow / flex-shrink / flex-basis) mogu se kratko kombinirati i napisati, dok širina raste ili smanjuje mora se napisati odvojeno. Na primjer: flex: 0 0 50% == širina: 50%; fleksibilno skupljanje: 0; ... Ponekad je jednostavno nezgodno.

Dajte prednost fleksibilnoj osnovi kad god je to moguće. Koristite širinu samo kada flex-osnova nije prikladna.

Da li se flex-osnova razlikuje od širine - greška ili karakteristika?

Sadržaj unutar flex stavke ga proširuje i ne može van njega. Međutim, ako širinu postavite preko širine ili maksimalne širine, a ne na osnovi flex, tada će element unutar flex spremnika moći ići dalje od ovog spremnika (ponekad je to ponašanje koje vam treba). Primjer:

Primjeri fleks rasporeda

Primjeri nikada ne koriste prefikse za kompatibilnost s više pregledača. Učinio sam ovo radi lakšeg čitanja css-a. Stoga, pogledajte primjere u posljednjem Chrome verzije ili Firefox.

# 1 Jednostavan primjer s okomitim i vodoravnim poravnanjem

Počnimo s najjednostavnijim primjerom - poravnavanjem vertikalno i vodoravno u isto vrijeme i na bilo kojoj visini bloka, čak i gumenoj.

Ili ovako, bez bloka iznutra:

# 1.2 Razdvajanje (zazor) između elemenata bloka savijanja

Da biste pozicionirali elemente spremnika duž rubova i proizvoljno odabrali element nakon kojeg će doći do prekida, morate koristiti svojstvo margin-left: auto ili margin-right: auto.

# 2 fleksibilni fleksibilni meni

Napravimo meni na samom vrhu stranice. Na širokom ekranu trebao bi biti s desne strane. Poravnajte u prosjeku u sredini. A na malom bi svaki element trebao biti na novoj liniji.

# 3 reaktivna 3 stupca

Ovaj primjer pokazuje koliko je brzo i povoljno napraviti 3 stupca, koji će se, kada se suze, pretvoriti u 2, a zatim u 1.

Imajte na umu da to možete učiniti bez korištenja medijskih pravila, sve je na fleksu.

Idite na jsfiddle.net i promijenite širinu odjeljka "rezultat"

# 4 Responzivne kutije na fleksu

Recimo da trebamo prikazati 3 bloka, jedan veliki i dva mala. U ovom slučaju potrebno je da se blokovi prilagode malim ekranima. Mi radimo:

Idite na jsfiddle.net i promijenite širinu odjeljka "rezultat"

# 5 Galerija o fleksu i tranziciji

Ovaj primjer pokazuje koliko brzo možete napraviti lijepu flex harmoniku sa slikama. Primijetite svojstvo prijelaza za flex.

# 6 Flex to flex (samo primjer)

Zadatak je napraviti fleksibilni blok. Tako da je početak teksta u svakom bloku na istoj vodoravnoj liniji. Oni. kako se širina sužava, blokovi rastu u visinu. Potrebno je da je slika na vrhu, dugme je uvijek na dnu, a tekst u sredini počinje duž jedne vodoravne crte ...

Da bi se taj problem riješio, sami se blokovi fleksibilno rastežu i za njih se postavlja najveća moguća širina. Svaki unutrašnji blok je takođe fleksibilna konstrukcija, sa rotiranim fleks-pravcem: stupac; a element u sredini (gdje je tekst) je razvučen fleks-rast: 1; da se popuni sav slobodni prostor, tako se postiže rezultat - tekst je počeo u jednom retku ...

Još primjera

Podrška za pregledač - 98,3%

Naravno, ne postoji puna podrška, ali sve moderni pretraživači podržavaju flexbox dizajne. Za neke još trebaju biti navedeni prefiksi. Za stvarnu sliku, pogledajmo caniuse.com i vidjet ćemo da će 96,3% pregledača koji se danas koriste raditi bez prefiksa, sa 98,3% prefiksa. Ovo je sjajan pokazatelj za pouzdanu upotrebu flexboxa.

Da bih znao koji su prefiksi relevantni danas (lipanj 2019.), daću primjer svih flex pravila sa potrebne prefikse:

/ * Kontejner * / .flex (display: -webkit-box; display: -ms-flexbox; display: flex; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-orijent: vertikalno; -webkit-box-smjer: normalno; -ms-flex-pravac: stupac; flex-smjer: stupac; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms -flex-flow: premotavanje stupaca; flex-flow: premotavanje stupaca; -webkit-box-pack: opravdati; -ms-flex-paket: opravdati; opravdati-sadržaj: razmak između; distribuirati; align-content: space-around;) / * Artikli * / .flex-item (-webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -ms-flex- negativno: 2; flex-shrink: 2; -ms-flex-preferirana-veličina: 100px; flex-osnova: 100px; -ms-flex: 1 2 100px; flex: 1 2 100px; -ms-flex-item-align : centar; poravnaj-samo: centar; -webkit-box-redni-grupa: 3; -ms-flex-poredak: 2; redoslijed: 2;)

Bolje je da prefiksirana svojstva idu prije originalnog svojstva.
Na ovom popisu nema nepotrebnih prefiksa za danas (prema caniuse), ali općenito ima više prefiksa.

• (novo) - nova sintaksa: display: flex; ...
• (tweener) - stara neslužbena sintaksa iz 2011. godine: display: flexbox; ...
• (stara) - stara sintaksa iz 2009: prikaz: okvir;

Video

Pa, ne zaboravite na video, tamo je ponekad i zanimljiv i razumljiv. Evo nekoliko popularnih:

Korisni fleksibilni linkovi

flexboxfroggy.com je obrazovna flexbox igra.

Flexplorer je intuitivni graditelj fleks koda.