Flexibels kastes modelis CSS un HTML (Instruktāža) - izveido responsošus izkārus

Tavs gaida kursā par Flexbox CSS un HTML.

Kas ir Flexbox izkārtojums un kāpēc vispār to vajadzētu izmantot?

Še tiek izveidots projekts, kurā tālāk tiks strādāts.

Še es prezentēju paraugu struktūru un atkļūdošanas iespējas, kas iekļautas VS Code ar MS Edge rīkiem. Turklāt šajā video pirmo reizi tiek aktivizēts Flexbox izkārtojums un nosprausta virzība.

Kā vienmērīgi vai noteiktos attiecību proporcijās iedalīt vietu Flexbox izkārtojumā?

Mazs uzdevums, kuram nevar izvairīties no nedaudz vienkāršas matemātikas.

Še es iepazīstinu horizontālu izkārtojumu ar divām sānu joslām, kas elastīgi pielāgojas platumam.

Bērnuelementi var tikt līdzināti garjoma assī no elastīgā konteineru. Šeit es parādīšu, kā to var iestatīt.

Ne tikai konteinerī var noteikt visu bērnu elementu līdzināšanu, ar align-self to var atšķirīgi pielāgot arī atsevišķiem elementiem.

Neliels vingrinājums, lai individuāli izlīdzinātu ar kauliņu.

Neesam tikai gar horizontālo asi, kurā varētu izvietot Flex konteineri, bet var arī mainīt virsmas izvietojumu pa galveno asi. ;-)

Neliels piemērs tam, kā galvenajā ass virzienā var izmantot ļoti labi biežā izkārtojumā.

Kamēr vēlaties būt elastīgs, jums ir jāspēj norādīt bērnu elementu lielumu neatkarīgi no konkrētās platuma vai augstuma. Laimei, ir flex-basis-Svojība, ar kuru var to panākt. Mainot flex-direction, platums kļūst par augstumu un otrādāk. 

Cik daudz elementam jāpalielina, ja ir vairāk vietas nekā norāda flex-basis? To var precīzi iestatīt, izmantojot flex-grow.

Cik daudz vienuma vajadzētu sarauties, ja ir mazāk vietas nekā norāda flex-basiss? Šo var precīzi iestatīt, izmantojot flex-shrink.

Bērnu elementi var ne tikai sarukt, ja ir mazāk vietas, bet arī tikt izlauzti no konteineriem. Kā to kontrolēt, izmantojot flex-wrap, es parādīšu šajā videoklipā.

flex-direction un flex-wrap var kombinēt atribūtā flex-flow. Tas ir pat loģiski, ja vēlaties iestatīt tikai flex-direction, jo flex-flow ir īsāka. ;-)

Uzdevums par flex-wrap.

Dažreiz ir jābūt atstarpei, lai cilvēka acs nepievilcinātu lieki neērtā situācijā. Uz laimi, ir CSS īpašība gap, kas tieši to panāk bērna elementiem Flex konteinerā.

Kārtībai jābūt, īpaši tīmekļa saskarām, jo tām jābūt viegli lietojamām. Secību dažreiz nepieciešams noteikt individuāli, neveicot elementu pārvietošanu DOM. Tam lieliski piemērota CSS īpašība order, ar kuru var viegli mainīt elementu redzamo secību.

Pārbaudīsim, vai jūs esat sapratuši secību. Šeit ir pat otra iespēja sasniegt to pašu rezultātu, bet jums noteikti šis arī nāks prātā.

Ļoti bieži gadās, ka cilvēkiem ir nepieciešams horizontāli un vertikāli (!) centrēt elementus un it īpaši tekstu. Tas, kas agrāk bija bēdīga pieredze, tagad ar Flexbox ir kā bērnu dzimšanas diena.

Kas nezina 3-klāšu izkārtojumu? Ja tas vēl pielāgojas pieejamajam vietam, tad maz kas vairs trūkst līdz atsaustāma dizaina izveidošanai.

Vai pastāv tīmekļa vietnes bez veidlapām? Ja jā, tad tās nav daudzas. Tāpēc ir ļoti svarīgi, lai tās būtu pievilcīgi izvietotas, un par laimi ar Flexbox nav problēmu.

Bieži vien saskaras ar ieguldītu izkārtojumu, bet ar Flex-izkārtojumu pat tādi vairs nav liela problēma.

Šobrīd tīmeklī ir pilns ar tērzēšanas klientiem un ar mākslīgā intelekta tērzēšanas robotiem ir papildināts vēl vairāk. Bet kā var izveidot tērzēšanu ar Flexbox? To parādīšu šajā video.

Vismaz kopš Web 2.0 gandrīz katrā tīmekļa vietnē var atrast galeriju. Šajā video es aprakstu, kā šāds izkārtojums var tikt īstenots lieliski, piemēram, ar Flexbox palīdzību.

Tagad viss vajadzētu būt skaidrs par Flex izkārtojumu. Visbeidzot, es aprakstīšu, ko jūs esat mācījušies, ko jūs vēl varat darīt un kādas ir vēl skaistas CSS izkārtojumu iespējas.