Pozdravljeni, habr!

Nekega lepega večera, ne da bi napovedovali kaj zanimivega, je naš klepet prejel predlog avtorja publikacije »Prevajanje 5 res uporabnih odzivnih označevalnih predlog v kodo«, ki jo je napisal spomladi 2012, da napiše predelavo članka, vendar z uporabo FlexBoxa. ter priloženo razlago, kaj in kako deluje. Po nekaj dvomih je zanimanje za globlje razumevanje specifikacije vseeno zmagalo in z veseljem sem se usedel za tipkanje teh istih primerov. Ko smo se poglobili v to področje, so se začele razjasnjevati številne nianse, ki so prerasle v nekaj več kot le preoblikovanje postavitev. Na splošno želim v tem članku govoriti o tako čudoviti specifikaciji, imenovani "CSS Fleksibilni modul postavitve polja" in pokazati nekaj od tega zanimive lastnosti in primeri uporabe. Vljudno vabim vse zainteresirane, da se pridružite hekanju.

Na kar bi vas rad opozoril, je, da bo razvijalec za ustvarjanje postavitve na FlexBoxu potreboval določeno stopnjo prilagoditve. Iz lastnega primera sem čutil, da dolgoletne izkušnje igrajo grdo šalo. FlexBox zahteva nekoliko drugačen način razmišljanja o nizanju elementov v toku.

Tehnični del

Preden nadaljujete s kakršnimi koli primeri, je vredno razumeti, katere lastnosti so vključene v to specifikacijo in kako delujejo. Ker nekateri od njih na začetku niso zelo jasni, nekateri pa so obdani z miti, ki nimajo nobene zveze z resničnostjo.

torej. FlexBox ima dve glavni vrsti elementov: Flex Container in njegov otroški elementi- Flex Item. Če želite inicializirati vsebnik, preprosto dodelite elementu prek css zaslon: flex; oz zaslon: inline-flex;. Razlika med flexom in inline-flexom je le v principu interakcije z elementi, ki obkrožajo vsebnik, podobno kot display: block; in prikaz: inline-block;, v tem zaporedju.

Znotraj upogljivega vsebnika sta ustvarjeni dve osi, glavna os in pravokotna ali prečna os. Večinoma so upogljivi elementi poravnani vzdolž glavne osi, nato pa vzdolž prečne osi. Privzeto je glavna os vodoravna in usmerjena od leve proti desni, prečna os pa navpična in usmerjena od zgoraj navzdol.

Smer osi je mogoče nadzorovati z lastnostjo css flex-direction. Ta lastnost ima več vrednosti:
vrstica(privzeto): glavna os vsebnika flex ima enako usmerjenost kot vstavljena os trenutnega načina smeri vrstice. Začetek (main-start) in konec (main-end) smeri glavne osi ustrezata začetku (inline-start) in koncu (inline-end) inline-osi.
vrstica-obratna: Vse je enako kot v vrsti, le glavni začetek in glavni konec sta zamenjana.
stolpec: enako kot vrstica, le da je zdaj glavna os usmerjena od zgoraj navzdol.
stolpec-obraten: enako kot obratna vrstica, le glavna os je usmerjena od spodaj navzgor.
Kako to deluje, si lahko ogledate v primeru na jsfiddle.

Privzeto so vsi elementi flex v vsebniku postavljeni v eno vrstico, tudi če se ne prilegajo v vsebnik, segajo čez njegove meje. To vedenje se preklaplja z lastnostjo flex-ovitek. Ta lastnost ima tri stanja:
nowrap(privzeto): elementi Flex so razvrščeni v eno vrstico od leve proti desni.
zaviti: upogljivi elementi so zgrajeni v večvrstičnem načinu, prenos poteka v smeri prečne osi, od zgoraj navzdol.
zaviti-obratno: enako kot wrap, vendar se ovija od spodaj navzgor.
Poglejmo si primer.

Za udobje je na voljo dodatna lastnost flex-flow, v katerem lahko hkrati določite flex-direction in flex-ovitek. Videti je takole: flex-flow:

