Flexbox primjeri. Izgled pomoću CSS Flexboxa. flex – skraćenica za svojstva flex-grow, flex-shrink i flex-basis

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

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.

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.

Fleksibilni označni model povezan je s određenom vrijednošću svojstva prikaza CSS nadređenog HTML elementa koji unutar sebe 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; prikaz: 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.

Ako nadređeni blok sadrži tekst ili slike bez omotača, oni postaju anonimne fleksibilne stavke. Tekst je poravnat s gornjim rubom bloka spremnika, a visina slike postaje jednake visine blok, 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đustavke 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.
• Zadana automatska minimalna veličina flex stavki je minimalna veličina njihovog 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 rasporediti u bilo kojem smjeru i bilo kojim redoslijedom (preslagivanje fleksibilnih stavki unutar spremnika utječe samo na vizualno renderiranje).

4.1. Smjer glavne osi: smjer savijanja

Svojstvo se odnosi na fleksibilni spremnik. Upravlja smjerom glavne osi duž koje su složene stavke, u skladu s trenutnim načinom pisanja. Nije naslijeđeno.

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.

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 pri distribuciji pozitivnog slobodnog prostora. 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.

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 se dodjeljuje proporcionalno tome koliko se stavka može smanjiti, tako da se, na primjer, mala savitljiva stavka neće smanjiti na nulu sve dok se veća savitljiva stavka primjetno ne smanji. Imovina se ne nasljeđuje.

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 flex-grow . Ako neki elementi imaju flex-grow ili marginu različitu od nule: auto; , svojstvo neće imati učinka. Imovina se ne nasljeđuje.

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 savitljive elemente, uključujući anonimne savitljive elemente, duž poprečne osi. Nije naslijeđeno.

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.

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.

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;

