CSS tīmekļa lapas izkārtojums FlexBox, Grid, Box

CSS jeb (cascading style sheets) “kaskādes stila lapas” ir noteikumu kopums, kas uzlabo tīmekļa lapu izskatu. Pirmajos gados interneta pārlūkprogrammas ieviesa CSS, jo tas sniedza iespēju labākam vizuālajam noformējumam un lielākām radošuma iespējām.

Attīstība

Pārlūkprogrammas turpina attīstīties un izaugt ārpus tradicionālajām ierīcēm. Paralēli attīstījās C. S. S.  iespējas. Šī attīstība ietver adaptīva dizaina ieviešanu CSS, un tā šajā ceļā ir vēl vairāk paplašinājusies, izmantojot izkārtojuma iespējas, piemēram, elastīgās kastes (flexbox), režģus (grid) un kastes (box). Un kā gan jūs varētu iebilst, ka izkārtojums ir viens no svarīgākajiem labas tīmekļa lapas izstrādes komponentiem, jo izkārtojumi palīdz sadalīt lapu dažādās sadaļās, tādējādi padarot lapu reprezentablāku.

Viewports

Tātad, uzzināsim vairāk par CSS tīmekļa izkārtojumiem. CSS var izmantot, lai uzlabotu tīmekļa lapu, mainot fontus, krāsas, izkārtojumu, izmēru un citas stila formatēšanas opcijas, kas padara tīmekļa lapu reprezentablāku. Pārlūka logs, kas lietotājam ir redzams ekrānā, tiek saukts par skata portiem (Viewports). Būtībā jebkura CSS tīmekļa izkārtojuma ideja ir izveidot optimāli izstrādātu tīmekļa lapu, kurai jebkurā punktā ir labi skata porti. Citiem vārdiem sakot, CSS izkārtojumi ir saistīti ar to, kā tiek organizēts jūsu tīmekļa lapu saturs, veidojot izkārtojumus.

DisplayProperty – DisplayBlock

Svarīgs iestatījums ir display property. Ko tas tādu svarīgu dara? Displeja rekvizīts norāda lodziņa veidu, ko vēlaties izmantot konkrētam html elementam. Pamatā displeja rekvizīts nosaka, vai saturs renderēts horizontāu lodziņu vai bloka lodziņu modeļos, (inline vai block) …

… html elementiem piešķir taisnstūrus vai lodziņus. Tātad CSS kārtulas var lietot, piemēram, relatīvais CSS kārtulas html elementam ar ID. Nosaukts paraugs saturētu displeja rekvizītu ar bloka vērtību.

Kods maina displeja lodziņa rekvizītu uz bloka tipa izkārtojumiem, kas izveidoti, izmantojot bloka tipu, ir labi, taču mainīgo prasību rezultātā tika izstrādāti CSS tīmekļa izkārtojumi, piemēram,

#piemērs {

display: block;

}

FlexBox un Grid

flex box un grid, kas palīdzēja izveidot noteikumus vairākiem elementiem. Tie pievienoja lielāku elastību un dimensiju, nodrošinot labākas iespējas precīzāk pielāgot konkrētas tīmekļa lapas sadaļas. Galvenā atšķirība starp abām ir tā, ka flexbox ir viendimensijas, savukārt grid, kā norāda vārds, ir divdimensiju.

Flex box ir saīsinājums no elastīgās kastes modeļa (Flexible Box Model), un tas tika ieviests pirms grid – režģa izkārtojuma. Piemēram, rekvizīts flex box ar ID #piemērs  satur displeja rekvizītu, kura vērtība ir flex,

#piemērs {

display: flex;

}

flex pievieno CSS reaģētspēju ar peldošiem elementiem, un pozicionēšana vienā dimensijā attiecas uz faktu, ka konkrētais elastīgās kastes konteiners kārtos vienumus jebkurā kolonna vai rindā gar tās asi. Elastīgās kastes konteiners, kas uzlikts virs elementa, var izmainīties, lai saruktu vai izplestos atkarībā no ekrāna izmēra kādā tiek pārlūkota lapa pārlūkprogrammā. Tādējādi tiek iegūts elastīgs, atsaucīgs dizains.

CSS režģis ir līdzīgs elastīgajam lodziņam, izņemot to, ka tas izveido divdimensiju režģi gan pa rindu, gan kolonnu asīm. Piemēram, režģa kārtulas paraugam ID #piemērs Var pievienot pēc displeja rekvizīta pievienošanas ar režģi kā vērtību,

#sample {

display: grid;

}

savukārt režģis palielina dimensiju un palīdz salīdzinoši viegli izveidot uzlabotu izkārtojumu.

Nobeigumā…

Tas var izraisīt arī palielinātas komplikācijas vēlāk. Ja elementu noteikumi nav sistemātiski definēti, nav stingru noteikumu par to, kādu izkārtojumu izvēlēties, taču parasti flexbox ir piemērotāks, ja vēlaties izveidot elastīgus elementus mazākās “telpās”, savukārt režģi ir piemērotāki liela mēroga izkārtojumiem. Šajā rakstā ir sniegts atsevišķs skaidrojums par katru izkārtojuma veidu, taču praksē vienas lapas renderēšanai, iespējams, tiks izmantots vairāk nekā viens izkārtojums. Šo izkārtojumu un CSS noteikumi ir standartizēti, taču tas nenozīmē, ka esat ierobežots attiecībā uz radošumu, estētiku vai optimizāciju. Veidojot tīmekļa lapu.