Flexbox pamatjēdzieni

Flexible Box Module, ko parasti dēvē par flexbox, tika izstrādāts kā viendimensijas izkārtojuma modelis un kā metode, kas varētu piedāvāt telpas sadali starp elementiem saskarnē un jaudīgas līdzināšanas iespējas. Šajā rakstā ir sniegts flexbox galveno funkciju izklāsts, kuras mēs izpētīsim.

Kad mēs raksturojam flexbox kā viendimensiju, mēs aprakstām faktu, ka flexbox vienlaikus nodarbojas ar izkārtojumu vienā dimensijā — vai nu kā rindu, vai kā kolonnu. To var pretstatīt CSS režģa izkārtojuma divdimensiju modelim, kas kopā kontrolē kolonnas un rindas.

Divas flexbox asis

Strādājot ar flexbox, jādomā par divām asīm — galveno asi un šķērsasi.

Galveno asi nosaka flex-direction īpašība, un šķērsass iet tai perpendikulāri. Viss, ko mēs darām ar flexbox, attiecas uz šīm asīm, tāpēc ir vērts saprast, kā tās darbojas jau no paša sākuma.

Galvenā ass

Galveno asi nosaka elastīgais virziens, kam ir četras iespējamās vērtības:

• row 
• row-reverse
• column
• column-reverse

Ja izvēlaties rindu vai rindu apgriezti (reversā), jūsu galvenā ass brauks gar rindu iekļautajā virzienā.

Izvēlieties kolonnu vai kolonnu apgriezti (reversā), un jūsu galvenā ass darbosies no lapas augšdaļas uz leju — bloka virzienā.

Krusteniskā ass, jeb šķērsass

Šķērsass iet perpendikulāri galvenajai asij, tādēļ, ja jūsu elastīgais virziens (flex-direction) (galvenā ass) ir iestatīts uz row vai row-reverse, šķērsass iet lejup pa kolonnām.

Ja jūsu galvenā ass ir kolonna vai kolonna apgriezta(column or column-reverse), tad šķērsass iet gar rindām.

Sākuma un beigu līnijas

Vēl viena svarīga izpratnes joma ir tā, kā flexbox neizdara nekādus pieņēmumus par dokumenta rakstīšanas režīmu. Agrāk CSS tika plaši izmantots horizontālo un rakstīšanas režīmu virzienā no kreisās uz labo pusi. Mūsdienu izkārtojuma metodes ietver dažādus rakstīšanas režīmus, tāpēc mēs vairs nepieņemam, ka teksta rindiņa sāksies dokumenta augšējā kreisajā stūrī un virzīsies uz labo pusi, un jaunas rindas parādīsies viena zem otras.

Tālāk sniegtajam aprakstam vajadzētu palīdzēt izskaidrot, kāpēc mēs nerunājam par kreiso un labo un augšējo un apakšējo virzienu, aprakstot virzienu, kādā mūsu elastīgie priekšmeti plūst.

Ja flex-direction ir rinda un es strādāju latviešu valodā, tad galvenās ass sākuma mala būs kreisajā pusē, gala mala labajā pusē.

Ja es strādātu arābu valodā, tad manas galvenās ass sākuma mala būtu labajā pusē un beigu mala kreisajā pusē.

Abos gadījumos šķērsass sākuma mala atrodas elastīgā konteinera augšpusē un beigu mala apakšā, jo abām valodām ir horizontālais rakstīšanas režīms.

Pēc kāda laika domāšana par sākumu un beigām, nevis pa kreisi un pa labi, kļūst dabiska, un jums noderēs, strādājot ar citām izkārtojuma metodēm, piemēram, CSS režģa izkārtojumu, kas atbilst tiem pašiem modeļiem.

Elastīgais konteiners (Flex container)

Dokumenta apgabalu, kas izkārtots, izmantojot flexbox, sauc par elastīgo konteineru. Lai izveidotu elastīgu konteineru, mēs iestatām apgabala konteinera displeja rekvizīta vērtību uz flex vai inline-flex. Tiklīdz mēs to darām, šī konteinera tiešie atvasinājumi kļūst par elastīgiem priekšmetiem. Tāpat kā visiem CSS rekvizītiem, dažas sākotnējās vērtības ir definētas, tāpēc, veidojot elastīgo konteineru, visi ietvertie elastīgie vienumi darbosies šādi.