Elemente v vsebniku je mogoče poravnati z lastnostjo justify-content vzdolž glavne osi. Ta lastnost traja kar pet različne možnosti vrednote.
flex-start(privzeto): elementi Flex so poravnani z izhodiščem glavne osi.
flex-end: elementi so poravnani na konec glavne osi
center: Elementi so poravnani s središčem glavne osi
presledek med: elementi zavzamejo celotno razpoložljivo širino v posodi, skrajni elementi so tesno stisnjeni ob robove posode, prosti prostor pa je enakomerno razporejen med elementi.
prostor-okoli: Fleksibilni elementi so poravnani tako, da je prosti prostor enakomerno porazdeljen med elementi. Vendar velja omeniti, da bo razmik med robom posode in zunanjimi elementi za polovico manjši od razmaka med elementi v sredini vrste.
Seveda lahko kliknete na primer delovanja te lastnosti.

To pa še ni vse, imamo tudi možnost poravnave elementov vzdolž prečne osi. Z uporabo lastnine align-items, ki ima tudi pet različnih vrednosti, lahko dosežete zanimivo vedenje. Ta lastnost vam omogoča poravnavo elementov v vrsti relativno drug glede na drugega.
flex-start: vsi elementi so potisnjeni na začetek vrstice
flex-end: elementi so potisnjeni na konec vrstice
center: elementi so poravnani na sredino vrstice
izhodišče: Elementi so poravnani z osnovno črto besedila
raztegniti(privzeto): elementi so raztegnjeni, da zapolnijo celotno vrstico.

Druga lastnost, podobna prejšnji, je poravnati vsebino. Je edini odgovoren za poravnavo celotnih linij glede na vsebnik flex. Ne bo imelo učinka, če elementi flex zasedejo eno vrstico. Lastnina ima šest različnih vrednosti.
flex-start: vse črte so pritisnjene na začetek prečne osi
flex-end: vse črte so pritisnjene na konec prečne osi
center: Vse linije pakiranja so poravnane s središčem prečne osi
presledek med: črte so razporejene od zgornjega roba proti dnu, tako da med črtami ostane prazen prostor, medtem ko so najbolj zunanje črte pritisnjene ob robove posode.
prostor-okoli: Črte so enakomerno porazdeljene po posodi.
raztegniti(privzeto): vrstice so raztegnjene, da zavzamejo ves razpoložljivi prostor.
V tem primeru lahko poskusite, kako delujeta align-items in align-content. Ti dve lastnosti sem posebej predstavil na enem primeru, saj sta precej tesno povezani in vsaka opravlja svojo nalogo. Upoštevajte, kaj se zgodi, ko so elementi postavljeni v eno ali več vrstic.

Parametre upogljivega vsebnika smo razvrstili, ostalo je le še ugotoviti lastnosti upogljivih elementov.
Prva lastnost, s katero se bomo seznanili, je naročilo. Ta lastnost vam omogoča spreminjanje položaja določenega elementa v toku. Privzeto imajo vsi elementi flex vrstni red: 0; in so zgrajene po naravnem toku. V primeru lahko vidite, kako se elementi zamenjajo, če se zanje uporabijo različne vrednosti naročila.

Ena glavnih lastnosti je flex-osnova. S to lastnostjo lahko določimo osnovno širino elementa flex. Privzeta vrednost je avto. Ta lastnost je tesno povezana z flex-grow in flex-shrink, o katerem bom govoril malo kasneje. Sprejema vrednost širine v px, %, em in drugih enotah. V bistvu to ni striktno širina flex elementa, je neke vrste izhodišče. Glede na to, kateri element se razteza ali krči. V samodejnem načinu element dobi osnovno širino glede na vsebino v njem.

flex-grow na več virih ima popolnoma napačen opis. Piše, da naj bi določal razmerje velikosti elementov v posodi. Pravzaprav to ni res. Ta lastnost določa faktor povečave elementa, če obstaja prosti prostor v posodi. Ta lastnost ima privzeto vrednost 0. Predstavljajmo si, da imamo vsebnik flex s širino 500 slikovnih pik, v njem pa sta dva elementa flex, vsak z osnovno širino 100 slikovnih pik. To pusti še 300 slikovnih pik prostega prostora v vsebniku. Če določimo flex-grow: 2; za prvi element in flex-grow: 1; za drugi element. Posledično bodo ti bloki zavzeli celotno razpoložljivo širino vsebnika, le širina prvega bloka bo 300px, drugega pa samo 200px. Kaj se je zgodilo? Zgodilo se je, da je bilo razpoložljivih 300px prostega prostora v vsebniku porazdeljenih med elemente v razmerju 2:1, +200px za prvega in +100px za drugega. To dejansko deluje tako.

