Të gjitha vetitë flexbox. Udhëzuesi i plotë për Flexbox

class="container">

. Me përdorimin e pseudo-klasës së specifikuar për secilën së pari dhe e treta element në çdo enë që blloku do të rritet me 1 në raport me pjesën tjetër të elementeve fleksibël. Për të gjithë e dyta elementet në kontejnerë kanë specifikuar vlera të ndryshme të vetive.

V së pari enë e dyta elementi do të rritet me 2 në raport me pjesën tjetër të elementeve fleks, gjatë e dyta enë për 3, dhe në e treta tashmë në katër. Vini re se si gjerësia e elementeve do të ndryshojë proporcionalisht, pa përdorur ndonjë llogaritje nga ana jonë, ose duke përdorur funksione shtesë.

V së pari enë e treguar për e dyta madhësia e paracaktuar e elementit flex 100 px, në e dyta enë 100 px, dhe ne e treta tashmë 10000 px. Ju lutemi vini re se në e treta Në kontejner, elementi, pavarësisht nga përmasat e tij, nuk shkaktoi tejmbushje, por u përshtat me hapësirën e mbetur në kontejnerin mëmë.

Vlera që përcakton se sa do të zvogëlohet blloku në lidhje me pjesën tjetër të elementeve fleksibël në kontejner (nëse nuk ka hapësirë ​​të mjaftueshme të lirë) vendoset në analogji me vetinë , por vlera e paracaktuar do të jetë 1, jo 0. Vlerat negative gjithashtu nuk lejohen (nuk janë të vlefshme).

Një veti me vlerë 0 specifikon që elementi nuk do të tkurret, duke ruajtur gjerësinë e kërkuar të elementit! Nëse së bashku me këtë vlerë specifikohet vlera minimale e gjerësisë së elementit flex si parazgjedhje (vetia ), atëherë elementi nuk do të mund të ulet nën këtë vlerë. Përdoreni këtë veçori me mençuri, pasi ekziston mundësia që përmbajtja e enës flex të tejmbushet. Ne do ta shqyrtojmë këtë pikë në fund të artikullit.

Le të kalojmë në një shembull:

Në këtë shembull, ne kemi vendosur tre enë bllok fleksi, brenda tyre vendosëm tre element

Në këtë artikull, ne do të njihemi me teknologjinë CSS Flexbox, e krijuar për të krijuar paraqitje fleksibël të faqeve në internet.

Mbështetje e shfletuesit për teknologjinë CSS Flexbox

Teknologjia Flexbox tashmë mbështetet nga pothuajse të gjithë shfletuesit e përdorur aktualisht (duke përdorur prefikset: IE10+, Edge12+, Firefox 2+, Chrome 4+, Safari 3.1+, Opera 12.1+, iOS Safari 3.2, Opera mini, Android 2.1+, Blackberry 7+) .

Bazat e Flexbox (Rrjeti)

Rrjeti është baza e Flexbox. Ai përbëhet nga vetëm 2 elementë. Elementi i parë është enë përkulëse. Krijimi i një kontejneri flex bëhet duke shtuar një veti CSS të ekranit në elementin e kërkuar HTML me një vlerë flex ose flex-inline.

Më pas të gjithë fëmijët e menjëhershëm të kontejnerit flex(fëmijët) bëhen automatikisht artikuj të përkulur(Rrjeti flexbox 2 artikujsh).

Shënimi HTML:

Flex-container ( ekran: flex; /* flex || inline-flex */ ) Struktura e rrjetit flexbox

Artikujt Flex zënë lartësinë e plotë të një kontejneri flex si parazgjedhje.

Vlera flex ose flex-inline përcakton se si enë përkulëse do të paraqitet në faqe. Nëse duhet të paraqitet si bllokoj, pastaj përdorni vlerën flex. Nëse elementi duhet të paraqitet si shkronja të vogla, më pas përdorni vlerën flex-inline. Në këtë rast, do të zërë aq hapësirë ​​në faqe sa të jetë e nevojshme për të shfaqur elementët e saj.

Drejtimi i shtrirjes së artikujve fleksibël