Vienumi tiek rādīti rindā (elastīgā virziena rekvizīta noklusējuma vērtība ir rinda).

• Vienumi sākas no galvenās ass sākuma malas.
• Elementi neizstiepjas galvenajā dimensijā, bet var sarukt.
• Vienumi izstiepsies, lai aizpildītu šķērsass izmēru.
• Elastīgā pamata rekvizīts ir iestatīts uz automātisku.
• Flex-wrap rekvizīts ir iestatīts uz nowrap.

Tā rezultātā visi jūsu vienumi tiks sarindoti rindā, galvenajā asī izmantojot satura lielumu kā to lielumu. Ja tvertnē ir vairāk priekšmetu, nekā var ievietot, tie netiks iesaiņoti, bet gan pārplūdīs. Ja daži vienumi ir garāki par citiem, visi vienumi stiepjas gar šķērsasi, lai aizpildītu to pilnā izmērā.

Zemāk esošajā tiešajā piemērā varat redzēt, kā tas izskatās. Mēģiniet rediģēt vienumus vai pievienot papildu vienumus, lai pārbaudītu flexbox sākotnējo darbību.

.box {
display: flex;
}

<div class="box">
<div>Viens</div>
<div>Divi</div>
<div>Trīs
<br>ir
<br>ekstra
<br>teksts
</div>
</div>

Flex virziena maiņa (flex-direction)

Flex-direction rekvizīta pievienošana elastīgajam konteineram ļauj mainīt virzienu, kādā tiek rādīti mūsu elastīgie priekšmeti. Elastīgā virziena iestatīšana: rindu apgrieztā secībā (flex-direction: row-reverse) vienumi tiks rādīti rindā, tomēr sākuma un beigu rindas tiek mainītas.

Ja mainām elastīgo virzienu uz kolonnu (flex-direction uz column ), galvenā ass pārslēdzas, un mūsu vienumi tagad tiek parādīti kolonnā. Iestatīt kolonnu apgrieztu, un sākuma un beigu rindas atkal tiek pārslēgtas.

Tālāk redzamajā reāllaika piemērā elastīgais virziens ir iestatīts uz rindas reversu (flex-direction iestatīt uz row-reverse). Izmēģiniet citas vērtības — rindu, kolonnu un kolonnu apgrieztā veidā (row, column and column-reverse) —, lai redzētu, kas notiek ar saturu.

.box {
display: flex;
flex-direction: row-reverse;
}

<div class="box">
<div>Viens</div>
<div>Divi</div>
<div>Trīs</div>
</div>

Vairāku līniju (multi-line) flex konteineri ar flex-wrap

Lai gan flexbox ir viendimensijas modelis, ir iespējams, ka mūsu elastīgie vienumi tiek apvilkti vairākās līnijās. To darot, katra līnija būtu jāuzskata par jaunu elastīgu konteineru. Jebkurš vietas sadalījums notiks pa šo līniju, neatsaucoties uz līnijām abās pusēs.

Lai izraisītu ietīšanas (wrap) darbību, pievienojiet rekvizītu flex-wrap ar vērtību wrap. Ja jūsu vienumi būs pārāk lieli, lai tos visus parādītu vienā rindā, tie tiks apvilkti citā rindā. Tālāk esošajā paraugā ir ietverti vienumi, kuriem ir piešķirts platums, un vienumu kopējais platums ir pārāk plats elastīgajam konteineram. Kad flex-wrap ir iestatīts uz wrap, vienumi tiek ietīti jeb wrapoti. Iestatiet to uz nowrap, kas ir arī sākotnējā vērtība, un tā vietā tie saruks, lai ietilptu konteinerā, jo tiek izmantotas sākotnējās flexbox vērtības, kas ļauj vienumiem sarukt. Nowrap izmantošana izraisītu pārplūdi, ja priekšmeti nevarētu sarauties vai nevarētu sarukt pietiekami mazi, lai ietilptu.

.box {
display: flex;
flex-wrap: wrap;
}

<div class="box">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>

Vairāk par wrapping flex vari uzzināt šajā materiālā Mastering Wrapping of Flex Items. #ENG

Flex-flow īsais pieraksts