Tu gladko preidemo na drugo podobno lastnost, namreč flex-shrink. Privzeta vrednost je 1. Nastavi tudi faktor za spreminjanje širine elementov, le v nasprotni smeri. Če ima posoda širino manj kot vsota osnovne širine elementov, potem ta lastnost velja. Na primer, vsebnik ima širino 600 slikovnih pik, flex-basis elementov pa 300 slikovnih pik. Prvemu elementu dodelite flex-shrink: 2;, drugemu elementu pa flex-shrink: 1;. Zdaj skrčimo posodo za 300 slikovnih pik. Zato je vsota širin elementov 300px večja od vsebnika. Ta razlika je porazdeljena v razmerju 2:1, tako da odštejemo 200px od prvega bloka in 100px od drugega. Nova velikost elementov je 100px in 200px za prvi oziroma drugi element. Če nastavimo flex-shrink na 0, preprečimo, da bi se element skrčil na velikost, manjšo od njegove osnovne širine.

Pravzaprav je to zelo poenostavljen opis, kako vse skupaj deluje, tako da je jasno splošno načelo. Bolj podrobno, če koga zanima, je algoritem opisan v specifikaciji.

Vse tri lastnosti lahko zapišemo v skrajšani obliki z izrazom flex. To izgleda takole:
upogib: ;
Lahko pa zapišemo še dve skrajšani različici, flex:auto; in flex: brez;, kar pomeni flex: 1 1 samodejno; in prilagodljivost: 0 0 samodejno; oz.

Zadnja lastnost upogljivih elementov ostaja poravnati se. Tukaj je vse preprosto, enako kot align-items za vsebnik, ki vam omogoča, da preglasite poravnavo za določen element.

To je to, naveličan sem tega! Navedite primere!

Uredili smo tehnični del, izkazalo se je, da je precej dolgotrajen, vendar se je treba vanj vživeti. Zdaj lahko preidemo na praktično uporabo.
Med razvojem teh »petih res uporabnih odzivnih predlog postavitve« smo morali rešiti tipične situacije, s katerimi se razvijalci pogosto srečujejo. S flexboxom postane implementacija teh rešitev lažja in bolj prilagodljiva.
Vzemimo isto 4. postavitev, ker ... ima najbolj zanimive elemente.

Najprej določimo glavno širino strani, jo poravnamo na sredino in pritisnemo nogo na dno strani. Kot vedno na splošno.

