Izpratne par FlexBox – jeb kā šis izkārtojums darbojās un reaģē lapas saturā?
Līdzīgi kā div un box konteiners, ko varat izveidot, izmantojot HTML, flexbox ir konteinera veids. Flexbox var pārvarēt ierobežojumus, ko rada tādi konteineri kā block un inline, jo tas veic labāku mērogošanu lielākās tīmekļa lapās un nodrošina arī dinamiskāku konteineru vadību. Tas ir tāpēc, ka tas var augt, sarukt un izlīdzināt tajā esošos vienumus, kas programmētājam nodrošina labāku kontroli pār konteinerā esošo priekšmetu saturu un stilu.
Pirms uzzināt par izplatītākajiem izkārtojumiem, kas izveidoti, izmantojot flexbox, ir svarīgi saprast tajā esošās īpašības un to, kā darbojas flexbox. Apskatīsim dažus svarīgos flexbox raksturlielumus un īpašības, ko var izmantot to konfigurēšanai.
Flexbox ir viendimensijas, kas nozīmē to, ka varat to līdzināt pa rindu vai kolonnu, un pēc noklusējuma tas ir iestatīts uz rindu līdzinājumu. Ir divas asis, galvenā (main) un šķērsass (cross-axis), līdzīgi kā x un y ass, ko izmanto koordinātu ģeometrijā. Izlīdzinot gar rindu, horizontālo asi sauc par galveno asi, un vertikālo asi sauc par šķērsasi. Vienumiem, kas atrodas flexbox konteinerā, izvietošana sākas no augšējā kreisā stūra, kas virzās pa galveno vai horizontālo asi. Kad rinda ir aizpildīta, vienumi pāriet uz nākamo rindu.
Ņemiet vērā, ka, izmantojot īpašību, ko sauc par flex-direction, varat apgriezt galveno asi, lai tā darbotos vertikāli, un šķērsass pēc tam būs horizontāla.
Šādā gadījumā vienumi sāksies no augšējās kreisās puses un virzīsies uz leju pa vertikālo galveno asi. Jūsu izvēlētie rekvizīti palīdzēs labāk kontrolēt konteinera un tajā esošo vienumu līdzinājumu, atstarpi, virzienu un galu galā stilu.
attēla avots: css-tricks
Tagad apskatīsim dažus svarīgos rekvizītus, kas ļaus konfigurēt flexbox.
Flexbox īpašības
Oriģinālais HTML kods:
<body>
<div class="flex-container">
<div class="box box1"> Viens..</div>
<div class="box box2"> Divi..</div>
<div class="box box3"> Trīs..</div>
<div class="box box4"> Četri..</div>
<div class="box box5"> Pieci..</div>
<div class="box box6"> Seši..</div>
<div class="box box7"> Septiņi..</div>
</div>
</body>Original CSS file:
.box{
background-color: aquamarine;
border-radius: 5px;
margin: 2px;
padding: 10px;
}
HTML failā ir septiņi div konteineri.
Atbilstošais CSS fails satur noteikumus visiem septiņiem div tagiem, kuriem ir lodziņa klase. Ņemiet vērā, kā katrai atzīmei tiek piešķirti divi klašu nosaukumi, no kuriem viens ir kopīgs visām klasēm un otrs ir no tā neatkarīgs. Stils tiek piemērots visiem konteineriem.
Tagad pievienosim elastīgajam konteineram rekvizītus, pārvēršot to par elastīgu.
.flex-container {
display: flex;
}
Izlīdzināšanas īpašības
Apskatīsim dažas izlīdzināšanas īpašības flex iekšpusē. Ir četras galvenās īpašības, ko izmanto elastīga konteinera un tajā esošo priekšmetu izlīdzināšanai:
- justify-content. Vienumu izlīdzināšanai uz galvenās ass.
- align-items. Vienumu izlīdzināšanai uz šķērsass.
- align-self. Unikāliem elastīgiem priekšmetiem uz šķērsass.
- align-content. Izmanto elastīgo līniju iepakošanai un telpas kontrolei.
No tiem attiecīgajām divām asīm bieži izmanto vienumus justify-content un align-items.
Vispirms izpētīsim, kā tiek izmantots attaisnojošais saturs, kura vērtība pēc noklusējuma ir “pa kreisi”.
.flex-container{
display: flex;
justify-content: center
}
Noklusējums šim iestatījumam ir “nowrap”, kas nozīmē, ka vienumi aptvers visu ass platumu.
.flex-container{
display: flex;
justify-content: center;
flex-wrap: wrap;
}
Vienumi tagad tiks “wrapoti” līdz pieejamā skatvietas izmēram.
flex-direction:
Šis rekvizīts tiek izmantots, lai iestatītu galveno asi, kas pēc noklusējuma ir “rinda”. Tas būtībā nozīmē, ka jūs maināt savu “galveno” asi no horizontālām rindām uz vertikālām kolonnām.
.flex-container{
display: flex;
justify-content: center;
flex-direction: column;
flex-wrap: wrap;
}
Iznākums izskatās kā sākotnējā izvade raksta sākumā ar “box”; tomēr tagad tas faktiski ir flex.
Tagad vēlreiz salīdzināsim vienumus un pārbaudīsim dažus citus iepriekš minētos rekvizītus.
align-items:
Izlīdzināšana uz šķērsass tiek veikta ar šīs īpašības palīdzību. Mainīsim tā vērtību uz “flex-end”.
CSS kods:
.flex-container{
display: flex;
justify-content: center;
flex-direction: column;
flex-wrap: wrap;
align-items:flex-end;
}
Termins ‘end’ attiecas uz lapas labo pusi, jo kreisā puse tiek uzskatīta par sākumu.
align-self:
Šo īpašību var izmantot atsevišķiem priekšmetiem flex iekšpusē.
.flex-container{
display: flex;
justify-content: center;
flex-direction: column;
flex-wrap: wrap;
align-items:flex-end;
}
.box3{
background-color: blanchedalmond; /* piešķiram citu krāsu */
align-self: center;
}
Šeit ir mainīta trešā lodziņa krāsa un līdzinājums, un tas ignorē rekvizītus, kas iestatīti, izmantojot līdzināšanas vienumus.
gap:
spraugas īpašību var izmantot, lai izveidotu atstarpi starp elementiem gar galveno asi. Varat arī individuāli konfigurēt atstarpes rindās un kolonnās, izmantojot rindu atstarpes un kolonnu atstarpes rekvizītus.
.flex-container{
display: flex;
justify-content: center;
flex-direction: column;
flex-wrap: wrap;
align-items:flex-end;
gap:10px; /* lielāka sprauga starp elementiem */
}
.box3{
background-color: blanchedalmond;
align-self: center;
}
Ir skaidras izmaiņas atstatumā starp vienumiem.
Galīgais īpašību kopums ir flex-grow, flex-shrink un flex-basis. Tie kopā nosaka, kā loks aizņem vietu, aug vai sarūk atkarībā no pieejamās vietas.
Šīs ir rekvizīta, ko sauc par flex, apakšīpašības. Visiem trim rekvizītiem kopā var piešķirt arī vērtības, izmantojot kaut ko, ko sauc par īso apzīmējumu CSS. Saīsinātie apzīmējumi palīdz padarīt kodu kompaktu, kā arī viegli rakstāmu un izpildāmu. Vērtībām, kuras saīsinātajā apzīmējumā ir atstātas tukšas, tiek piešķirtas to noklusējuma vērtības.
.flex-container{
flex: 0 1 auto;
}Šeit flex-container klasei ir noteikts noteikums flex īpašumam. Vērtības atbilst trim īpašībām, proti, flex-grow iestatīts uz 0, flex-shrink uz 1 un flex-basis uz auto. Elastīgā bāze nosaka konteinera sākotnējo izmēru. un kopā tie nosaka stingrību vai elastību un dinamismu, ko vēlaties pievienot flexbox.
Lai parādītu šī iestatījuma efektu, kods ir nedaudz jāmaina, noņemot flex-direction vērtību, kas iestatīta uz “kolonna”. Tas mainīs to uz noklusējuma “rindu”, un izvade atkal būs centrāli izlīdzināta un horizontāli vislabāk sadalīta starp divām rindām.
Pārējais atlikušais kods nav mainīts. Tomēr izvade mainīsies, ja kods tiks modificēts, pievienojot flex rekvizītu klasē flex item box3.
.box3{
background-color: blanchedalmond;
align-self: center;
flex: 1 1 auto;
}
Trešais lodziņš tagad aizņem visu pieejamo brīvo vietu, jo flex-growth vērtība ir iestatīta uz 1. Tātad, ja flex-grow ir iestatīts uz 1, visi bērni tiks iestatīti uz vienādu lielumu. Un, ja vienam no bērniem ir vērtība 1,5, šis bērns aizņemtu vairāk vietas nekā pārējie.
Ir svarīgi saprast, kā izmaiņas galvenajā un šķērsasī ietekmē to, kā jūs iztēlojaties un manipulējat ar flexbox. Kad būsiet vairāk praktizējis, jūs jutīsities ērtāk ar šo rekvizītu izmantošanu, un kļūs vieglāk izmantot elastīgās kastes un izprast vienumu plūsmu un izlīdzināšanu flexbox iekšpusē.
Atbildēt
Lai komentētu, jums jāpiesakās sistēmā.