Varat apvienot abas flex-direction un flex-wrap īpašības elastīgās plūsmas īsrakstā. Pirmā norādītā vērtība ir flex-direction un otrā vērtība ir flex-wrap.

Tālāk esošajā  piemērā mēģiniet mainīt pirmo vērtību uz vienu no pieļaujamajām flex-direction vērtībām — rindu, rindu apgrieztu, kolonnu vai kolonnu apgrieztu, kā arī mainiet otro vērtību uz wrap un nowrap.

.box {
display: flex;
flex-flow: row wrap;
}

<div class="box">
<div>Viens</div>
<div>Divi</div>
<div>Trīs</div>
</div>

Rekvizīti, kas lietoti flex-items

Lai vairāk kontrolētu elastīgos priekšmetus, mēs varam tos atlasīt tieši. Mēs to darām, izmantojot trīs īpašības:

• flex-grow 
• flex-shrink
• flex-basis

Šajā pārskatā mēs īsi apskatīsim šos rekvizītus, un jūs varat iegūt pilnīgāku izpratni ceļvedī Flex elementu kontroles koeficienti galvenajā asī.. 

Pirms mēs varam izprast šīs īpašības, mums jāapsver pieejamās telpas jēdziens. Tas, ko mēs darām, mainot šo elastīgo īpašību vērtību, ir mainīt veidu, kā pieejamā telpa tiek sadalīta starp mūsu vienumiem. Šis pieejamās telpas jēdziens ir svarīgs arī tad, kad aplūkojam priekšmetu izlīdzināšanu.

Ja mums ir trīs 100 pikseļu plati vienumi konteinerā, kas ir 500 pikseļu plats, tad vieta, kas mums nepieciešama, lai izkārtotu mūsu vienumus, ir 300 pikseļi. Tas atstāj 200 pikseļu brīvas vietas. Ja mēs nemainām sākotnējās vērtības, flexbox ievietos šo atstarpi aiz pēdējā vienuma.

Ja mēs tā vietā vēlētos, lai priekšmeti augtu un aizpildītu vietu, mums ir nepieciešama metode, kā sadalīt atlikušo vietu starp priekšmetiem. Tas ir tas, ko darīs elastības īpašības(flex properties), ko piemērojam pašiem priekšmetiem.

Flex pamata īpašība flex-basis

flex-basis nosaka šī vienuma lielumu, ņemot vērā vietu, ko tas atstāj kā pieejamo vietu. Šī īpašuma sākotnējā vērtība ir auto — šajā gadījumā pārlūkprogramma pārbauda, vai vienumiem ir noteikts izmērs. Iepriekš minētajā piemērā visu vienumu platums ir 100 pikseļi, tāpēc tas tiek izmantots kā flex-basis.

Ja vienumiem nav izmēra, satura lielums tiek izmantots kā flex-basis. Tāpēc, kad mēs vienkārši deklarējam display: flex uz vecāka, lai izveidotu elastīgus vienumus, visi vienumi tiek pārvietoti uz rindu un aizņem tikai tik daudz vietas, cik nepieciešams, lai parādītu to saturu.

Elastīgas augšanas īpašums

Ja flex-grow rekvizīts ir iestatīts uz pozitīvu veselu skaitli, elastīgie vienumi var augt gar galveno asi no to elastīguma pamata. Tādējādi vienums izstiepsies un aizņems visu pieejamo vietu uz šīs ass vai daļu no pieejamās vietas, ja arī citiem priekšmetiem ir atļauts augt.

Ja mēs visiem mūsu vienumiem iepriekš minētajā piemērā norādītu flex-grow vērtību 1, tad pieejamā vieta elastīgajā konteinerā tiktu vienādi sadalīta starp mūsu vienumiem un tie izstieptos, lai aizpildītu konteineru uz galvenās ass.

Flex-grow īpašību var izmantot, lai proporcionāli sadalītu vietu. Ja savam pirmajam vienumam piešķiram flex-grow vērtību 2, bet pārējiem vienumiem katram vērtību 1, pirmajam vienumam tiks piešķirtas 2 pieejamās vietas daļas (100 pikseļi no 200 pikseļiem iepriekš minētajā piemērā). , 1 daļa un pārējās divas (katra 50 pikseļi no kopējā 200 pikseļu kopskaita).