Htio bih razgovarati o FlexBoxu. Flexbox-layout modul (fleksibilna kutija - “fleksibilni blok”, na ovaj trenutak W3C Preporuka kandidata ima za cilj ponuditi više učinkovita metoda raspored, poravnanje i raspodjela slobodnog prostora između elemenata u spremniku, čak i kada je njihova veličina nepoznata i/ili dinamična (odatle riječ "fleksibilan").

Glavna ideja fleksibilnog izgleda je dati spremniku mogućnost promjene širine/visine (i redoslijeda) svojih elemenata kako bi se bolje ispunio prostor (u većini slučajeva, kako bi se podržali svi tipovi zaslona i veličine zaslona).Fleksibilni spremnik rasteže elemente da popune prostor ili ih sažima kako bi spriječio njihovo prelijevanje.

Ono što je najvažnije, flexbox raspored ne ovisi o smjeru, za razliku od konvencionalnih izgleda (blokovi raspoređeni okomito i inline elementi raspoređeni vodoravno).Iako je uobičajeni izgled izvrstan za web-stranice, nedostaje mu fleksibilnost za podršku velikim ili složenim aplikacijama (osobito kada je u pitanju promjena orijentacije zaslona, ​​promjena veličine, rastezanje, smanjivanje itd.).

Jer flexbox je cijeli modul, a ne samo jedno svojstvo, on kombinira mnoga svojstva.Neka od njih moraju se primijeniti na spremnik (roditeljski element, koji se naziva savitljivi spremnik), dok se druga svojstva primjenjuju na podređene elemente ili savitljive elemente.

Dok se uobičajeni raspored temelji na smjerovima protoka blok i inline elemenata, fleksibilni raspored temelji se na "fleksibilnim smjerovima protoka".

Flexbox

U osnovi, elementi će biti raspoređeni duž glavne osi (od glavnog početka do glavnog kraja) ili duž poprečne osi (od poprečnog početka do poprečnog kraja).

main-axis — glavna os duž koje se nalaze savitljivi elementi.Imajte na umu da mora biti vodoravan, sve ovisi o kvaliteti justify-sadržaja.
glavni početak | main-end - fleksibilni elementi se postavljaju u spremnik od glavne početne do glavne krajnje pozicije.
glavna veličina — širina ili visina savitljivog elementa ovisno o odabranoj glavnoj veličini.Osnovna veličina može biti širina ili visina elementa.
poprečna os - poprečna os okomita na glavnu.Njegov smjer ovisi o smjeru glavne osi.
unakrsni početak | cross-end - savitljive linije se pune elementima i stavljaju u spremnik od cross-start pozicije i cross-end pozicije.
Veličina križa — širina ili visina fleksibilnog elementa, ovisno o odabranoj dimenziji, jednaka je ovoj vrijednosti.Ovo svojstvo je isto kao širina ili visina elementa ovisno o odabranoj dimenziji.

Svojstva
zaslon: flex | inline-flex;

Definira flex spremnik (umetnuti ili blok ovisno o odabranoj vrijednosti), povezuje flex kontekst za sve njegove neposredne potomke.

prikaz: druge vrijednosti | savijati | inline-flex;

Imati na umu:

CSS stupci ne rade s flex spremnikomfloat, clear i vertical-align ne rade s fleksibilnim stavkama

flex-direction

Primjenjuje se prije nadređenog elementa fleksibilnog spremnika.

Postavlja glavnu os, čime se definira smjer savitljivih stavki smještenih u spremnik.

smjer savijanja: red | red-obrnuti | stupac | stupac-revers

red (zadano): slijeva nadesno za ltr, zdesna nalijevo za rtl;
red-obrnuti: zdesna nalijevo za ltr, slijeva nadesno za rtl;
stupac: sličan redu, odozgo prema dolje;
obrnuti stupac: slično obrnutom redu, odozdo prema gore.

flex-wrap

Primjenjuje se prije nadređenog elementa fleksibilnog spremnika.

Određuje da li je kontejner jednolinijski ili višelinijski, kao i smjer poprečne osi, određuje smjer u kojem će se postavljati novi redovi.

flex-wrap: nowrap | omotati | preokrenuti

nowrap (zadano): jedna linija / slijeva nadesno za ltr, zdesna nalijevo za rtl;
prelomi: više reda / slijeva na desno za ltr, zdesna nalijevo za rtl;
wrap-reverse: više reda / zdesna nalijevo za ltr, slijeva nadesno za rtl.

flex-flow

Primjenjuje se prije nadređenog elementa fleksibilnog spremnika.

Ovo je skraćenica za svojstva flex-direction i flex-wrap, koja zajedno definiraju glavnu i poprečnu os.Zadana vrijednost je row nowrap.

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

opravdati-sadržaj

Primjenjuje se prije nadređenog elementa fleksibilnog spremnika.

Definira poravnanje u odnosu na glavnu os.Pomaže u raspodjeli slobodnog prostora u slučaju kada se linijski elementi ne "rastežu" ili rastežu, ali su već dosegli svoju maksimalnu veličinu.Također omogućuje određenu kontrolu nad poravnavanjem elemenata kada idu izvan linije.

justify-content: flex-start | savitljivi kraj | centar | razmak između | prostor-okolo

flex-start (zadano): stavke se pomiču na početak retka;
flex-end: elementi se pomiču na kraj retka;
centar: elementi su poravnati na sredinu crte;
razmak između: elementi su ravnomjerno raspoređeni (prvi element na početku retka, posljednji na kraju)
space-around: elementi su ravnomjerno raspoređeni s jednakom udaljenošću između sebe i izvan linije.

opravdati-sadržaj
align-items

Primjenjuje se prije nadređenog elementa fleksibilnog spremnika.

Definira zadano ponašanje za pozicioniranje fleksibilnih stavki u odnosu na poprečnu os na trenutnom retku.Zamislite to kao verziju justify-content-a za poprečnu os (okomitu na glavnu).

align-items: flex-start | savitljivi kraj | centar | osnovna linija | protežu se

flex-start: poprečna početna granica za elemente koji se nalaze na poprečnoj početnoj poziciji;
flex-end: poprečni rub za elemente koji se nalaze na poprečnom položaju;
centar: elementi su poravnati prema središtu poprečne osi;
osnovna linija: elementi su poravnati sa svojom osnovnom linijom;
rastezanje (zadano): elementi se rastežu kako bi ispunili spremnik (uzimajući u obzir minimalnu/maksimalnu širinu).

align-items
poravnati sadržaj

Primjenjuje se prije nadređenog elementa fleksibilnog spremnika. Poravnava retke fleksibilnog spremnika kada ima slobodnog prostora na poprečnoj osi, slično kao što to čini justify-content na glavnoj osi. Napomena: ovo svojstvo ne radi s jednolinijskim fleksibilnim okvirima.

align-content: flex-start | savitljivi kraj | centar | razmak između | prostor-oko | protežu se

flex-start: linije su poravnate u odnosu na početak spremnika;
flex-end: linije su poravnate u odnosu na kraj spremnika;
centar: linije su poravnate sa središtem spremnika;
razmak između: redovi su ravnomjerno raspoređeni (prvi red na početku retka, posljednji na kraju)
space-around: linije su ravnomjerno raspoređene s jednakom međusobnom udaljenošću;
rastezanje (zadano): linije se rastežu kako bi ispunile raspoloživi prostor.

poravnati sadržaj
narudžba

Prema zadanim postavkama, fleksibilne stavke raspoređene su u izvornom redoslijedu.Međutim, svojstvo reda može kontrolirati redoslijed kojim se pojavljuju u spremniku.

narudžba 1

flex-grow

Primjenjuje se na element dijete/element flex. Definira sposobnost savitljivog elementa da "naraste" ako je potrebno.Poprima bezdimenzionalnu vrijednost i služi kao proporcija.Određuje koliko slobodnog prostora element može zauzeti unutar spremnika. Ako svi elementi imaju svojstvo flex-grow postavljeno na 1, tada će svako dijete dobiti istu veličinu unutar spremnika.Ako jedno od djece postavite na 2, zauzimat će dvostruko više prostora od ostalih.

flex-grow (zadano 0)

flex-shrink

Primjenjuje se na element dijete/element flex.

Definira mogućnost da se savitljiva stavka smanji kada je to potrebno.

flex-shrink (zadano 1)

Negativni brojevi se ne prihvaćaju.
flex-osnova

Primjenjuje se na element dijete/element flex. Definira zadanu veličinu za element prije dodjele prostora u spremniku.

flex-osnova | automatski (zadani automatski)

savijati

Primjenjuje se na element dijete/element flex. Ovo je skraćenica za flex-grow, flex-shrink i flex-basis.Drugi i treći parametar (flex-shrink, flex-basis) nisu obavezni.Zadana vrijednost je 0 1 automatski.

savijati: nema | [< ‘Flex-grow «> <» flex-shrink’>? || < ‘Flex-basis’>]

poravnati se

Primjenjuje se na element dijete/element flex. Omogućuje nadjačavanje zadanog ili poravnanja stavki poravnanja za pojedinačne fleksibilne stavke. Za bolje razumijevanje dostupnih vrijednosti pogledajte opis svojstva align-items.

align-self: auto | fleksibilni početak | savitljivi kraj | centar | osnovna linija | protežu se

Primjeri
Počnimo s vrlo, vrlo jednostavnim primjerom koji se pojavljuje gotovo svaki dan: poravnavanje točno u središte.Ništa ne može biti lakše ako koristite flexbox.

Roditelj ( display: flex; height: 300px; ) .child ( width: 100px; / * Whatever * / height: 100px; / * Whatever * / margin: auto; / * Magic! * / )

Ovaj se primjer oslanja na činjenicu da margina ispod fleksibilnog spremnika, postavljena na auto, zauzima dodatni prostor, tako da će zadatak uvlačenja na ovaj način poravnati element točno u središtu obje osi. Sada upotrijebimo neka svojstva.Zamislite skup od 6 elemenata fiksne veličine (radi ljepote), ali s mogućnošću promjene veličine spremnika.Želimo ih ravnomjerno vodoravno rasporediti tako da kada promijenimo veličinu prozora preglednika sve izgleda dobro (bez @media upita!).

Flex-kontejner (
/ * Prvo, stvorimo flex kontekst * /
zaslon: savitljiv;

/* Sada odredimo smjer toka i želimo li elemente
premješteno u novi red
*Zapamtite da je ovo isto što i:
* Flex-smjer: red;
* Flex-wrap: omot;
* /
flex-flow: omotavanje reda;

/ * Sada odredimo kako će prostor biti raspoređen * /
}

Spreman. Sve ostalo je stvar registracije. Pokušajmo nešto drugo.Zamislite da želimo desno poravnatu navigaciju na samom vrhu našeg web mjesta, ali želimo da bude središnje poravnata na zaslonima srednje veličine i da postane jedan stupac na malim zaslonima.Sve je vrlo jednostavno.

/*Veliki ekrani*/
.navigacija(
zaslon: savitljiv;
flex-flow: omotavanje reda;
/* Pomiče elemente na kraj retka duž glavne osi * /
justify-content: flex-end;
}

mediji sve i (maksimalna širina: 800 px) (
.navigacija(
/* Za srednje zaslone centriramo navigaciju,
ravnomjerno raspoređivanje slobodnog prostora između elemenata * /
justify-content: space-around;
}
}

/*Mali ekrani*/
mediji sve i (maksimalna širina: 500 px) (
.navigacija(
/ * Na malim ekranima, umjesto u red, elemente slažemo u stupac * /
smjer savijanja: stupac;
}
}

Igrajmo se s fleksibilnošću savitljivih predmeta!Što kažete na izgled s tri stupca prilagođen mobilnim uređajima s zaglavljem i podnožjem pune širine?I to drugačijim redoslijedom.

Omot (
zaslon: savitljiv;
flex-flow: omotavanje reda;
}

/ * Postavite sve elemente na 100% širine * /
.zaglavlje, .glavno, .nav, .strano, .podnožje (
savitljivost 1100%;
}

/* U ovom slučaju oslanjamo se na izvornu narudžbu da nas vodi
* Mobilni uredaji:
* 1 zaglavlje
* 2 nav
* 3 glavne
* 4 u stranu
* 5 podnožje
* /

/*Srednji zasloni*/
mediji sve i (min. širina: 600 px) (
/ * Obje bočne trake nalaze se na istoj liniji * /
.na stranu (flex: 1 auto; )
}

/*Veliki ekrani*/

Ukratko, izgled s Flexboxom nam daje jednostavna rješenja nekoć teške zadatke. Na primjer, kada trebate okomito poravnati element ili pritisnuti podnožje na dno zaslona ili jednostavno umetnuti nekoliko blokova u jedan red tako da zauzmu sav slobodni prostor. Slični problemi mogu se riješiti i bez fleksa. Ali u pravilu, ta su rješenja više poput "štaka" - tehnika za korištenje CSS-a u svrhe koje nisu predviđene. Dok se s flexboxom takvi zadaci rješavaju točno onako kako je flex model namijenjen.

CSS Flexible Box Layout Module (CSS modul za rasporede s fleksibilnim blokovima), skraćeno flexbox, stvoren je kako bi uklonio nedostatke pri izradi najrazličitijih HTML dizajna, uključujući one prilagođene različitim širinama i visinama, te izgled učinio logičnim i jednostavnim . A logičan pristup, u pravilu, djeluje na neočekivanim mjestima, gdje rezultat nije provjeren - logika je sve!

Flexbox omogućuje elegantnu kontrolu različitih parametara elemenata unutar spremnika: smjer, redoslijed, širina, visina, poravnanje uzduž i poprijeko, raspodjela slobodnog prostora, rastezanje i sabijanje elemenata.

Osnovno znanje

FlexBox se sastoji od spremnika i njegovih stavki (fleksibilnih elemenata).

Da biste omogućili flexbox, bilo koji HTML element samo treba dodijeliti CSS svojstvo display:flex; ili display:inline-flex; .

Nakon što omogućite svojstvo flex, unutar spremnika se stvaraju dvije osi: glavna i poprečna (okomita (⊥), poprečna os). Svi ugniježđeni elementi (prve razine) poredani su duž glavne osi. Standardno je glavna os vodoravna i usmjerena slijeva na desno (→), a poprečna os je odgovarajuće okomita i usmjerena odozgo prema dolje (↓).

Glavna i poprečna os se mogu zamijeniti, tada će elementi biti smješteni odozgo prema dolje (↓), a kada više ne odgovaraju po visini, pomaknut će se slijeva na desno (→) - odnosno osi su jednostavno zamijenile mjesta . U tom slučaju početak i kraj rasporeda elemenata se ne mijenjaju – mijenjaju se samo pravci (osi)! Zbog toga morate zamisliti sjekire unutar kontejnera. No, ne treba misliti da postoje neke “fizičke” osovine i da one na nešto utječu. Ovdje je os samo smjer kretanja elemenata unutar spremnika. Na primjer, ako smo odredili poravnanje elemenata prema središtu glavne osi i zatim promijenili smjer ove glavne osi, tada će se poravnanje promijeniti: elementi su bili u sredini vodoravno, ali su postali u sredini okomito... Pogledajte primjer.

Još jedna važna značajka Flexboxa je prisutnost redova u poprečnom smjeru. Da bismo razumjeli o čemu govorimo, zamislimo da postoji glavni Vodoravna os, ima puno elemenata i ne "stanu" u spremnik, pa se pomaknu u drugi red. Oni. spremnik izgleda ovako: spremnik s dva reda unutar njega, svaki red sadrži nekoliko elemenata. Predstavljeno? Zapamtite da možemo okomito poravnati ne samo elemente, već i retke! Kako to funkcionira jasno se vidi u primjeru nekretnine. A evo kako to shematski izgleda:

CSS svojstva koja mogu utjecati na model izgleda: float, clear, vertical-align, stupci ne rade u flex dizajnu. Ovdje se koristi drugačiji model za konstruiranje izgleda i ta se CSS svojstva jednostavno ignoriraju.

Flexbox CSS svojstva

Flexbox sadrži različite css pravila za kontrolu cjelokupnog savitljivog dizajna. Neke je potrebno primijeniti na glavni spremnik, a druge na elemente ovog spremnika.

Za kontejner

Omogućuje svojstvo flex za element. Ovo svojstvo pokriva sam element i njegove ugniježđene elemente: utječe samo na potomke prve razine - oni će postati elementi flex spremnika.

• savijati- element se proteže cijelom širinom i ima svoj puni prostor među okolnim blokovima. Prijelomi redaka javljaju se na početku i na kraju bloka.
• inline-flex- element je omotan oko drugih elemenata. U ovom slučaju, njegov unutarnji dio je formatiran kao blok element, a sam element je formatiran kao inline.

flex i inline-flex razlikuju se po tome što drugačije komuniciraju s okolnim elementima, slično kao display:block i display:inline-block.

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

• red (zadano)- smjer elemenata s lijeva na desno (→)
• stupac- smjer elemenata odozgo prema dolje (↓)
• red-obrnuti- smjer elemenata s desna na lijevo (←)
• stupac-revers- smjer elemenata odozdo prema gore ()

Kontrolira prijenos elemenata koji ne stanu u spremnik.

• Nowrap (zadano)- ugniježđeni elementi se postavljaju u jedan red (s direction=row) ili u jedan stupac (s direction=column) bez obzira da li stanu u spremnik ili ne.
• omotati- uključuje pomicanje elemenata u sljedeći red ako ne stanu u spremnik. Time je omogućeno pomicanje elemenata duž poprečne osi.
• preokrenuti- isto što i omot, samo prijenos neće biti dolje, već gore (u suprotnom smjeru).

Kombinira svojstva savijanja i savijanja. Često se koriste zajedno, tako da je stvoreno svojstvo flex-flow da pomogne u pisanju manje koda.

flex-flow prihvaća vrijednosti ova dva svojstva, odvojena razmakom. Ili možete navesti jednu vrijednost za bilo koje svojstvo.

/* samo flex-direction */ flex-flow: red; flex-flow: row-reverse; flex-flow: stupac; flex-flow: stupac-obrnuti; /* 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č stupca; flex-flow: stupac-reverse wrap-reverse; opravdanje sadržaja:

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

• fleksibilni početak (zadano)- elementi će ići od početka (možda će ostati nešto mjesta na kraju).
• savitljivi kraj- elementi su poravnati na kraju (razmak će ostati na početku)
• centar- u sredini (prostor će ostati lijevo i desno)
• razmak između- krajnji vanjski elementi su pritisnuti uz rubove (razmak između elemenata je ravnomjerno raspoređen)
• prostor-okolo- slobodni prostor je ravnomjerno raspoređen između elemenata (najudaljeniji elementi nisu pritisnuti uz rubove). Razmak između ruba spremnika i vanjskih elemenata bit će upola manji od razmaka između elemenata u sredini reda.
• prostorno ravnomjerno

Poravnava retke koji sadrže elemente duž poprečne osi. Isto kao i justify-content samo za suprotnu os.

Napomena: radi kada postoje najmanje 2 reda, tj. Ako postoji samo 1 red, ništa se neće dogoditi.

Oni. ako je flex-direction: row, tada će ovo svojstvo okomito poravnati nevidljive retke. Ovdje je važno napomenuti da visina bloka mora biti rigidno postavljena i mora biti veća od visine redova, inače će sami redovi rastegnuti spremnik i svako njihovo poravnavanje postaje besmisleno, jer između njih nema slobodnog prostora. njih... Ali kada je flex-direction: stupac, tada se redovi pomiču vodoravno → i širina spremnika je gotovo uvijek veća od širine redaka i poravnavanje redaka odmah ima smisla...

• istezanje (zadano)- redovi se razvlače kako bi se red u potpunosti ispunio
• flex-start- redovi su grupirani na vrhu spremnika (može ostati nešto prostora na kraju).
• savitljivi kraj- redovi su grupirani na dnu spremnika (prostor će ostati na početku)
• centar- redovi su grupirani u središtu spremnika (prostor će ostati na rubovima)
• razmak između- vanjski redovi su pritisnuti uz rubove (razmak 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 spremnika i vanjskih elemenata bit će upola manji od razmaka između elemenata u sredini reda.
• prostorno ravnomjerno- isto kao space-around, samo je udaljenost između vanjskih elemenata i rubova spremnika ista kao i između elemenata.

Poravnava elemente duž poprečne osi unutar retka (nevidljivi red). Oni. Sami redovi se poravnavaju preko align-content , a elementi unutar tih redova (redova) se poravnavaju preko align-items i to po cijeloj poprečnoj osi. Ne postoji takva podjela po glavnoj osi, nema koncepta redaka i elementi se poravnavaju kroz justify-content.

• istezanje (zadano)- elementi se razvlače tako da popune liniju u potpunosti
• flex-start- elementi su pritisnuti na početak reda
• savitljivi kraj- elementi su pritisnuti do kraja reda
• centar- elementi su poravnati prema sredini retka
• Osnovna linija- elementi su poravnati s osnovnom linijom teksta

Za elemente kontejnera

Postavlja faktor povećanja elementa kada u spremniku ima slobodnog prostora. Zadani flex-grow: 0 tj. niti jedan element ne smije rasti i ispunjavati slobodni prostor u posudi.

Zadani flex-grow: 0

• Ako navedete flex-grow:1 za sve elemente, tada će se svi jednako rastegnuti i ispuniti sav slobodni prostor u spremniku.
• Ako jednom od elemenata navedete flex-grow:1, on će ispuniti sav slobodni prostor u spremniku i poravnanja putem justify-contenta više neće raditi: nema slobodnog prostora za poravnanje...
• Uz flex-grow:1 . Ako jedan od njih ima flex-grow:2 tada će biti 2 puta veći od svih ostalih
• Ako sve flex kutije unutar flex spremnika imaju flex-grow:3 tada će biti iste veličine
• Uz 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 spremnik širok 500 piksela i sadrži dva elementa, svaki s osnovnom širinom od 100 piksela. To znači da je u spremniku ostalo 300 slobodnih piksela. Sada, ako navedemo flex-grow:2; , a drugi flex-grow: 1; , tada će blokovi zauzeti cijelu dostupnu širinu spremnika te će širina prvog bloka biti 300px, a drugog 200px. To se objašnjava činjenicom da je raspoloživih 300px slobodnog prostora u spremniku raspoređeno između elemenata u omjeru 2:1, +200px za prvi i +100px za drugi.

Napomena: vrijednost se može navesti razlomački brojevi, na primjer: 0,5 - flex-grow:0,5

Postavlja redukcijski faktor elementa. Svojstvo je suprotno od flex-grow i određuje kako bi se element trebao smanjiti ako u spremniku nema slobodnog prostora. Oni. svojstvo počinje raditi kada je zbroj veličina svih elemenata veći od veličine spremnika.

Zadano savijanje:1

Recimo da je spremnik širok 600px i sadrži dva elementa, svaki širok 300px - flex-basis:300px; . Oni. dva elementa potpuno ispunjavaju spremnik. Dajte prvom elementu flex-shrink: 2; , a drugi flex-shrink: 1; . Sada smanjimo širinu spremnika za 300px, tj. elementi se moraju smanjiti za 300px da bi stali u spremnik. Skupljat će se 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: u vrijednosti možete navesti razlomke, na primjer: 0,5 - flex-shrink:0,5

Postavlja osnovnu širinu elementa - širinu prije nego što se izračunaju drugi uvjeti 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 vrijednostima flex-grow, flex-shrink i sadržaju unutar bloka. Uz auto, element dobiva osnovnu širinu u odnosu na sadržaj unutar njega.

Zadano: automatski

Ponekad je bolje postaviti širinu elementa kroz uobičajeno svojstvo širine. Na primjer, širina: 50%; će značiti da će element unutar spremnika biti točno 50%, ali svojstva savijanja rasta i savijanja skupljanja i dalje će raditi. Ovo može biti potrebno kada je element rastegnut sadržajem unutar njega, više nego što je navedeno u flex-basisu. Primjer.

flex-basis će biti "krut" ako su istezanje i skupljanje postavljeni na nulu: flex-basis:200px; flex-grow:0; savijanje-skupljanje:0; . Sve se to može napisati ovako: flex:0 0 200px; .

Kratki sažetak tri svojstva: flex-grow flex-shrink flex-basis .

Zadano: fleksibilno: 0 1 automatski

Međutim, možete navesti 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ćuje promjenu svojstva align-items samo za jedan element.

Zadano: iz spremnika align-items

• protežu se- element je rastegnut da u potpunosti ispuni liniju
• flex-start- element je pritisnut na početak retka
• savitljivi kraj- element je pritisnut do kraja retka
• centar- element je poravnat sa središtem linije

Osnovna linija- element je poravnat s osnovnom linijom teksta

Omogućuje promjenu redoslijeda (pozicije, pozicije) elementa u općem retku.

Zadano: poredak: 0

Prema zadanim postavkama, elementi imaju redoslijed: 0 i postavljaju se redoslijedom pojavljivanja u HTML kodu i smjerom retka. Ali ako promijenite vrijednost svojstva poredak, tada će elementi biti raspoređeni po redoslijedu vrijednosti: -1 0 1 2 3 ... . Na primjer, ako navedete redoslijed: 1 za jedan od elemenata, tada će prvo ići sve nule, a zatim element s 1.

Na taj način, primjerice, možete pomaknuti prvi element na kraj bez promjene smjera kretanja ostalih elemenata ili HTML koda.

Bilješke

Koja je razlika između flex-basis i širine?

Ispod su važne razlike između flex-basis i širine/visine:

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

flex-basis odnosi se samo na flex elemente. To znači da ako onemogućite flex za spremnik, ovo svojstvo neće imati učinka.

Apsolutni elementi spremnika ne sudjeluju u konstrukciji flex-a... To znači da flex-basis ne utječe na flex elemente spremnika ako su apsolutni position:absolute . Morat će navesti širinu/visinu.

• Kada koristite svojstvo flex, 3 vrijednosti (flex-grow/flex-shrink/flex-basis) mogu se kombinirati i kratko napisati, ali za širinu grow ili shrink morate pisati odvojeno. Na primjer: flex:0 0 50% == width:50%; savijanje-skupljanje:0; . Ponekad je jednostavno nezgodno.

Ako je moguće, ipak preferirajte fleksibilnu bazu. Koristite širinu samo kada fleksibilna osnova nije prikladna.

Razlika između flex-basis i width - greška ili značajka?

Sadržaj unutar flex elementa ga gura i ne može ići izvan njega. Međutim, ako postavite širinu koristeći width ili max-width umjesto flex-basis, tada će se element unutar flex spremnika moći proširiti izvan granica tog spremnika (ponekad je to upravo ono ponašanje koje želite). Primjer:

Primjeri Flex rasporeda

Nigdje u primjerima ne koriste se prefiksi za kompatibilnost s više preglednika. Ovo sam učinio za lakše čitanje css-a. Stoga pogledajte primjere u najnovije verzije Chrome ili Firefox.

#1 Jednostavan primjer s okomitim i vodoravnim poravnanjem

Počnimo s najjednostavnijim primjerom - okomito i vodoravno poravnanje u isto vrijeme i na bilo kojoj visini bloka, čak i gume.

Ili ovako, bez bloka unutra:

#1.2 Razdvajanje (prekid) između savitljivih blok elemenata

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

#2 Prilagodljivi izbornik na flexu

Napravimo izbornik na samom vrhu stranice. Na širokom zaslonu trebao bi biti s desne strane. U prosjeku poravnajte u sredini. A na malom svaki element mora biti u novom retku.

#3 Prilagodljiva 3 stupca

Ovaj primjer pokazuje kako brzo i praktično napraviti 3 stupca, koji će se, kada se suže, pretvoriti u 2, a zatim u 1.

Imajte na umu da se to može učiniti bez korištenja medijskih pravila, sve je na flex-u.

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

#4 Adaptivni blokovi na savitljivosti

Recimo da trebamo ispisati 3 bloka, jedan veliki i dva mala. Pritom je potrebno blokove prilagoditi malim ekranima. Radimo:

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

#5 Galerija sa savijanjem i prijelazom

Ovaj primjer pokazuje kako brzo možete napraviti slatku harmoniku sa slikama koristeći flex. Obratite pozornost na svojstvo prijelaza za flex.

#6 Flex to Flex (samo primjer)

Zadatak je napraviti fleksibilan blok. Tako da početak teksta u svakom bloku bude u istoj liniji vodoravno. Oni. Kako se širina sužava, blokovi rastu u visinu. Potrebno je da je slika na vrhu, gumb je uvijek na dnu, a tekst u sredini počinje duž jedne horizontalne linije...

Kako bi se riješio ovaj problem, sami blokovi se rastežu fleksom i postavljaju na najveću moguću širinu. Svaki unutarnji blok također je fleksibilna struktura, s rotiranom osi flex-direction:column; a element u sredini (gdje je tekst) je razvučen flex-grow:1; popuniti sav slobodan prostor, ovako se postiže rezultat - tekst je počeo jednim redom...

Više primjera

Podrška preglednika - 98,3%

Naravno, ne postoji puna podrška, ali svi moderni preglednici podržavaju flexbox dizajne. Neki i dalje zahtijevaju prefikse. Za pravu sliku, pogledajmo caniuse.com i vidjet ćemo da će 96,3% preglednika koji se danas koriste raditi bez prefiksa, a 98,3% koristi prefikse. Ovo je izvrstan pokazatelj za pouzdano korištenje flexboxa.

Kako bih znao koji su prefiksi relevantni danas (lipanj 2019.), dat ću primjer svih flex pravila s s potrebnim prefiksima:

/* Spremnik */ .flex ( display:-webkit-box; display:-ms-flexbox; display:flex; display:-webkit-inline-box; display:-ms-inline-flexbox; display:inline-flex; -webkit-box-direction:column; -ms-flex-wrap:wrap; -flex-flow:column wrap; -ms-flex-pack:justify; -ms-flex-line-pack: distribute; align-content:space-around; ) /* Elements */ .flex-item ( -webkit-box-flex:1; -ms-flex-positive:1; flex-grow:1; -ms-flex- negative:2; -ms-flex-size:100px; -ms-flex:100px; :center-self:center;webkit-ordinal-group:2;

Bolje je ako svojstva s prefiksima idu ispred izvornog svojstva.
Ovaj popis ne sadrži prefikse koji su danas nepotrebni (prema caniuseu), ali općenito ima više prefiksa.

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

Video

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

Korisni linkovi na Flexu

flexboxfroggy.com - flexbox obrazovna igra.

Flexplorer je vizualni alat za sastavljanje fleksibilnog koda.

Ništa ne stoji, tehnologije i standardi se razvijaju, pojavljuju se nove tehnike i metode za izgled web stranica, na primjer, izgled s tabelarnim elementima, koje nismo uzeli u obzir iz objektivnih razloga, zamijenjen je izgledom s plutajućim elementima.

Mnogi uređivači koda imaju praktičan dodatak za brzo označavanje ugrađen ili dostupan za preuzimanje prema zadanim postavkama, Emmet, koji vam omogućuje da napravite osnovno označavanje ovog primjera na sljedeći način: odjeljak>div*3>lorem+ Tab (vrijednost lorem generira tekst koji se pojavljuje na slici ispod).

Imajte na umu da smo bez ikakvog posebnog truda postigli da stupci našeg izgleda budu iste visine bez obzira na njihov sadržaj, i to je sjajno. Elementi

prema zadanim postavkama nisu savitljivi elementi i nalaze se u toku treći element