Drejtimi i shtrirjes së elementeve fleksibël brenda kontejnerit të përkulur tregohet nga sëpata.

Ndani në flexbox 2 boshte. Boshti i parë quhet bazë ose kryesore(si parazgjedhje drejtohet djathtas). E dyta - tërthore(e parazgjedhur duke treguar poshtë).

Artikujt në një enë fleksibël janë të rreshtuar (sipas parazgjedhjes) edhe kur nuk kanë hapësirë ​​të mjaftueshme. Rendisni elementët e përkuljes në kontejnerin flex në drejtim të boshtit kryesor.

Pozicioni i elementeve në kontejner si parazgjedhje (artikujt e përkulur që nuk kanë hapësirë ​​të mjaftueshme në kontejnerin flex zvarriten jashtë tij)

Në CSS Flexbox, lejimi i artikujve flex për t'u mbështjellë në rreshta të rinj (nëse atyre u mungon hapësira në linjën aktuale) bëhet duke vendosur vetinë flex-wrap të CSS të kontejnerit flex në mbështjellje ose mbështjellje-reverse .

Flex-wrap: mbështjell; /* nowrap (një rresht - i parazgjedhur) mbështjell (lejo artikujt fleksibël të mbështillen në rreshta të rinj) wrap-reverse (mbështjell artikujt flex në rend të kundërt) */

Vlerat wrap dhe wrap-reverse të vetive flex-wrap CSS përcaktojnë drejtimin e boshtit kryq.

Vendosja e drejtimit të boshtit kryesor flexbox bëhet duke përdorur veçorinë flex-direction CSS.

Flex-drejtimi: rreshti; /* rresht (djathtas) - rreshti i paracaktuar-mbrapsht (majtas) kolona (poshtë) kolona-mbrapsht (lart) */

Me këtë veti, mund të siguroheni që artikujt fleksibël të vendosen jo horizontalisht (në rreshta), por vertikalisht (në kolona).

Vetitë flex-direction dhe flex-wrap mund të specifikohen duke përdorur veçorinë gjenerike Flex-flow CSS:

flex-flow: row nowrap; /* 1 vlerë - drejtim i përkulur, 2 vlerë - përkulje përkul */

Përafrimi i artikujve fleksibël

Në Flexbox, elementët brenda një kontejneri janë rreshtuar në dy drejtime (akse).

Rreshtimi i artikujve të përkulur përgjatë boshtit kryesor

Rreshtimi i elementeve përgjatë boshtit kryesor bëhet duke përdorur veçorinë justify-content CSS:

justify-content: flex-start; /* flex-start (artikujt fleksibël janë rreshtuar në lidhje me fillimin e boshtit) - fundi i paracaktuar flex-end (artikujt fleksibël janë rreshtuar në lidhje me fundin e boshtit) qendër (në qendër të kontejnerit të përkulur) hapësirë-ndërmjet ( në mënyrë të barabartë, dmth me të njëjtën distancë ndërmjet artikujve fleksibël) hapësirë-rreth (në mënyrë të barabartë, por me shtimin e gjysmës së hapësirës para artikullit të parë fleksibël dhe pas atij të fundit) */ Opsionet për rreshtimin e artikujve fleksibël përgjatë boshtit kryesor

Rreshtimi i artikujve të përkulur përgjatë boshtit kryq

Përafrimi i artikujve fleksibël në një kontejner flex në drejtim të boshtit tërthor bëhet duke përdorur veçorinë align-item CSS:

Align-arts: stretch; /* shtrirje (shtrirje përgjatë gjithë gjatësisë së boshtit tërthor) - fillimi i përkulur i paracaktuar (në lidhje me fillimin e boshtit tërthor) fundi i përkulur (në lidhje me fundin e boshtit tërthor) vija bazë (në raport me vijën bazë) qendra (në qendër) */ Opsionet e shtrirjes për artikujt fleksibël përgjatë boshtit tërthor

Përafrimi i linjave të një enë fleksi

CSS Flexbox ju lejon të rreshtoni jo vetëm vetë artikujt flex, por edhe linjat në të cilat ndodhen.

