Flexbox pamācība: Individuāla izlīdzinājuma projektēšana kubam

Šajā pamācībā uzzināsiet, kā izmantot Flexbox lietojumprogrammu CSS un HTML, lai veidotu elementu individuālu izlīdzināšanu. Izmantojot nelielu vingrinājumu, kurā izveidosim kubveida lapu ar skaitli 3, mēs piemērosim dažādas Flexbox īpašības. Galvenā uzmanība tiks pievērsta elementu izstiepšanai un atsevišķai izlīdzināšanai konteinerā. Šis vingrinājums palīdzēs padziļināt zināšanas par Flexbox lietošanu un saprast, kā efektīvi izstrādāt savu tīmekļa projektu izkārtojumu.

Galvenās atziņas

• Flexbox ļauj viegli sakārtot elementus konteinerā.
• Īpašības align-items un align-self palīdz kontrolēt flexbox elementu izlīdzināšanu.
• Flexbox var izmantot divos virzienos: kā kolonnu (kolonnu) vai kā rindu (rindu).
• Strādājot ar Flexbox, ir svarīgi pareizi iestatīt konteinera un elastīgo elementu izmērus, lai panāktu tīru izkārtojumu.

Soli pa solim

Lai noformētu kubveida lapu, kurā attēlots skaitlis 3, izpildiet šos soļus:

1. solis: Izveidojiet HTML struktūru

Vispirms definējiet kuba lapas HTML pamatstruktūru. Izveidojiet konteineru, kurā ir trīs apļi (punkti). Pārliecinieties, ka konteiners ir saistīts ar CSS stilu lapu, lai vēlāk varētu piemērot elastīgās kastes īpašības.

Solis Nr. 2: Aktivizējiet flexbox

Konteinerim iestatiet īpašību display: flex;. Tādējādi konteiners kļūst par elastīgu konteineru. Varat arī izmantot flex-direction: column;, lai izkārtotu punktus vienu zem otra.

Solis 3: punktu izlīdzināšana

Tagad ir svarīgi izlīdzināt atsevišķos punktus. Pirmajam punktam varat izmantot īpašību align-self: flex-start;. Tādējādi pirmais punkts tiks novietots konteinera augšpusē. Tā kā tas jau ir noklusējuma iestatījums, tas neradīs nekādas vizuālas izmaiņas.

Solis Nr. 4. Otrā punkta centrēšana

Otrajam punktam piemēro align-self: centre;. Tādējādi punkts tiks pārvietots uz konteinera centru. Lai optimizētu pozīciju, var būt nepieciešams eksperimentēt ar polsterējumu un izmēru.

Solis Nr. 5: Trešā punkta atrašanās vieta

Trešajam punktam izmantojiet align-self: flex-end;, lai to pārvietotu uz konteinera apakšējo daļu. Tas vizuāli attēlo, ka punkti veido skaitli 3.

Solis Nr. 6: Pielāgojiet elastības virzienu

Jums ir arī iespēja mainīt elastīgo virzienu uz rindu;. Tādējādi punkti tiks attēloti viens otram blakus. Šādā gadījumā pārliecinieties, ka punkti joprojām ir pareizā secībā, lai attēlotu skaitli 3.

7. solis: pielāgojiet lodziņu izmērus

Lai nodrošinātu, ka punkti ir skaidri redzami, pielāgojiet lodziņu izmērus. Piemēram, iestatiet to platumu uz 20 pikseļiem, lai pārbaudītu, kā tie izskatās viens otram blakus.

8. solis: Iestatiet teksta izlīdzināšanu

Lai apļi būtu labāk redzami, varat izmantot īpašību text-align: center;. Tas centrēs tekstu apļos, padarot visu izkārtojumu vizuāli pievilcīgāku.

9. solis: Veiciet sīkus pielāgojumus

Lai pilnveidotu izkārtojumu, varat eksperimentēt ar padding un margin vērtībām. Iespējams, būs jāpielāgo konteinera izvietojums, lai viss izskatītos vienmērīgi.

10. solis: Galīgā pārbaude

Pārbaudiet visu izkārtojumu. Pievērsiet uzmanību punktu izvietojumam un to atstarpēm. Pārliecinieties, vai viss ir attēlots tā, kā esat to iedomājies.

Kopsavilkums

Šajā rokasgrāmatā jūs uzzinājāt, kā izstrādāt dažādus elementu izkārtojumus konteinerā, izmantojot Flexbox tehnoloģiju. Ar Flexbox palīdzību mēs izkārtojām kuba punktus tā, lai skaitlis 3 tiktu attēlots vizuāli pievilcīgā veidā. Jūs esat uzzinājuši align-items un align-self nozīmi, kā arī flex virzienus. Šīs zināšanas palīdzēs jums efektīvāk izstrādāt tīmekļa izkārtojumus un izpildīt dažādas prasības.