Html (ozadje: #ccc; najmanjša višina: 100 %; družina pisav: sans-serif; zaslon: -webkit-flex; zaslon: flex; flex-direction: stolpec; ) telo ( rob: 0; oblazinjenje: 0 15 slikovnih pik ; display: -webkit-flex; display: flex; flex-direction: column; flex: auto; ) .header ( width: 100 %; max-width: 960px; min-width: 430px; margin: 0 auto 30px; padding : 30px 0 10px; display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content: space-between; box-sizing: border-box; ) .main ( width: 100 %; max-width : 960px; min-width: 430px; margin: auto; flex-grow: 1; box-sizing: border-box; ) .footer (ozadje: #222; širina: 100 %; max-width: 960px; min-width : 430px; barva: #eee; rob: samodejno; oblazinjenje: 15px; velikost polja: border-box; )

Zaradi dejstva, da smo podali flex-grow: 1 za .main; raztegne se do celotne razpoložljive višine in s tem pritisne nogo na dno. Bonus te rešitve je, da je noga lahko nefiksne višine.

Zdaj pa postavimo logotip in meni v glavo.
.logo (velikost pisave: 0; rob: -10px 10px 10px 0; zaslon: flex; flex: brez; align-items: center;) .logo:before, .logo:after ( content: ""; display: block ; ) .logo:before (ozadje: #222; širina: 50px; višina: 50px; margin: 0 10px 0 20px; border-radius: 50%; ) .logo:after (ozadje: #222; širina: 90px; višina : 30px; ) .nav ( margin: -5px 0 0 -5px; display: -webkit-flex; display: flex; flex-wrap: wrap; ) .nav-itm (ozadje: #222; širina: 130px; višina: 50px; velikost pisave: 1,5 rem; barva: #eee; dekoracija besedila: brez; rob: 5px 0 0 5px; display: -webkit-flex; display: flex; justify-content: center; align-items: center; )

Ker ima glava flex-wrap: wrap; in justify-content: presledek-med; Logotip in meni sta razpršena na različnih straneh glave in če ni dovolj prostora za meni, se ta elegantno premakne pod logotip.

Nato vidimo veliko objavo ali pasico, težko je reči, kaj konkretno je, vendar to ni bistvo. Na desni imamo sliko, na levi pa besedilo z naslovom. Osebno se držim ideje, da morajo biti vsi elementi čim bolj prilagodljivi, ne glede na to, ali je postavitev prilagodljiva ali statična. V tem prispevku imamo torej stransko vrstico, v kateri je postavljena slika; strogo gledano ne moremo natančno reči, kakšno širino potrebujemo, ker imamo danes veliko sliko, jutri majhno in ne želimo ponavljati elementa vsakič iz nič. To pomeni, da potrebujemo stransko vrstico, da zavzame mesto, ki ga potrebuje, preostali prostor pa bo namenjen vsebini. Naredimo to:

Box (velikost pisave: 1,25 rem; višina vrstice: 1,5; slog pisave: poševno; rob: 0 0 40px -50px; display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content: center; ) .box-base ( margin-left: 50px; flex: 1 0 430px; ) .box-side ( margin-left: 50px; flex: none; ) .box-img ( max-width: 100 %; višina : avto;)

Kot lahko vidite za .box-base, kjer imamo naslov in besedilo, sem določil osnovno širino z flex-basis: 430px;, in tudi prepovedana uporaba krčenja blokov upogibno krčenje: 0;. S to manipulacijo smo rekli, da vsebina ne sme biti manjša od 430 slikovnih pik. In glede na to, da za .box navajam flex-wrap: ovoj; v trenutku, ko se stranska vrstica in vsebina ne prilegata v container.box, bo stranska vrstica samodejno padla pod vsebino. In vse to brez aplikacije @mediji! Mislim, da je to res zelo kul.

Ostala nam je vsebina v treh stolpcih. Za to težavo obstaja več rešitev, pokazal bom eno od njih; v drugih postavitvah obstaja še ena možnost.
Ustvarimo vsebnik, ga poimenujmo .content in ga konfigurirajmo.
.content ( margin-bottom: 30px; display: -webkit-flex; display: flex; flex-wrap: wrap; )

Vsebnik ima tri stolpce, .pasice, .objave, .komentarje
.banners ( flex: 1 1 200px; ) .posts ( margin: 0 0 30px 30px; flex: 1 1 200px; ) .comments ( margin: 0 0 30px 30px; flex: 1 1 200px; )

Stolpcem sem dal osnovno širino 200px, da se stolpci ne bi preveč zožili, vendar bi bilo bolje, če bi bili po potrebi pomaknjeni drug pod drugega.

Glede na postavitev brez @media z vsebino ne bomo mogli, zato še malo prilagodimo obnašanje stolpcev po širini<800px и <600px.
@medijski zaslon in (max-width: 800px) ( .banners ( margin-left: -30px; display: -webkit-flex; display: flex; flex-basis: 100%; ) .posts ( margin-left: 0; ) ) @medijski zaslon in (max-width: 600px) ( .content ( display: block; ) .banners ( margin: 0; display: block; ) .comments ( margin: 0; ) )

To je vsa čarovnija, ko gre za ustvarjanje postavitve na FlexBoxu. Še ena naloga, ki mi je bila všeč, je v 5. postavitvi, konkretno se nanaša na prilagajanje vsebine.

Vidimo, kako so pri ločljivosti namizja objave zgrajene v mreži treh v vrsti. Ko širina vidnega polja postane manjša od 800 slikovnih pik, se mreža spremeni v stolpec z objavami, kjer je fotografija objave izmenično poravnana na levi in ​​desni strani vsebine objave. In če je širina manjša od 600 slikovnih pik, je fotografija objave popolnoma skrita.
.grid ( display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content: space-between; ) .grid-itm ( margin-bottom: 30px; flex-basis: calc(33,33% - 30px) * 2/3); display: -webkit-flex; display: flex; flex-wrap: wrap; ) .grid-img ( margin: 0 auto 20px; flex: 0 1 80 %; ) .grid-cont( flex: 0 1 100%; ) .grid-title ( text-align: center; ) @media screen and (max-width: 800px) ( .grid-itm ( flex-wrap: nowrap; flex-basis: 100 %; ) . grid-img ( flex: 0 0 auto; ) .grid-itm:nth-child(even) .grid-img (margin: 0 0 0 30px; order: 2; ) .grid-itm:nth-child(odd) .grid-img ( margin: 0 30px 0 0; ) .grid-cont ( flex: 1 1 auto; ) .grid-title ( text-align: levo; ) ) @medijski zaslon in (max-width: 600px) ( .grid-img (prikaz: nič; ) )

Pravzaprav je to le majhen del tega, kar je mogoče implementirati s FlexBoxom. Specifikacija vam omogoča izdelavo zelo zapletenih postavitev strani z uporabo preproste kode.

Specifikacija Flexbox (Flexible Box Layout Module). je način pozicioniranja elementov v vodoravni ali navpični smeri.

Flexbox združuje nabor lastnosti za nadrejeni vsebnik flex in podrejene elemente flex.

Da element postane vsebnik flex, mora biti dodeljen zaslon: flex; oz zaslon: inline-flex;(blok oz. linija).

Znotraj flex kontejnerja sta ustvarjeni dve osi: glavna in nanjo pravokotne prečne osi. Najprej so upogljivi elementi poravnani vzdolž glavne osi, nato pa vzdolž prečne.

Lastnosti posode Flex
flex-direction	Določa smer glavne osi. Možne vrednosti: vrstica– od leve proti desni (privzeto); vrstica-obratna- od desne proti levi; stolpec- zgoraj navzdol; stolpec-obraten- dol gor.
flex-ovitek	Določa, ali je vsebnik večvrstični. Možne vrednosti: nowrap– fleksibilni elementi so postavljeni v eno linijo; če se ne prilegajo vsebniku, gredo preko njegovih meja (privzeto); zaviti– flex elementi so nanizani v več vrstah, če ne sodijo v eno; zaviti-obratno- podoben zaviti, vendar se prenos zgodi od spodaj navzgor.
flex-flow	Definira dva parametra hkrati: flex-direction in flex-wrap. Na primer, flex-flow: ovijanje stolpca;
justify-content	Določa poravnavo elementov vzdolž glavne osi. Možne vrednosti: flex-start– upogljivi elementi so pritisnjeni na začetek glavne osi (privzeto); flex-end– upogljivi elementi so pritisnjeni na konec glavne osi; center– upogljivi elementi so poravnani na sredino glavne osi; presledek med– upogljivi elementi so razporejeni vzdolž glavne osi, pri čemer je prvi element pritisnjen na začetek osi, zadnji pa na konec; prostor-okoli– flex elementi so razporejeni vzdolž glavne osi, pri čemer je prosti prostor enakomerno razdeljen med elemente. Vendar velja omeniti, da se presledki seštevajo in da je razdalja med elementi dvakrat večja od razdalje med robovi posode in najbolj zunanjimi elementi.
align-items	Določa poravnavo elementov vzdolž prečne osi. Možne vrednosti: flex-start– upogljivi elementi so pritisnjeni na začetek prečne osi (privzeto); flex-end– upogljivi elementi so pritisnjeni na konec prečne osi; center– upogljivi elementi so poravnani na sredino prečne osi; izhodišče– upogljivi elementi so poravnani vzdolž osnovne črte. Osnovna črta je namišljena črta, ki poteka vzdolž spodnjega roba znakov brez upoštevanja previsov, kot so črke "d", "r", "ts", "sch"; raztegniti– fleksibilni elementi se raztegnejo in zavzamejo ves razpoložljivi prostor vzdolž prečne osi. Če pa imajo elementi določeno višino, potem raztegniti bo prezrt.
poravnati vsebino	Določa poravnavo prečne osi celotnih vrstic fleksibilnih elementov. Možne vrednosti: flex-start– vrste upogibnih elementov so pritisnjene na začetek prečne osi (privzeto); flex-end– vrste upogibnih elementov so pritisnjene na konec prečne osi; center– vrste upogibnih elementov so poravnane na sredino prečne osi; presledek med– vrste upogibnih elementov so razporejene vzdolž prečne osi, pri čemer je prva vrsta pritisnjena na začetek osi, zadnja pa na konec; prostor-okoli– vrste upogibnih elementov so razporejene vzdolž prečne osi, pri čemer je prosti prostor enakomerno razdeljen med vrstami. Vendar velja omeniti, da se presledki seštevajo in je razdalja med črtami dvakrat večja od razdalje med robovi posode in skrajnimi črtami. raztegniti– vrste flex elementov so raztegnjene, tako da zavzamejo ves razpoložljivi prostor vzdolž prečne osi. Če pa imajo elementi določeno višino, potem raztegniti bo prezrt. Ta lastnost ne deluje za enovrstični flex vsebnik.

Lastnosti elementa Flex
naročilo	Določa vrstni red, v katerem se posamezni element flex pojavi v vsebniku flex. Podano kot celo število. Privzeta vrednost je 0, nato pa si elementi sledijo v naravnem vrstnem redu. Pomen naročilo določa težo položaja elementa v zaporedju namesto njegovega absolutnega položaja.
flex-osnova	Določa osnovno velikost flex elementa pred dodelitvijo prostora znotraj vsebnika. Lahko se določi v px, %, em in drugih merskih enotah. V bistvu je to nekakšna izhodiščna točka, glede na katero se element raztegne ali stisne. Privzeta vrednost - avto, pri čemer je velikost elementa odvisna od velikosti notranje vsebine.
flex-grow	Določa, koliko prostega prostora znotraj vsebnika bo element flex dodal svoji osnovni velikosti. Podano s celim številom, ki služi kot delež. Privzeta vrednost je 0. Če vsi elementi flex-grow: 1, potem bodo vse enake velikosti. Če en element flex nastavite na 2, bo svoji osnovni velikosti dodal dvakrat več kot drugi.
flex-shrink	Določa, za koliko se bo element flex skrčil glede na zmanjšanje sosednjih elementov znotraj vsebnika flex, če ni dovolj prostora. Podano s celim številom, ki služi kot delež. Privzeta vrednost je 1. Če je en element flex nastavljen na upogibno krčenje: 2, potem bo od njegove osnovne velikosti odštet dvakrat toliko kot od drugih, če je vsebnik manjši od vsote osnovnih velikosti elementov, ki jih vsebuje.
flex	Določa tri parametre hkrati: flex-grow, flex-shrink, flex-basis. Na primer, flex: 1 1 200px;
poravnati se	Preglasi privzeto poravnavo oz align-items, za določen flex element. Možne vrednosti: flex-start– flex element je pritisnjen na začetek prečne osi (privzeto); flex-end– upogljivi element je pritisnjen na konec prečne osi; center– upogljivi element je poravnan na sredino prečne osi; izhodišče– upogljivi element je poravnan z osnovno črto; raztegniti– upogljivi elementi so raztegnjeni in zavzamejo ves razpoložljivi prostor vzdolž prečne osi. Če pa je podana višina, potem raztegniti bo prezrt.

Značilnosti uporabe Flexboxa v praksi

1. Desna poravnava

Z razvojem internetnih tehnologij, vključno z HTML in CSS, se razvijalcem nenehno odpirajo nove priložnosti za ustvarjanje spletnih strani. Eden od problemov ostaja prisotnost zastarelih različic brskalnikov. To velja predvsem za Internet Explorer, še posebej za tiste, ki uporabljajo Windows XP.

Oblikovalec postavitve internetne strani se pogosto sooča z nalogo poravnave blokov CSS na strani. Na primer, vse bloke lahko razporedite enega za drugim, vodoravno, jih postavite na sredino ali na dno posode itd. S pojavom parametra lastnosti zaslona - flex je ta naloga močno poenostavljena. Ta tehnologija je zasnovana za postavitev podrejenih elementov, to je elementov znotraj bloka ali vsebnika. Parametrov te postavitve je več kot dovolj.

Torej, najprej morate ustvariti nadrejeni vsebnik. Ustvarimo ga tako, da se okrog njega zaradi jasnosti pojavi okvir. Koda CSS za vsebnik bo naslednja:

Posoda (
širina:450px;
višina:250px;
obroba: 1px polna #000000;
zaslon: flex;
flex-wrap: ovoj;
align-content:stretch;
}

Glavna lastnina je zaslon: flex. Če želite, da bodo podrejeni elementi postavljeni v več vrsticah, dodajte lastnost - flex-wrap: wrap.

In samo lastnina poravnati vsebino določa, kako naj bodo bloki css postavljeni in poravnani. Parameter raztegniti omogoča, da so bloki enakomerno razporejeni v posodi. Hkrati je mogoče samodejno izbrati njihovo višino. Kako izgleda? Dodajmo css za notranje bloke.

Vsebnik div (
širina: 50px;
ozadje:zeleno;
margin:5px;
}

Višine ne postavljamo namenoma. Koda HTML izgleda takole:

Rezultat kode je prikazan na sliki.

Kaj se zgodi, če določite tudi višino blokov:

Vsebnik div (
širina: 50px;
višina: 50px;
ozadje:zeleno;
margin:5px;
}

Zdaj odstranimo višino in naredimo širino blokov enako 100 %

Vsebnik div (
širina: 100 %;
ozadje:zeleno;
margin:5px;
}

Razumemo.

Še en parameter poravnati vsebino je center in omogoča poravnavo vseh blokov v sredini.

Posoda (
širina:450px;
višina:250px;
obroba: 1px polna #000000;
zaslon: flex;
flex-wrap: ovoj;
align-content:center;
}
.container div(
širina: 50px;
višina:50px;
ozadje:zeleno;
margin:5px;
}

rezultat:

Druga možnost flex-end lastnosti poravnati vsebino vam bo omogočilo, da postavite bloke na dno posode.

Posoda (
širina:450px;
višina:250px;
obroba: 1px polna #000000;
zaslon: flex;
flex-wrap: ovoj;
align-content:flex-end;
}

Parameter flex-start bo naredil vse ravno nasprotno.

Posoda (
širina:450px;
višina:250px;
obroba: 1px polna #000000;
zaslon: flex;
flex-wrap: ovoj;
align-content:flex-start;
}

Še en parameter lastnosti poravnati vsebino, katerih rezultatov ne bo mogoče ustvariti brez posode flex – to presledek med. Lastnost postavi prvo vrstico na vrh in drugo na dno, kar ustvari prazen prostor med njima.

Del kode CSS:

Posoda (
širina:450px;
višina:250px;
obroba: 1px polna #000000;
zaslon: flex;
flex-wrap: ovoj;
align-content:space-between;
}

rezultat:

Lastnina prostor-okoli doda prazen prostor na vrhu in na dnu. Poleg tega je vsak od njih enak polovici praznega prostora v središču.

Posoda (
širina:450px;
višina:250px;
obroba: 1px polna #000000;
zaslon: flex;
flex-wrap: ovoj;
align-content:space-around;
}

Torej lastnost css poravnati vsebino ima veliko parametrov: raztezanje, upogibni začetek, upogibni konec, sredina, presledek med, presledek okoli.

Kot lahko vidite iz zgornjih primerov, s spreminjanjem enega parametra lastnosti css align-content uporabimo poravnavo blokov css s tehnologijo flex na popolnoma različne načine. Ta koda ne deluje v Internet Explorerju do vključno različice 10.

V tem članku bomo predstavili tehnologijo CSS Flexbox, zasnovano za ustvarjanje prilagodljivih postavitev spletnih strani.

Namen CSS Flexbox

CSS Flexbox je za ustvarjanje prilagodljivih postavitev. S to tehnologijo lahko zelo enostavno in fleksibilno razporedite elemente v posodo, porazdelite razpoložljivi prostor mednje in jih tako ali drugače poravnate, tudi če nimajo določenih dimenzij.

CSS Flexbox omogoča ustvarjanje odzivnih dizajnov veliko lažje kot uporaba Float in pozicioniranja.

Flexbox se lahko uporablja za označevanje CSS celotne strani in njenih posameznih blokov.

Podpora brskalnika za CSS Flexbox

CSS Flexbox podpirajo vsi sodobni brskalniki, ki so trenutno v uporabi (z uporabo predpon: IE10+, Edge12+, Firefox 2+, Chrome 4+, Safari 3.1+, Opera 12.1+, iOS Safari 3.2, Opera mini, Android 2.1+, Blackberry 7+) .

Osnove CSS Flexbox

Ustvarjanje oznak CSS z uporabo Flexboxa se začne z nastavitvijo lastnosti prikaza CSS zahtevanega elementa HTML na flex ali flex-inline.

Po tem ta element postane vsebnik flex in vse njegovo neposredno podrejeni elementi so upogljivi elementi. Poleg tega, ko govorimo o flexboxu, mislimo le na element z display:flex ali display:flex-inline in vse elemente neposredno ki se nahaja v njem. Tako sta v CSS Flexbox le dve vrsti elementov: vsebnik flex in element flex.

Lastnosti predpone in največje širine so bile dodane v CSS za podporo postavitve v večini brskalnikov.

Če želite "pretvoriti" blok v vsebnik flex, uporabite razred vrstice. Nastavitev širine elementov flex .col__article in .col__aside znotraj vsebnika flex se izvede z lastnostjo CSS flex.

Kot primer označimo drugo nogo z uporabo flexboxa in ustvarimo blok, sestavljen iz treh elementov v elementu .col__article (najmanjša širina enega elementa je 300 slikovnih pik). V nogo bomo postavili štiri bloke (minimalna širina enega bloka je 200px).

Lastnost vrstnega reda nadzira vrstni red, v katerem se podrejeni elementi pojavljajo v vsebniku flex. Privzeto so razvrščeni v vrstnem redu, kot so bili prvotno dodani v vsebnik flex.

Vrednote

.flex-item ( naročilo:<целое число>; }

Elemente Flex je mogoče preurediti z uporabo te preproste lastnosti brez spreminjanja kode HTML.

Privzeta vrednost: 0.

flex-grow

Ta lastnost podaja faktor rasti, ki določa, za koliko bo postavka flex zrasla glede na druge postavke flex v vsebniku flex pri dodeljevanju pozitivnega prostega prostora.

Vrednote

.flex-item (flex-grow:<число>; }

Če imajo vsi elementi flex enako vrednost flex-grow, bodo vsi elementi v vsebniku imeli enako velikost.

Drugi flex element zavzame več prostora glede na velikost drugih flex elementov.

Privzeta vrednost: 0.

flex-shrink

flex-shrink podaja faktor krčenja, ki določa, koliko se bo flex element skrčil glede na druge flex elemente v vsebniku flex pri porazdelitvi negativnega prostega prostora.

Vrednote

.flex-item ( flex-shrink:<число>; }

Privzeto je mogoče skrčiti vse elemente flex-shrink, vendar če nastavimo vrednost flex-shrink na nič (brez krčenja), potem elementi ohranijo prvotno velikost.

Privzeta vrednost: 1.

Negativna števila niso dovoljena.

flex-osnova

Ta lastnost ima enake vrednosti kot lastnosti širine in višine in določa začetno osnovno velikost elementa flex, preden se prosti prostor dodeli v skladu z razmerji.

Vrednote

.flex-item ( flex-basis: auto |<ширина>; }

flex-basis je podana za četrto postavko flex in narekuje njeno začetno velikost.

Privzeta vrednost:avto.

flex

Ta lastnost je okrajšava za lastnosti flex-grow, flex-shrink in flex-basis. Med drugimi vrednostmi lahko nastavite tudi samodejno (1 1 samodejno ) in nič (0 0 samodejno ).

Vrednote

.flex-item (flex: nič | samodejno | [ ? || ]; }

Privzeta vrednost: 0 1 avto .

W3C priporoča uporabo skrajšane lastnosti flex namesto posameznih lastnosti, ker flex pravilno ponastavi vse nedoločene komponente za običajno uporabo.

poravnati se

Lastnost align-self vam omogoča, da preglasite privzeto poravnavo (ali vrednost, določeno prek align-items ) za posamezne elemente flex. Za razumevanje razpoložljivih vrednosti glejte opis align-items za vsebnik flex.

Vrednote

.flex-item ( align-self: auto | flex-start | flex-end | center | baseline | stretch; )

Za tretji in četrti element flex je bila poravnava na novo definirana z lastnostjo align-self.