Align-content: shtrirje /* shtrirje (shtrirje përgjatë gjithë gjatësisë së boshtit kryq) - e paracaktuar flex-start (në lidhje me fillimin e boshtit kryq) flex-end (në lidhje me fundin e boshtit kryq) qendër (në qendër ) hapësirë-midis (në mënyrë të barabartë, d.m.th. me të njëjtën distancë ndërmjet vijave) hapësirë-rreth (në mënyrë të barabartë, por me shtimin e gjysmës së hapësirës para rreshtit të parë dhe pas të fundit) */ Opsionet për rreshtimin e vijave të fleksit enë

Vetia align-content ka kuptim vetëm kur artikujt flex në kontejnerin flex shtrihen në disa rreshta. Që të ndodhë kjo, së pari, të gjithë artikujt flex duhet të jenë më të gjera se gjerësia e kontejnerit flex dhe së dyti, kontejneri flex duhet të ketë vetitë e tij Flex-wrap CSS të vendosur në wrap ose wrap-reverse .

prona align-self CSS

Vetia align-self, ndryshe nga ato të mëparshmet (justify-content , align-item , dhe align-content ), është për artikujt flex. Ju lejon të ndryshoni përkulja e artikujve përgjatë drejtimit të boshtit tërthor. Vetia align-self mund të marrë të njëjtat vlera si align-item .

Align-arts: stretch; /* automatik (i parazgjedhur) || shtrirje || fillimi i përkulur || fundi i përkulur || bazë || qendër */

Flex-container ( ekrani: flex; gjerësia: 300 px; lartësia: 150 px; rreshtoj-artikujt: qendër; mbushja: 10 px; sfond-color: #efefef; ) .flex-container_element-1, .flex-container_element-2, .flex -container_element-3, .flex-container_element-4 ( flex-basis: 70px; text-align: center; padding: 15px; font-size: 30px; ) .flex-container_element-1 ( align-self: flex-start; sfond: #fe4; ) .flex-container_element-2 ( align-self: flex-end; sfond: rozë; ) .flex-container_element-3 ( align-self: stretch; background: lime; ) .flex-container_element-4 ( align-self: auto; background: cyan; ) Si funksionon vetia align-self CSS

Ndryshimi i renditjes së artikujve fleksibël

Si parazgjedhje, artikujt flex shfaqen në kontejnerin flex sipas renditjes në të cilën shfaqen në kodin HTML. Për të ndryshuar rendin e disa artikujve flex në krahasim me të tjerët në CSS Flexbox, mund të përdorni veçorinë e porosisë. Kjo veti CSS rregullon artikujt flex në një kontejner flex në rend rritës të numrave të tyre.

porosia: 0; /* 0 (i parazgjedhur) numër i plotë pozitiv ose negativ */

Për shembull:

CSS:. ( urdhër: 1; ) /* pozicioni 4 artikujt përkul përpara 1 */ .flex-container_element-4 ( urdhër: -1; ) Si funksionon vetia e porosisë CSS

Kontrolli i gjerësisë së një artikulli Flex

Flexbox ka disa veti CSS që përcaktojnë se sa i gjerë mund të jetë një artikull flex.

veti CSS me bazë flex

Kjo pronë është menduar për vendosja e gjerësisë fillestare të një elementi flex. Mund të caktoni vlerën e gjerësisë duke përdorur njësi të ndryshme, si px, %, em, etj. Si parazgjedhje, kjo veti është vendosur në automatik (në këtë rast, gjerësia e elementit do të llogaritet automatikisht në bazë të përmbajtjes së tij).

Gjerësia përfundimtare e artikullit flex do të përcaktohet nga në varësi të vlerave të vetive CSS flex-grow dhe flex-shrink, të cilat vendosen jo vetëm për këtë element, por edhe për elementët e tjerë fleksibël të këtij kontejneri flex.

Vetia flex-grow CSS

Kjo veti përcakton nëse gjerësia fillestare e elementit flex rritet (rritet). Rritja e gjerësisë së një elementi flex bëhet nga linja e hapësirës së lirë. Vetia flex-grow CSS është caktuar në numër i plotë. Është kjo vlerë që përcakton (nëse është më e madhe ose e barabartë me 1) se sa hapësirë ​​të lirë do të marrë elementi flex për vete.

Për shembull:

CSS:. ; flex-grow: 4; ) Si funksionon vetia flex-grow CSS

