Vetia align-content specifikon llojin e shtrirjes së linjave brenda një kontejneri flex përgjatë boshtit tërthor nëse ka hapësirë të lirë.
Ajo vlen për: enë përkulëse.
Vlera e paracaktuar: shtrirje.
Flex-start Linjat janë të vendosura në fillim të boshtit tërthor. Çdo rresht tjetër është i barabartë me atë të mëparshëm. Flex-end Rreshtat vendosen duke filluar nga fundi i boshtit kryq. Çdo rresht i mëparshëm është i barabartë me tjetrin. qendër Vijat vendosen në qendër të enës. space-midis Vijat janë të shpërndara në mënyrë të barabartë në enë dhe distanca ndërmjet tyre është e njëjtë. hapësirë-rreth Linjat janë të ndara në mënyrë të barabartë në mënyrë që hapësira ndërmjet dy vijave ngjitur të jetë e njëjtë. Hapësira boshe para rreshtit të parë dhe pas rreshtit të fundit është e barabartë me gjysmën e hapësirës midis dy rreshtave ngjitur. hapësirë në mënyrë të barabartë Rreshtat shpërndahen në mënyrë të barabartë. Hapësira e bardhë para rreshtit të parë dhe pas rreshtit të fundit është e njëjtë me gjerësinë e vijave të tjera. shtrirje Linjat shtrihen në mënyrë të barabartë për të mbushur hapësirën e disponueshme.
Vetia align-content rreshton linjat e një kontejneri flex brenda kontejnerit flex kur ka hapësirë shtesë në boshtin kryq, ngjashëm me mënyrën se si justify-content rreshton artikujt individual brenda boshtit kryesor. Shënim, kjo veti nuk ka asnjë efekt në një kontejner flex me një linjë. Vlerat kanë kuptimet e mëposhtme:
Shënim: Vetëm kontejnerët fleksibël me shumë rreshta kanë ndonjëherë hapësirë të lirë në boshtin kryq për linjat që do të rreshtohen, sepse në një kontejner fleksibël me një linjë, vija e vetme shtrihet automatikisht për të mbushur hapësirën.
Zbatohet për: kontejnerë fleksibël.
Fillestare: shtrirje.
Linjat Flex-start janë të paketuara drejt fillimit të kontejnerit flex. Skaji i nisjes së tërthortë i vijës së parë në enën e përkuljes vendoset në të njëjtën linjë me skajin e nisjes së tërthortë të enës përkulëse dhe çdo rresht pasues vendoset në të njëjtën linjë me vijën e mëparshme. Linjat me fund të përkulur janë të paketuara drejt fundit të kontejnerit flex. Skaji kryq i vijës së fundit vendoset në të njëjtën linjë me skajin kryq të enës përkulëse dhe secila vijë e mëparshme vendoset në të njëjtën linjë me vijën pasuese. qendër Linjat janë të paketuara drejt qendrës së kontejnerit flex. Linjat në kontejnerin fleksibël vendosen në nivel me njëra-tjetrën dhe rreshtohen në qendër të kontejnerit fleks, me sasi të barabarta hapësire ndërmjet skajit të përmbajtjes së nisjes së tërthortë të kontejnerit fleks dhe vijës së parë në kontejnerin fleks, dhe ndërmjet skaji i përmbajtjes kryq i kontejnerit flex dhe vija e fundit në kontejnerin flex. (Nëse hapësira e mbetur e lirë është negative, linjat do të vërshojnë në mënyrë të barabartë në të dy drejtimet.) Hapësira ndërmjet rreshtave shpërndahet në mënyrë të barabartë në kontejnerin flex. Nëse hapësira e lirë e mbetur është negative, kjo vlerë është identike me fillimin e përkuljes. Përndryshe, skaji i fillimit tërthor i vijës së parë në kontejnerin flex vendoset në të njëjtën linjë me skajin e përmbajtjes së nisjes së tërthortë të kontejnerit flex, skaji kryq i vijës së fundit në kontejnerin flex vendoset në të njëjtin nivel me skajin e përkuljes. skaji i përmbajtjes fundore të kontejnerit flex, dhe linjat e mbetura në kontejnerin flex shpërndahen në mënyrë që hapësira ndërmjet çdo dy linjash ngjitur të jetë e njëjtë. hapësirë-rreth Linjat shpërndahen në mënyrë të barabartë në kontejnerin flex, me hapësira gjysmë të përmasave në të dy skajet. Nëse hapësira e lirë e mbetur është negative, kjo vlerë është identike me qendrën. Përndryshe, linjat në kontejnerin flex shpërndahen në atë mënyrë që hapësira ndërmjet çdo dy linjash ngjitur të jetë e njëjtë, dhe hapësira ndërmjet rreshtave të parë/të fundit dhe skajeve të kontejnerit fleksibël të jetë sa gjysma e hapësirës ndërmjet vijave të përkulura. hapësirë në mënyrë të barabartë Linjat shpërndahen në mënyrë të barabartë në kontejnerin flex. Nëse hapësira e lirë e mbetur është negative, kjo vlerë është identike me qendrën. Përndryshe, linjat në kontejnerin flex shpërndahen në atë mënyrë që hapësira ndërmjet çdo linje fleksi të jetë e njëjtë. shtrirje Linjat shtrihen për të zënë hapësirën e mbetur. Nëse hapësira e lirë e mbetur është negative, kjo vlerë është identike me fillimin e përkuljes. Përndryshe, hapësira e lirë ndahet në mënyrë të barabartë midis të gjitha rreshtave, duke rritur madhësinë e tyre kryq.
Flexbox CSS (Moduli fleksibël i paraqitjes së kutisë)- Moduli fleksibël i paraqitjes së kontejnerëve - është një mënyrë e rregullimit të elementeve, bazuar në idenë e një boshti.
Flexbox përbëhet nga enë fleksibël Dhe artikuj fleksibël. Elementet fleksibël mund të organizohen në një rresht ose kolonë, dhe hapësira e mbetur e lirë shpërndahet midis tyre në mënyra të ndryshme.
Moduli flexbox ju lejon të zgjidhni detyrat e mëposhtme:
- Rregulloni elementet në një nga katër drejtimet: nga e majta në të djathtë, nga e djathta në të majtë, nga lart poshtë ose nga poshtë lart.
- Anuloni rendin e shfaqjes së elementeve.
- Përmasat automatike të elementeve në mënyrë që të përshtaten në hapësirën e disponueshme.
- Zgjidheni problemin me qendërzim horizontal dhe vertikal.
- Lëvizni sendet brenda një kontejneri pa e tejmbushur atë.
- Krijoni kolona me të njëjtën lartësi.
- Krijo shtypur në fund të faqes.
Flexbox zgjidh probleme specifike - duke krijuar paraqitje njëdimensionale, për shembull, një shirit navigimi, pasi elementët fleksibël mund të vendosen vetëm përgjatë njërit prej akseve.
Ju mund të lexoni një listë të problemeve aktuale të modulit dhe zgjidhjeve të ndër-shfletuesve për to në artikullin nga Philip Walton.
Çfarë është flexbox
Mbështetja e shfletuesit
IE: 11.0, 10.0 -ms-
Firefox: 28.0, 18.0 -moz-
Krom: 29.0, 21.0 -kit në internet-
Safari: 6.1 -kit në internet-
Opera: 12.1 -kit në internet-
iOS Safari: 7.0 -kit në internet-
Opera Mini: 8
Shfletuesi Android: 4.4, 4.1 -kit në internet-
Chrome për Android: 44
1. Konceptet bazë
Oriz. 1. Modeli Flexbox Një grup specifik termash përdoret për të përshkruar një modul Flexbox. Vlera e rrjedhës së përkuljes dhe mënyra e regjistrimit përcaktojnë korrespondencën e këtyre termave me drejtimet fizike: lart / djathtas / poshtë / majtas, boshtet: vertikale / horizontale dhe dimensionet: gjerësia / lartësia.
Boshti kryesor- boshti përgjatë të cilit janë hedhur elementët fleksibël. Ai shtrihet në dimensionin kryesor.
Fillimi kryesor dhe fundi kryesor— vijat që përcaktojnë anët e fillimit dhe të fundit të kontejnerit fleks, në lidhje me të cilat janë vendosur elementët fleksibël (duke filluar nga fillimi kryesor drejt fundit kryesor).
Madhësia kryesore) - gjerësia ose lartësia e kontejnerit flex ose artikujve flex, në varësi se cili prej tyre është në dimensionin kryesor, përcakton madhësinë kryesore të kontejnerit flex ose artikullit flex.
Aks kryq- boshti pingul me boshtin kryesor. Ai shtrihet në dimensionin tërthor.
Fillimi kryq dhe fundi kryq- linjat që përcaktojnë anët e fillimit dhe mbarimit të boshtit tërthor, në lidhje me të cilat janë hedhur elementët fleksibël.
Madhësia e kryqit— gjerësia ose lartësia e një kontejneri të përkulur ose sendeve fleksi, cilado qoftë në dimensionin kryq, është dimensioni i tyre kryq.
Oriz. 2. Mënyra e rreshtit dhe kolonës 2. Enë Flex
Një kontejner Flex vendos një kontekst të ri formatimi fleksibël për përmbajtjen e tij. Një kontejner flex nuk është një kontejner bllok, kështu që vetitë CSS si float , clear , vertikal-align nuk funksionojnë për elementët fëmijë. Gjithashtu, kontejneri flex nuk ndikohet nga vetitë kolonë-* që krijojnë kolona në tekst dhe pseudoelementet::first-line dhe::first-letter .
Modeli i shënjimit flexbox shoqërohet me një vlerë specifike të veçorisë së shfaqjes CSS të elementit prind HTML që përmban blloqe fëmijë brenda tij. Për të kontrolluar elementët duke përdorur këtë model, duhet të vendosni vetitë e ekranit si më poshtë:
Flex-container ( /*gjeneron një kontejner flex të nivelit bllok*/ ekran: -webkit-flex; display: flex; ) .flex-container ( /*gjeneron një kontejner flex të nivelit të linjës*/ ekran: -webkit-inline- flex; ekran: inline-flex;)
Pas vendosjes së këtyre vlerave të vetive, çdo element fëmijë bëhet automatikisht një element fleksibël, i rreshtuar në një rresht (përgjatë boshtit kryesor). Në këtë rast, elementët bllok dhe inline fëmijë sillen njësoj, d.m.th. Gjerësia e blloqeve është e barabartë me gjerësinë e përmbajtjes së tyre, duke marrë parasysh kufijtë e brendshëm dhe kufijtë e elementit.
Oriz. 3. Përafrimi i elementeve në modelin flexbox Nëse blloku prind përmban tekst ose imazhe pa mbështjellës, ato bëhen artikuj fleksibël anonimë. Teksti rreshtohet në skajin e sipërm të bllokut të kontejnerit dhe lartësia e figurës bëhet e barabartë me lartësinë e bllokut, d.m.th. është deformuar.
3. Elementet fleksibël
Artikujt Flex janë blloqe që përfaqësojnë përmbajtjen e një kontejneri të përkulur në një rrjedhë. Kontejneri Flex krijon një kontekst të ri formatimi për përmbajtjen e tij, i cili shkakton veçoritë e mëposhtme:
- Për artikujt fleksibël, vlera e vetive të tyre të shfaqur është e bllokuar. Vlera e shfaqjes: inline-block; dhe shfaq: tabelë-qelizë; vlerësuar në ekran: bllok; .
- Hapësira e bardhë midis artikujve zhduket: ai nuk bëhet artikulli i tij fleksibël, edhe nëse teksti ndërmjet artikujve është i mbështjellë me një artikull fleksibël anonim. Përmbajtja e një artikulli flex anonim nuk mund të stilohet, por do të trashëgojë stile (të tilla si opsionet e shkronjave) nga kontejneri flex.
- Një element fleksibël i pozicionuar absolutisht nuk merr pjesë në paraqitjen përkulëse.
- Kufijtë e elementeve ngjitur fleksibël nuk shemben.
- Diferenca e përqindjes dhe vlerat e mbushjes llogariten nga madhësia e brendshme e bllokut që i përmban ato.
- diferencë: auto; zgjerohet, duke thithur hapësirë shtesë në dimensionin përkatës. Ato mund të përdoren për të lidhur ose shtyrë sendet ngjitur fleksibël.
- Madhësia minimale automatike e paracaktuar e artikujve fleksibël është madhësia minimale e përmbajtjes së saj, d.m.th. Min-width: auto; . Për kontejnerët e lëvizshëm, madhësia minimale automatike është zakonisht zero.
4. Rendi dhe orientimi i shfaqjes së artikullit Flex
Përmbajtja e një kontejneri fleksibël mund të vendoset në çdo drejtim dhe në çdo mënyrë (rirregullimi i artikujve fleksibël brenda kontejnerit ndikon vetëm në paraqitjen vizuale).
4.1. Drejtimi i boshtit kryesor: drejtimi përkul
Prona i referohet kontejnerit flex. Kontrollon drejtimin e boshtit kryesor përgjatë të cilit vendosen artikujt e përkulur, në përputhje me modalitetin aktual të shkrimit. E pa trashëguar.
| përkul-drejtimi | |
|---|---|
| Vlerat: | |
| rresht | Vlera e paracaktuar është nga e majta në të djathtë (në rtl, nga e djathta në të majtë). Elementet fleksibël janë hedhur në një rresht. Fillimi (fillimi kryesor) dhe fundi (kryesor-fundi) i drejtimit të boshtit kryesor korrespondojnë me fillimin (inline-start) dhe fundin (inline-fund) të boshtit të linjës (aksi inline). |
| rresht-mbrapsht | Drejtimi është nga e djathta në të majtë (në rtl nga e majta në të djathtë). Elementet fleksibël vendosen në një vijë në lidhje me skajin e djathtë të enës (në rtl - majtas). |
| kolonë | Drejtimi nga lart poshtë. Elementet fleksibël vendosen në një kolonë. |
| kolonë-mbrapsht | Një kolonë me elementë në rend të kundërt, nga poshtë lart. |
| fillestare | |
| trashëgojnë | |
Oriz. 4. Vetia me drejtim të përkulur për gjuhët nga e majta në të djathtë Sintaksë
Flex-container (ekrani: -webkit-flex; -webkit-flex-direction: row-back; display: flex; flex-direction: row-reverse; )
4.2. Menaxhimi i kontejnerit fleksibël me shumë rreshta: flex-mbështjellës
Vetia përcakton nëse kontejneri flex do të jetë me një linjë ose me shumë rreshta, dhe gjithashtu cakton drejtimin e boshtit kryq, i cili përcakton drejtimin në të cilin do të vendosen linjat e reja të kontejnerit fleks.
Si parazgjedhje, artikujt fleksibël vendosen në një rresht, përgjatë boshtit kryesor. Nëse vërshojnë, ato do të shtrihen përtej kutisë kufizuese të enës fleks. Prona nuk është e trashëguar.
Oriz. 5. Kontroll me shumë rreshta duke përdorur veçorinë flex-wrap për gjuhët LTR Sintaksë
Flex-container ( ekran: -webkit-flex; -webkit-flex-wrap: wrap; display: flex; flex-wrap: wrap; )
4.3. Një përmbledhje e shkurtër e drejtimit dhe shumë-linjave: Flex-flow
Vetia ju lejon të përcaktoni drejtimet e akseve kryesore dhe tërthore, si dhe aftësinë për të lëvizur elementët fleksibël, nëse është e nevojshme, në disa linja. Ky është një stenografi për vetitë e drejtimit të përkuljes dhe të përkuljes. Vlera e parazgjedhur flex-flow: row nowrap; . prona nuk është e trashëguar.
Sintaksë
Flex-container ( shfaqja: -webkit-flex; -webkit-flex-flow: mbështjellja e rreshtit; shfaqja: flex; rrjedha e përkulur: mbështjellja e rreshtit; )
4.4. Shfaqja e rendit të artikujve fleksibël: rendit
Vetia përcakton rendin në të cilin artikujt flex shfaqen dhe rregullohen brenda një kontejneri flex. Zbatohet për artikujt flex. Prona nuk është e trashëguar.
Fillimisht të gjithë artikujt flex kanë renditje: 0; . Kur specifikoni një vlerë prej -1 për një element, ai zhvendoset në fillim të vijës kohore dhe një vlerë prej 1 zhvendoset në fund. Nëse disa artikuj fleksibël kanë të njëjtën vlerë porosie, ato do të jepen sipas rendit origjinal.
Sintaksë
Flex-container ( shfaqja: -webkit-flex; shfaqja: flex; ) 
Oriz. 6. Afishoni rendin e artikujve fleksibël
5. Fleksibiliteti i elementeve fleksibël
Aspekti përcaktues i një paraqitjeje fleksibël është aftësia për të "përkulur" artikujt e përkulur, duke ndryshuar gjerësinë/lartësinë e tyre (në varësi të madhësisë në boshtin kryesor) për të mbushur hapësirën e disponueshme në dimensionin kryesor. Kjo bëhet duke përdorur veçorinë flex. Një enë përkulëse shpërndan hapësirë të lirë midis fëmijëve të saj (proporcionale me raportin e tyre të rritjes së përkuljes) për të mbushur kontejnerin, ose i zvogëlon ato (proporcionale me raportin e tyre të përkuljes) për të parandaluar tejmbushjen.
Një element fleksibël do të jetë plotësisht "jo fleksibël" nëse vlerat e tij të rritjes së përkuljes dhe tkurrjes janë zero, dhe "fleksibël" përndryshe.
5.1. Vendosja e dimensioneve fleksibël me një veti: flex
Vetia është stenografi për vetitë flex-grow, flex-shrink dhe flex-basic. Vlera e parazgjedhur: flex: 0 1 auto; . Ju mund të specifikoni një ose të tre vlerat e pronës. Prona nuk është e trashëguar.
Sintaksë
Flex-container ( ekran: -webkit-flex; ekran: flex; ) .flex-item ( -webkit-flex: 3 1 100px; -ms-flex: 3 1 100px; flex: 3 1 100px; )
5.2. Faktori i rritjes: flex-grow
Vetia përcakton shkallën e rritjes së një elementi të përkulur në krahasim me elementët e tjerë fleksibël në kontejnerin flex kur shpërndahet hapësira pozitive e lirë. Nëse shuma e vlerave flex-grow të artikujve flex në një rresht është më pak se 1, ato zënë më pak se 100% të hapësirës së lirë. Prona nuk është e trashëguar.
Oriz. 7. Menaxho hapësirën e shiritit të navigimit me Flex-Grow Sintaksë
Flex-container ( ekran: -webkit-flex; ekran: flex; ) .flex-item ( -webkit-flex-grow: 3; flex-grow: 3; )
5.3. Raporti i ngjeshjes: përkul-tkurrje
Vetia specifikon raportin e ngjeshjes së një artikulli flex në lidhje me artikujt e tjerë flex kur shpërndahet hapësira e lirë negative. Shumëzuar me madhësinë e bazës flex. Hapësira negative ndahet në proporcion me sa mund të tkurret artikulli, kështu që, për shembull, një artikull i vogël fleksibël nuk do të tkurret në zero derisa një artikull më i madh fleksibël të tkurret dukshëm. Prona nuk është e trashëguar.
Oriz. 8. Ngushtimi i artikujve fleksibël në një rresht Sintaksë
Flex-container ( ekran: -webkit-flex; ekran: flex; ) .flex-item ( -webkit-flex-shrink: 3; flex-shrink: 3; )
5.4. Madhësia bazë: flex-bazë
Vetia cakton madhësinë bazë fillestare të një artikulli flex përpara se të ndajë hapësirën e lirë sipas faktorëve të përkuljes. Për të gjitha vlerat, përveç auto dhe përmbajtjes, madhësia bazë e përkuljes përcaktohet e njëjtë me gjerësinë në mënyrat horizontale të shkrimit. Vlerat e përqindjes përcaktohen në lidhje me madhësinë e enës flex, dhe nëse nuk specifikohet madhësia, vlera e përdorur për flex-bazë është dimensionet e përmbajtjes së saj. E pa trashëguar.
Sintaksë
Flex-container ( ekran: -webkit-flex; ekran: flex; ) .flex-item ( -webkit-flex-basis: 100px; flex-basis: 100px; )
6. Rreshtimi
6.1. Rreshtimi i boshtit kryesor: justifiko-përmbajtje
Vetia rreshton artikujt e përkulur përgjatë boshtit kryesor të kontejnerit të përkulur, duke shpërndarë hapësirën e lirë të pazënë nga artikujt fleksibël. Kur një artikull konvertohet në një kontejner flex, artikujt flex grupohen së bashku si parazgjedhje (përveç nëse kanë kufij të caktuar). Boshllëqet shtohen pas llogaritjes së vlerave të marzhit dhe të rritjes së përkuljes. Nëse ndonjë element ka një rritje ose diferencë jo-zero: auto; , prona nuk do te kete efekt. Prona nuk është e trashëguar.
| Vlerat: | |
| përkul-start | Vlera e paracaktuar. Elementet Flex vendosen në një drejtim duke filluar nga vija e fillimit të enës flex. |
| përkul-fund | Artikujt fleksibël vendosen në drejtim nga vija fundore e enës flex. |
| qendër | Artikujt e përkulur janë rreshtuar në qendër të kontejnerit të përkulur. |
| hapësirë-ndërmjet | Elementet Flex shpërndahen në mënyrë të barabartë përgjatë vijës. Artikulli i parë fleksibël vendoset në të njëjtin nivel me skajin e vijës së fillimit, artikulli i fundit fleksibël vendoset në të njëjtën linjë me skajin e vijës fundore dhe pjesët e mbetura fleksibël në linjë vendosen në mënyrë që distanca midis çdo dy artikujsh ngjitur të jetë e njëjta. Nëse hapësira e lirë e mbetur është negative ose ka vetëm një artikull flex për rresht, kjo vlerë është identike me parametrin flex-start. |
| hapësirë-rreth | Artikujt fleksibël në linjë shpërndahen në mënyrë që distanca midis çdo dy artikujsh fleksibël ngjitur të jetë e njëjtë dhe distanca midis artikujve fleksibël të parë/të fundit dhe skajeve të kontejnerit fleksibël është gjysma e distancës midis artikujve fleksibël. |
| fillestare | Vendos vlerën e pronës në vlerën e paracaktuar. |
| trashëgojnë | Trashëgon vlerën e pronës nga elementi mëmë. |
Oriz. 9. Përafrimi i elementeve dhe shpërndarja e hapësirës së lirë duke përdorur veçorinë justify-content Sintaksë
Flex-container (ekrani: -webkit-flex; -webkit-justify-content: flex-start; display: flex; justify-content: flex-start; )
6.2. Shtrirja e boshteve tërthore: rreshtoni artikujt dhe rreshtoni vetë
Artikujt e përkulur mund të rreshtohen përgjatë boshtit tërthor të rreshtit aktual të kontejnerit të përkulur. align-items vendos shtrirjen për të gjithë artikujt e kontejnerëve flex, duke përfshirë artikujt anonimë flex. align-self ju lejon të anashkaloni këtë shtrirje për artikujt individualë të përkulur. Nëse ndonjë nga kufijtë e kryqëzuar të elementit flex vendoset në auto, vetë-linja nuk ka efekt.
6.2.1. Rreshtoni-artikujt
Vetia rreshton elementet e përkuljes, duke përfshirë elementët anonimë të përkuljes, përgjatë boshtit tërthor. E pa trashëguar.
| Vlerat: | |
| përkul-start | |
| përkul-fund | |
| qendër | |
| bazë | Vijat bazë të të gjithë artikujve fleksibël të përfshirë në shtrirje janë të njëjta. |
| shtrirje | |
| fillestare | Vendos vlerën e pronës në vlerën e paracaktuar. |
| trashëgojnë | Trashëgon vlerën e pronës nga elementi mëmë. |
Oriz. 10. Rreshtimi i elementeve në një enë vertikalisht Sintaksë
Flex-container ( shfaqja: -webkit-flex; -webkit-align-item: flex-start; display: flex; align-item: flex-start; )
6.2.2. Align-vetë
Vetia është përgjegjëse për përafrimin e një elementi të vetëm përkulës në lartësinë e kontejnerit të përkulur. Anulon shtrirjen e specifikuar nga align-items . E pa trashëguar.
| Vlerat: | |
| auto | Vlera e paracaktuar. Një element flex përdor shtrirjen e specifikuar në veçorinë align-item të kontejnerit flex. |
| përkul-start | Skaji i sipërm i elementit flex vendoset ngjitur me vijën e përkuljes (ose në një distancë, duke marrë parasysh kufijtë dhe kufijtë e specifikuar të elementit) duke kaluar nëpër fillim të boshtit kryq. |
| përkul-fund | Skaji i poshtëm i elementit fleksibël vendoset ngjitur me vijën e përkuljes (ose në një distancë, duke marrë parasysh kufijtë dhe kufijtë e specifikuar të elementit) duke kaluar nëpër fund të boshtit kryq. |
| qendër | Kufiri i një elementi fleksibël është i përqendruar përgjatë boshtit kryq brenda vijës së përkuljes. |
| bazë | Elementi flex është në linjë me vijën bazë. |
| shtrirje | Nëse madhësia e tërthortë e një artikulli flex është automatike dhe asnjë nga vlerat e tij ndër-margjinale nuk është automatike, artikulli shtrihet. Vlera e paracaktuar. |
| fillestare | Vendos vlerën e pronës në vlerën e paracaktuar. |
| trashëgojnë | Trashëgon vlerën e pronës nga elementi mëmë. |
Oriz. 11. Përafrimi i artikujve individualë fleksibël Sintaksë
Flex-container ( display: -webkit-flex; display: flex; ) .flex-item ( -webkit-align-self: qendër; align-self: në qendër; )
6.3. Përafrimi i linjave të një kontejneri flex: align-content
Vetia rreshton rreshtat në një kontejner flex kur ka hapësirë shtesë në boshtin kryq, ngjashëm me justifikimin e artikujve individualë në boshtin kryesor duke përdorur veçorinë justify-content. Prona nuk ndikon në një enë fleksibël me një linjë. E pa trashëguar.
| Vlerat: | |
| përkul-start | Rreshtat janë grumbulluar drejt fillimit të enës flex. Skaji i rreshtit të parë vendoset afër skajit të enës flex, çdo rresht pasues vendoset afër vijës së mëparshme. |
| përkul-fund | Rreshtat janë grumbulluar drejt fundit të enës flex. Skaji i rreshtit të fundit vendoset afër buzës së enës flex, çdo rresht i mëparshëm vendoset afër vijës tjetër. |
| qendër | Rreshtat janë grumbulluar drejt qendrës së enës flex. Rreshtat janë afër njëra-tjetrës dhe në linjë me qendrën e kontejnerit flex, me distancë të barabartë midis skajit fillestar të përmbajtjes së enës flex dhe rreshtit të parë, dhe midis skajit fundor të përmbajtjes së enës flex dhe rreshtit të fundit. |
| hapësirë-ndërmjet | Rreshtat shpërndahen në mënyrë të barabartë në enën flex. Nëse hapësira e lirë e mbetur është negative ose ka vetëm një linjë fleksibile në kontejnerin flex, kjo vlerë është identike me flex-start . Përndryshe, buza e rreshtit të parë vendoset afër skajit fillestar të përmbajtjes së kontejnerit fleks, dhe buza e rreshtit të fundit vendoset afër skajit fundor të përmbajtjes së kontejnerit fleksi. Linjat e mbetura shpërndahen në mënyrë që distanca midis dy linjave ngjitur të jetë e njëjtë. |
| hapësirë-rreth | Linjat janë të ndara në mënyrë të barabartë në enën flex me gjysmë hapësirë në të dy skajet. Nëse hapësira e lirë e mbetur është negative, kjo vlerë është identike me qendrën qendrore. Përndryshe, linjat shpërndahen në mënyrë që distanca midis çdo dy linjash ngjitur të jetë e njëjtë, dhe distanca midis rreshtave të parë/të fundit dhe skajeve të përmbajtjes së kontejnerit flex është gjysma e distancës midis rreshtave. |
| shtrirje | Vlera e paracaktuar. Rreshtat e artikujve fleksibël shtrihen në mënyrë të barabartë për të mbushur të gjithë hapësirën e disponueshme. Nëse hapësira e lirë e mbetur është negative, kjo vlerë është identike me flex-start . Përndryshe, hapësira e lirë do të ndahet në mënyrë të barabartë midis të gjitha rreshtave, duke rritur madhësinë e tyre anësore. |
| fillestare | Vendos vlerën e pronës në vlerën e paracaktuar. |
| trashëgojnë | Trashëgon vlerën e pronës nga elementi mëmë. |
Oriz. 12. Rreshtimi me shumë rreshta i elementeve flex Sintaksë
Flex-container ( ekran: -webkit-flex; -webkit-flex-flow: mbështjellja e rreshtit; -webkit-align-content: flex-end; ekrani: flex; flex-flow: mbështjellja e rreshtit; align-content: flex-end ; lartësia: 100 px;)
Asgjë nuk qëndron ende, teknologjitë dhe standardet po zhvillohen, teknikat dhe metodat e reja për paraqitjen e faqes në internet po shfaqen, për shembull, faqosja me elemente tabelare, të cilat nuk i kemi marrë parasysh për arsye objektive, është zëvendësuar me paraqitjen me elemente lundruese.
Shumë redaktues të kodit kanë një shtojcë të përshtatshme të shënimit të shpejtë të integruar ose të disponueshëm për shkarkim si parazgjedhje, Emmet, i cili ju lejon të bëni shënimin bazë të këtij shembulli si më poshtë: seksion>div*3>lorem+ Skeda (vlera lorem gjeneron tekstin që shfaqet në imazhin më poshtë).
Ju lutemi vini re se pa ndonjë përpjekje të veçantë, ne kemi marrë që kolonat e paraqitjes sonë të jenë në të njëjtën lartësi pavarësisht nga përmbajtja e tyre, dhe kjo është e mrekullueshme. Elementet
nuk janë elementë fleksibël si parazgjedhje dhe ndodhen në rrjedhë e treta element
Rezultati i shembullit tonë:
Enë e përkulur në linjë
Për analogji me elementët e bllokut, kontejnerët fleksibël mund të jenë në linjë. Le të shohim ndryshimin midis kontejnerëve fleksibël në linjë dhe atyre bllok. Në shembullin e mëparshëm, ne shikuam përdorimin e një kontejneri në nivel blloku, si një element i rregullt në nivel blloku, ai zë të gjithë gjerësinë e ekranit dhe sillet si një element i rregullt në nivel blloku. Për sa i përket kontejnerëve flex inline, ato bëhen elemente të rregullta inline, duke ruajtur fleksibilitetin e elementeve.
Në shembullin tjetër do të shikojmë këtë ndryshim, pasi shembulli i mëparshëm nuk do të ishte tregues, për arsye se elementëve të fleksit të fëmijës nuk iu dha një madhësi në mënyrë eksplicite, dhe si rezultat, kontejneri ynë, pavarësisht nëse ishte në linjë apo bllok, do të sillej njësoj dhe do të merrte të gjithë gjerësinë e ekranit.
Në këtë shembull kemi vendosur dy shkronja të vogla dhe dy enë bllok fleksi, brenda tyre vendosëm pesë elementet
Për të gjeneruar shpejt një plan urbanistik të ngjashëm duke përdorur Emmet shkruani sa vijon në redaktues: div.inline-flex*2>div*5 + Tab , dhe e njëjta gjë vetëm me një klasë tjetër div.flex*2>div*5 + Tab .
Duke hedhur një vështrim në rezultatin e shembullit tonë, ndryshimi midis kontejnerëve fleksibël të linjës dhe bllokut tani duhet të jetë i dukshëm për ju. Një kontejner inline sillet si një element inline dhe zë gjerësinë e kërkuar vetëm nga elementët e tij të përkuljes së fëmijës, ndërsa një kontejnerë fleksibël bllok, pavarësisht nga madhësia e elementeve të tij të përkulur, zë të gjithë gjerësinë e ekranit.
Rezultati i shembullit tonë:
Oriz. 205 Një shembull i ndryshimit midis kontejnerëve me fleksibël dhe kontejnerëve fleksibël.
Drejtimi? Cili drejtim?
Drejtimi i elementeve fleksibël formohet në bazë të pozicionit të dy akseve: boshti kryesor enë fleksi dhe e saj boshti tërthor, e cila gjendet gjithmonë pingul me kryesoren. Boshti kryesor në drejtimin ltr (atributi global HTML dir , ose drejtimi i vetive CSS me vlerën ltr ) ndodhet nga e majta në të djathtë dhe boshti tërthor është nga lart poshtë (kjo është vlera e paracaktuar), për vlerën rtl ajo shfaqet në një pasqyrë në përputhje me rrethanat.
Në këtë artikull, ne do të shohim 5 teknika që zgjidhin problemet kryesore të paraqitjes së CSS. Ne kemi përfshirë edhe disa shembuj praktikë nga projekte reale që tregojnë qartë se si mund të përdoren këto teknika.
Krijimi i kolonave me të njëjtën lartësi
Mund të duket mjaft e thjeshtë në fillim, por kjo detyrë mund të jetë e bezdisshme ndonjëherë. Përdorimi i lartësisë min nuk do të funksionojë sepse sapo të shfaqet disa përmbajtje, madhësia e kolonave do të fillojë të ndryshojë menjëherë.
Rregullimi i këtij problemi me flexbox gjithashtu nuk është një zgjidhje pasi kolonat e krijuara me flexbox CSS fillimisht do të jenë të barabarta në gjatësi. Thjesht duhet të prezantojmë një model "fleksibël" dhe më pas të sigurohemi që vetitë flex-direction dhe align-item janë vendosur saktë.
Elementet e riorganizimit
Njëherë e një kohë në të kaluarën, ndryshimi dinamik i renditjes së elementeve të caktuara ishte një detyrë që vetëm JavaScript mund ta bënte. Por me ardhjen e flexbox, kjo vështirësi nuk lind më, pasi zgjidhja qëndron në vetëm një pronë CSS.
Vetia e porosisë, e cila lejon përdorimin e paraqitjes flexbox, flet vetë. Na lejon të ndryshojmë çdo numër elementësh "fleksibël" dhe sekuencën e tyre. Parametri i vetëm i kësaj vetie është një numër i plotë që përcakton pozicionin e këtij elementi; sa më i madh të jetë numri, aq më i lartë është prioriteti i këtij elementi.
Prona e porosisë ka shumë përdorime. Nëse dëshironi të shihni disa prej tyre, mund t'i hidhni një sy kësaj, ku ne përdorim këtë teknikë për të krijuar një seksion komentesh reaguese.
Përqendrimi horizontal dhe vertikal
Rreshtimi në CSS është ende një problem mjaft i madh. Edhe nëse i drejtoheni një motori kërkimi, ai do të kthejë një mori zgjidhjesh, shumica e të cilave do të sugjerojnë përdorimin e tabelave dhe transformimeve, gjë që nuk është plotësisht e përshtatshme nëse flasim për paraqitjen adaptive.
Një zgjidhje e thjeshtë do të ishte faqosja e fleksibël, me të cilën elementët thjesht mund të zhvendosen përgjatë planit koordinativ, duke e përafruar atë sipas dëshirës.
Për ta parë këtë zgjidhje në veprim dhe për të mësuar më shumë rreth saj, mund të shkoni te , e cila është në të njëjtën temë.
Krijimi i rrjeteve plotësisht të përgjegjshme
Shumë webmaster mbështeten në biblioteka dhe korniza të ndryshme CSS për të krijuar rrjete të përgjegjshme. Mjeti më i zakonshëm në këtë fushë është Bootstrap. Megjithatë, ai nuk është i vetmi në llojin e tij. Qindra asistentë të ngjashëm janë zhvilluar tashmë. Të gjitha funksionojnë relativisht mirë dhe mburren me një gamë mbresëlënëse opsionesh, por ata kurrë nuk do të shpëtojnë nga një problem - rëndimi. Prandaj, nëse jeni një person që ju pëlqen të bëni gjithçka vetë, ose thjesht nuk dëshironi të instaloni një kornizë të tërë për hir të një rrjeti, atëherë faqosja e flexbox do t'ju ndihmojë!
Një rresht në një rrjet flexbox është vetëm një enë. Kolonat horizontale brenda saj mund të jenë çdo numër elementesh, madhësia e të cilave vendoset duke përdorur flex . Ky model përshtatet me çdo madhësi ekrani, kështu që rezultati përfundimtar duhet të duket i mirë në shumicën e pajisjeve. Megjithatë, nëse vendosim që nuk ka hapësirë të mjaftueshme horizontale në ekran, atëherë faqosja thjesht mund të shndërrohet në vertikale me një pyetje mediatike.
Mund ta shihni ndryshueshmërinë e kësaj teknike në udhëzimet: Mënyra më e lehtë për të krijuar.
Krijimi i një fundi të fiksuar
Flexbox CSS ka një zgjidhje të thjeshtë edhe për këtë problem. Duke krijuar një faqe që përmban një footer ngjitës, të shkruar përmes elementëve fleksibël, nuk do të ketë nevojë të mendoni më për faktin se mund të lëvizë.
Aplikimi i ekranit: përkul në etiketën e trupit do të na lejojë të përdorim "modalitetin e përkuljes" në të gjithë paraqitjen. Kur gjithçka të jetë gati, pjesa kryesore e faqes do të jetë një element "fleksibël", dhe fundi një tjetër, kjo do të thjeshtojë manipulimin e pozicioneve të tyre.
Do të gjeni më shumë informacion rreth kësaj teknike në artikullin "".
konkluzioni
Shumica e shfletuesve sot mbështesin modalitetin fleksibël të paraqitjes, që do të thotë se është e sigurt të thuhet se flexbox është gati të ndihmojë shumë zhvillues.
Shpresoj që ta keni gjetur të dobishëm këtë artikull dhe të keni përmirësuar aftësitë tuaja në CSS. Paç fat!
Flexbox-et janë ideale për krijimin e paraqitjeve të zakonshme të faqeve të internetit, të tilla si faqosja me tre kolona, e ashtuquajtura "Grali i Shenjtë", ku të gjitha kolonat duhet të jenë në lartësi të plotë, pavarësisht nga përmbajtja e tyre. Në të njëjtën kohë, në kodin burimor përmbajtja kryesore vjen para navigimit, dhe në vetë faqen përmbajtja kryesore vjen pas lundrimit.
Si kjo.
Përpara Flexbox, kjo paraqitje ishte mjaft e vështirë për t'u arritur pa përdorur disa hake. Zhvilluesve shpesh iu desh të bënin gjëra të tilla si shtimi i shënjimit shtesë, aplikimi i marzheve negative dhe truket e tjera për të siguruar që gjithçka të rreshtohej siç duhet, pavarësisht nga sasia e përmbajtjes ose madhësia e ekranit. Por, siç tregon shembulli i mësipërm, gjithçka rezulton shumë më e thjeshtë në Flexbox.
Këtu është një përmbledhje e kodit. Në këtë shembull, ne e bëjmë elementin #main një enë flex, dhe lëmë kokën dhe fundin si elementë bllok. Me fjalë të tjera, vetëm pjesa e mesme bëhet flexbox. Këtu është një fragment që e bën atë një enë fleksibël.
#main (ekrani: flex; min-lartësia: llogaritur (100vh - 40vh); )
Thjesht përdorni ekranin: përkul për të bërë një enë fleksibël. Vini re se ne vendosëm gjithashtu lartësinë min duke përdorur funksionin calc() dhe vendosëm #main në 100% të lartësisë së pamjes minus lartësia e kokës dhe bazës (20vh secila). Kjo siguron që faqosja do të mbushë të gjithë lartësinë e ekranit, edhe nëse ka pak përmbajtje. Si rezultat, futeri nuk do të ngrihet kurrë dhe do të lërë hapësirë boshe poshtë tij nëse përmbajtja zë më pak se lartësia e ekranit.
Llogaritja e lartësisë min ishte mjaft e thjeshtë, duke pasur parasysh se ne aplikuam madhësinë e kutisë: kutinë kufitare për të gjithë elementët. Nëse nuk do ta bënim këtë, atëherë do të na duhej të shtonim vlerën e mbushjes në shumën për të zbritur.
Pas instalimit të kontejnerit flex, ne merremi me elementë flex.
#main > artikull ( flex: 1; ) #main > nav, #main > anash ( flex: 0 0 20vw; sfond: beige; ) #main > nav (rendi: -1; )
Vetia flex është stenografi për vetitë flex-grow, flex-shrink dhe flex-basic. Në rastin e parë, ne kemi shkruar vetëm një vlerë, kështu që flex vendos vetinë flex-grow. Në rastin e dytë, ne kemi shkruar të tre vlerat për