Elastības saraušanās īpašība flex-shrink

Ja flex-grow rekvizīts ir saistīts ar vietas pievienošanu galvenajā asī, elastīgās saraušanās rekvizīts kontrolē tā atņemšanu. Ja konteinerā nav pietiekami daudz vietas, lai izkārtotu vienumus, un elastīgā saraušanās funkcija ir iestatīta uz pozitīvu veselu skaitli, vienums var kļūt mazāks par elastīgo bāzi. Tāpat kā flex-grow gadījumā, var piešķirt dažādas vērtības, lai viens vienums saruktu ātrāk nekā citi — vienums ar augstāku vērtību, kas iestatīts flex-shrink, saruks ātrāk nekā tā brāļi un māsas, kurām ir zemākas vērtības.

Izstrādājot faktisko saraušanās apjomu, kas notiks, tiks ņemts vērā preces minimālais izmērs, kas nozīmē, ka elastīgā saraušanās darbība var šķist mazāk konsekventa nekā elastīga palielināšana. Tāpēc mēs sīkāk aplūkosim, kā darbojas šis algoritms, rakstā Vienumu attiecību kontrole gar galveno asi.

Piezīme. Šīs elastīgās augšanas un elastīgās saraušanās vērtības ir proporcijas. Parasti, ja visi mūsu vienumi būtu iestatīti uz elastīgumu: 1 1 200 pikseļi un pēc tam vēlamies, lai viens vienums pieaugtu divreiz ātrāk, mēs iestatītu šo vienumu uz elastīgumu: 2 1 200 pikseļi. Tomēr, ja vēlaties, varat izmantot arī flex: 10 1 200 px un flex: 20 1 200 px.

Jūs ļoti reti redzēsit flex-grow, flex-shrink un flex-basis īpašības, kas tiek izmantotas atsevišķi; tā vietā tie tiek apvienoti īsajā pierakstā. Elastīgais saīsinājums ļauj iestatīt trīs vērtības šādā secībā —

flex-grow, flex-shrink, flex-basis.

Tālāk sniegtais piemērs ļauj pārbaudīt dažādas īsā pieraksta vērtības; atcerieties, ka pirmā vērtība ir flex-grow. Pozitīvas vērtības piešķiršana nozīmē, ka prece var augt. Otrais ir flex-shrink — ar pozitīvu vērtību vienumi var sarukt, bet tikai tad, ja to kopējās vērtības pārsniedz galveno asi. Galīgā vērtība ir elastīga; šī ir vērtība, ko preces izmanto kā pamatvērtību, lai palielinātu un samazinātos.

.box {
display: flex;
}

.viens {
flex: 1 1 auto;
}

.divi {
flex: 1 1 auto;
}

.trīs {
flex: 1 1 auto;
}

<div class="box">
<div class="viens">VIENS</div>
<div class="divi">DIVI</div>
<div class="trīs">TRĪS</div>
</div>

Ir arī dažas iepriekš definētas saīsinātas vērtības, kas aptver lielāko daļu lietošanas gadījumu. Jūs bieži redzēsit tos izmantot apmācībās, un daudzos gadījumos tas ir viss, kas jums būs jāizmanto. Iepriekš definētās vērtības ir šādas:

• flex: initial
• flex: auto
• flex: none
• flex: <positive-number>

Setting flex: sākotnējais atiestata vienumu uz sākotnējām Flexbox vērtībām. Tas ir tas pats, kas flex: 0 1 auto. Šajā gadījumā flex-grow vērtība ir 0, tāpēc lietas nepalielināsies par to elastīgās bāzes izmēru. Flex-shrink vērtība ir 1, tāpēc lietas var sarukt, ja nepieciešams, nevis pārpildīt. Elastības bāzes vērtība ir automātiska. Vienumiem tiks izmantots jebkurš izmērs, kas iestatīts vienumam galvenajā dimensijā, vai arī tie tiks iegūti no satura lieluma.

Izmantojot flex: auto ir tas pats, kas izmantojot flex: 1 1 auto; viss ir kā ar flex:initial, bet šajā gadījumā lietas var augt un piepildīt konteineru, kā arī sarukt, ja nepieciešams.