Në këtë shembull, nëse artikujt fleksibël janë në të njëjtën linjë dhe ka hapësirë ​​të lirë (600×(1-0,8)=120 px):

• 1/5 e kësaj hapësire do t'i shtohet gjerësisë së .flex-container_element-1 (120x1/5=24px);
• 4/5 e asaj hapësire do t'i shtohen gjerësisë së .flex-container_element-2 (120x4/5=96px).

Me fjalë të tjera, vetia flex-grow CSS ju lejon jo vetëm të specifikoni se gjerësia e një artikulli flex mund të rritet, por gjithashtu të specifikoni se sa mund të rritet kjo vlerë në lidhje me elementët e tjerë.

Si parazgjedhje, vetia flex-grow CSS ka një vlerë 0, që do të thotë se një element flex nuk mund të rritet (të rrisë gjerësinë e tij).

Vetia e përkuljes CSS

Kjo veti përcakton nëse gjerësia e elementit flex mund të reduktohet. Zvogëlimi i gjerësisë së një artikulli flex do të ndodhë vetëm nëse gjerësia e linjës nuk do të jetë e mjaftueshme për të shfaqur të gjithë artikujt fleksibël të vendosura në të. Gjerësia e kërkuar llogaritet në baza e gjerësisë fillestare, i cili ka çdo artikull flex në të.

Për shembull:

CSS:. -shrink: 3; ) Si funksionon vetia CSS flex-shrink

Gjerësia e kontejnerit flex është 500px. Duhen 600 px për të shfaqur artikujt fleksibël. Si rezultat, 100 px mungon. Në këtë shembull, 2 artikuj fleksibël (.flex-container_element-1 dhe .flex-container_element-2) mund të tkurren. Gjerësia e elementit të parë flex.flex-container_element-1 në këtë rast do të jetë 300 - 1/4*100= 275px. Gjerësia e elementit të dytë flex.flex-container_element-2 në këtë rast do të jetë 300 - 3/4*100= 225px.

Vlera e paracaktuar:

Flex-shrink: 1;

Nëse keni nevojë parandaloni tkurrjen e artikullit flex, atëherë vlera e vetive flex-shrink duhet të vendoset në numrin 0.

vetia flex CSS

Për të vendosur me lehtësi flex-grow, flex-shrink dhe flex-basis, mund të përdorni veçorinë flex CSS.

Vlera e paracaktuar:

Flex: 0 1 auto; /* 0 - flex-grow (vlera 1) 1 - flex-shrink (vlera 2) auto - flex-basis (vlera 3) */

Paraqitja e faqes me CSS Flexbox

Në këtë seksion, ne do të krijojmë një plan urbanistik të thjeshtë të përgjegjshëm me Flexbox.

Struktura e paraqitjes do të përbëhet nga 3 seksione:

• header (për të shfaqur titullin dhe menunë kryesore);
• kryesore (për të shfaqur pjesën kryesore);
• footer (për fundoren).