Elastības izmantošana: neviens neradīs pilnībā neelastīgus flex priekšmetus. It kā jūs uzrakstījāt flex: 0 0 auto. Lietas nevar augt vai sarukt, bet tiks izliktas, izmantojot flexbox ar automātisko elastīgo bāzi.

Apmācībās bieži redzamais saīsinājums ir flex: 1 vai flex: 2 un tā tālāk. Tas ir tā, it kā jūs izmantotu attiecīgi flex: 1 1 0 vai flex: 2 1 0 un tā tālāk. Vienumi var augt un sarukt, ja elastības bāze ir 0.

Izmēģiniet šīs saīsinātās vērtības tālāk esošajā reāllaika piemērā.

.box {
display: flex;
}

.viens {
flex: 1;
}

.divi {
flex: 1;
}

.trīs {
flex: 1;
}

<div class="box">
<div class="viens">VIENS</div>
<div class="divi">DIVI</div>
<div class="trīs">TRĪS</div>
</div>

Brīvās vietas izlīdzināšana, pamatojums un sadali starp priekšmetiem.

Flexbox galvenā iezīme ir spēja izlīdzināt un attaisnot vienumus uz galvenās un šķērsass, kā arī sadalīt vietu starp elastīgajiem elementiem. Ņemiet vērā, ka šīs īpašības ir jāiestata elastīgajam konteineram, nevis pašiem vienumiem.

izlīdzināt vienumus
Rekvizīts align-items līdzinās vienumus uz šķērsass.

Šī rekvizīta sākotnējā vērtība ir stiepšanās, un tāpēc elastīgie vienumi pēc noklusējuma stiepjas līdz elastīgā konteinera augstumam. To var noteikt konteinerā esošā augstākā vienuma augstums vai izmērs, kas iestatīts uz paša elastīgā konteinera.

Tā vietā varat iestatīt vienumu izlīdzināšanu uz flex-start, lai vienumi būtu vienā rindā elastīgā konteinera sākumā, flex-end, lai līdzinātu tos līdz galam, vai centrā, lai līdzinātu tos centrā. Izmēģiniet to dzīvajā piemērā — esmu piešķīris elastīgajam konteineram augstumu, lai jūs varētu redzēt, kā vienumus konteinerā var pārvietot. Skatiet, kas notiek, ja iestatāt līdzināšanas vienumu vērtību uz:

• stretch
• flex-start
• flex-end
• center

.box {
display: flex;
align-items: flex-start;
}

<div class="box">
<div>Viens</div>
<div>Divi</div>
<div>Trīs
<br>Ir
<br>Ekstra
<br>teksts
</div>
</div>

Justify-saturs

Rekvizīts justify-content tiek izmantots, lai izlīdzinātu vienumus uz galvenās ass — virzienā, kurā flex-direction ir iestatījis plūsmu. Sākotnējā vērtība ir flex-start, kas sarindos vienumus konteinera sākuma malā, taču varat arī iestatīt vērtību flex-end, lai tos sakārtotu beigās, vai centrā, lai tos sakārtotu centrā.

Varat arī izmantot vērtību atstarpi space-between, lai pēc vienumu izkārtošanas aizņemtu visu brīvo vietu, un vienmērīgi sadalīt to starp vienumiem, lai starp katru vienumu būtu vienāds atstarpes apjoms. Lai katra vienuma labajā un kreisajā pusē radītu vienādu atstarpi, izmantojiet vērtību atstarpe. Ar atstarpi, priekšmetu abos galos ir uz pusi mazāka vieta. Vai arī, lai vienumiem ap tiem būtu vienāda vieta, izmantojiet vērtību vienmērīgi. Ar vienmērīgu vietu vienumiem abos galos ir pilna izmēra vieta.

Izmēģiniet tālāk norādītās attaisnojuma satura vērtības dzīvajā piemērā:

• flex-start
• flex-end
• center
• space-around
• space-between
• space-evenly

.box {
display: flex;
justify-content: flex-start;
}

<div class="box">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>

Rakstā  Vienumu izlīdzināšana Flex konteinerā (ENG) varat padziļināti izpētīt šīs īpašības, lai labāk izprastu to darbību. Tomēr šie vienkāršie piemēri būs noderīgi vairumā lietošanas gadījumu.