Pjesa kryesore (kryesore), nga ana tjetër, do të ndahet në 2 seksione të tjera (ne do t'i pozicionojmë ato duke përdorur CSS Flexbox). Në ekranet e mëdha(>=992px) këto seksione do të ndërtohen horizontalisht, dhe në pjesën tjetër - vertikalisht (<992px).

[Titulli i faqes...]

[Pjesa kryesore...]

CSS: /* kontejneri (cakton gjerësinë e bllokut bazuar në gjerësinë e portës së pamjes) */ .container ( pozicioni: relative; margjina-majtas: automatik; margjina-djathtas: auto; mbushje-djathtas: 15px; mbushje-majtas: 15px; ) @ media (gjerësia minimale: 576 px) ( .kontejneri ( gjerësia: 540 px; gjerësia maksimale: 100%; ) ) @media (gjerësia minimale: 768 px) ( .kontejneri ( gjerësia: 720 px; gjerësia maksimale: 100%; )) @media (min-gjerësia: 992 px) ( .kontejneri ( gjerësia: 960 px; gjerësia maksimale: 100%; ) ) @media (gjerësia minimale: 1200 px) ( .kontejneri ( gjerësia: 1140 px; gjerësia maksimale: 100% ; ) ) /* kontejner flex */ .row-flex ( shfaqja: -webkit-box; shfaqja: -webkit-flex; shfaqja: -ms-flexbox; shfaqja: flex; -webkit-flex-wrap: wrap; - ms- flex-wrap: wrap; flex-wrap: wrap; margin-djathtas: -15px; margin-left: -15px; ) /* Cilësimet CSS për artikujt flex */ .col-flex ( pozicioni: relative; gjerësia: 100 %; min-lartësia: 1px; mbushje-djathtas: 15px; mbushje-majtas: 15px; ) /* gjerësia e artikullit dhe kutitë mënjanë sipas parazgjedhjes */ .main_article, .main_aside ( -webkit-box-flex: 0; -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; gjerësia maksimale: 100% ) /* artikull dhe gjerësi mënjanë për ekranet e mëdhenj */ @media (min-gjerësia: 992 px) ( /* 2/3 e gjerësisë së kontejnerit */ .artikull_main ( -webkit-box-flex: 0; -webkit-flex: 0 0 66,666667%; -ms-flex: 0 0 66,666667%; flex: 0 0 66,666667%; gjerësia maksimale: 66,666667%; ) /* 1/3 e gjerësisë së kontejnerit */ .-flexitka : 0; -webkit-flex: 0 0 33.333333%; -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; gjerësia maksimale: 33.333333%; ) )

Për të mbështetur paraqitjen në shumicën e shfletuesve, shtoni prefikset e nevojshme dhe gjerësinë maksimale në CSS.

Për të "shndërruar" një bllok në një enë flex, ne do të përdorim klasën row-flex. Ne do të vendosim gjerësinë për çdo element flex (main_article dhe main_aside) brenda kontejnerit flex duke përdorur veçorinë flex CSS.

Si shembull, le të përdorim Flexbox për të shënuar bllokun "Footer" dhe seksionin "Interesant në sajt" të seksionit të artikullit kryesor.

Seksionin "Footer" do ta ndajmë në 4 pjesë të barabarta (gjerësia minimale e një pjese është 200 px), dhe seksioni "Interesante në sit" në 3 pjesë (gjerësia minimale e një pjese është 300 px).

[Titulli i faqes...]

[Pjesa kryesore...]

[1 më shumë...]

[2 më shumë...]

[3 më shumë...]

CSS shtesë:

Footer_block, .main_other_article ( -webkit-flex-basis: 0; -ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -webkit-flex-grow: 1; - ms-flex-pozitive: 1; përkulje-rritje: 1; gjerësia maksimale: 100%; )

Danny Markov

Dizajni është mjaft i thjeshtë - përbëhet nga një enë e vendosur në qendër, brenda së cilës kemi një kokë, seksion kryesor, shirit anësor dhe fund. Këtu janë "testet" kryesore që duhet të bëjmë duke mbajtur CSS dhe HTML sa më të pastër që të jetë e mundur:

1. Vendosni katër seksione kryesore të paraqitjes.
2. Bëni faqen të përgjegjshme (shiriti anësor rrëshqet poshtë përmbajtjes kryesore në ekranet e vegjël).
3. Përafroni përmbajtjen e titullit - navigimi në të majtë, butoni në të djathtë.

Siç mund ta shihni, për hir të krahasimit, ne mbajmë gjithçka sa më të thjeshtë. Le të fillojmë me testin e parë.

Testi 1: Vendosja e seksioneve të faqeve

Zgjidhje në Flexbox

Shtoni ekranin: përkulni në enë dhe vendosni drejtimin e elementeve të fëmijëve vertikalisht. Kjo i pozicionon të gjitha seksionet poshtë njëri-tjetrit.

Enë (ekrani: përkul; drejtimi i përkuljes: kolona; )

Tani duhet të sigurohemi që seksioni kryesor dhe shiriti anësor janë të vendosura krah për krah. Meqenëse kontejnerët fleksibël janë zakonisht me një drejtim, duhet të shtojmë një element shtesë.

Më pas vendosim që ai element të shfaqet: flex dhe flex-direction me drejtim të kundërt.

Mbështjellësi kryesor dhe i shiritit anësor (ekrani: përkul; drejtimi i përkuljes: rreshti; )

Hapi i fundit është vendosja e dimensioneve të seksionit kryesor dhe shiritit anësor. Ne duam që përmbajtja kryesore të jetë tre herë më e gjerë se shiriti anësor, gjë që është e lehtë për t'u bërë me përkulje ose përqindje.

Siç mund ta shihni, Flexbox bëri gjithçka mirë, por na duheshin edhe disa veçori CSS plus një element shtesë HTML. Le të shohim se si do të funksionojë CSS Grid.

Zgjidhja e rrjetit CSS

Ka disa opsione për përdorimin e rrjetit CSS, por ne do të përdorim sintaksën grid-template-zonat siç është më e përshtatshme për qëllimet tona.

Së pari, ne do të përcaktojmë katër zona të rrjetit , një për çdo seksion të faqes:

header ( zona e rrjetit: koka; ) .kryesore ( zona e rrjetit: kryesore; )

Tani mund të konfigurojmë rrjetin tonë dhe të përcaktojmë vendndodhjen e secilës zonë. Kodi mund të duket mjaft kompleks në fillim, por sapo të njiheni me sistemin e rrjetit, bëhet më i lehtë për t'u kuptuar.

Container ( display: grid; /* Përcaktoni madhësinë dhe numrin e kolonave të rrjetit tonë. Njësia fr funksionon si Flexbox: kolonat ndajnë hapësirën e lirë në rresht sipas vlerave të tyre. Do të kemi dy kolona - e para është tre herë sa madhësia e të dytit. .

Kjo eshte e gjitha! Paraqitja jonë tani do të përputhet me strukturën e mësipërme dhe ne e kemi vendosur atë në mënyrë që të mos kemi nevojë të merremi me margjina ose mbushje.

Testi 2. Bërja e faqes responsive

Zgjidhje në Flexbox

Ky hap lidhet rreptësisht me atë të mëparshëm. Për zgjidhjen Flexbox, do të duhet të ndryshojmë drejtimin e përkuljes dhe të rregullojmë margjinën.

@media (gjerësia maksimale: 600 pikselë) ( .mbështjellësi kryesor dhe i shiritit anësor ( drejtimi i përkulur: kolona; ) . kryesori (diferenca-djathtas: 0; kufiri-poshtë: 60 px; ) )

Faqja jonë është mjaft e thjeshtë, kështu që nuk ka shumë punë në pyetjen mediatike, por në një plan urbanistik më kompleks ka shumë punë për të bërë.

Zgjidhja e rrjetit CSS

Meqenëse ne kemi përcaktuar tashmë zonat e rrjetit, thjesht duhet t'i rirenditim ato në pyetjen e medias. Mund të përdorim të njëjtin konfigurim të kolonës.

@media (gjerësia maksimale: 600 pikselë) ( .container ( /* Rreshtoni zonat e rrjetit për paraqitjen celulare */ zonat e shabllonit të rrjetit: "koka e kokës" "kryesore" "shiriti anësor i shiritit anësor" "Futeri i fundit"; ) )

Ose mund të ripërcaktojmë të gjithë paraqitjen nga e para nëse mendojmë se kjo zgjidhje është më e pastër.

@media (max-width: 600px) ( .container ( /* Konvertimi i rrjetës në një plan urbanistik të vetëm */ grid-template-columns: 1fr; grid-template-zonat: "header" "main" "sidebar" "footer ";))

Testi 3: Përafrimi i komponentëve të kokës

Zgjidhje në Flexbox

butonin

Ne kemi bërë tashmë një plan urbanistik të ngjashëm në Flexbox në një nga artikujt tanë të vjetër - . Teknika është mjaft e thjeshtë:

Koka (shfaqja: përkul; justifiko-përmbajtje: hapësirë-midis; )

Lista e navigimit dhe butoni tani janë rreshtuar siç duhet. Mbetet vetëm për të vendosur sendet brenda