Flexbox CSS: Pirmie soļi jūsu vietnes strukturēšanas virzienā

Šajā pamācībā uzzināsiet, kā izveidot tīmekļa projektu parauga struktūru, izmantojot Flexbox izkārtojumu CSS un HTML. Mēs aplūkosim Visual Studio Code iebūvētos atkļūdošanas rīkus kopā ar Microsoft Edge un spersim pirmos soļus, lai aktivizētu Flexbox izkārtojumu. Flexbox ir jaudīga izkārtojuma sistēma, kas palīdz jums izveidot sarežģītus izkārtojumus ar nelielu piepūli un elastīgu elementu izkārtojumu.

Galvenie secinājumi

• Flexbox ļauj izkārtot elementus horizontāli un vertikāli.
• Microsoft Edge izstrādātāja rīkus var integrēt tieši Visual Studio kodā.
• Flex-Direction ietekmē Flex elementu izlīdzināšanu.

Soli pa solim

Vispirms instalējiet Microsoft Edge rīkus programmā Visual Studio Code. Paplašinājumos meklējiet "Microsoft Edge Tools for VS Code" un instalējiet to.

Kad paplašinājums ir instalēts, jums jāpāriet uz atkļūdošanas opcijām. Noklikšķiniet uz "Run and Debug" (Palaist un atkļūdošana) un pēc tam uz "create a launch.json file" (Izveidot launch.json failu). Tas palīdzēs jums konfigurēt iestatījumus.

Tagad izveidotajā konfigurācijas failā pievienojiet jaunu konfigurāciju "Microsoft Edge Tools". Pārliecinieties, ka kā lokālo adresi ievadāt localhost:3000, jo šajā portā mūsu terminālī mēs darbinām serveri.

Tagad ir pienācis laiks palaist projektu. Pāriet uz pareizo apakšdirektoriju un izpildiet komandu npm run dev. Pēc tam pārlūkā atveriet localhost:3000.

Kad lapa ir ielādēta, varat aktivizēt Microsoft Edge izstrādātāja rīkus, noklikšķinot uz attiecīgās pogas Visual Studio Code. Tādējādi izstrādātāja rīks tiks atvērts tieši blakus redaktoram.

Tagad varat apskatīt savas lietojumprogrammas struktūru. Mums ir konteiners (div) ar klasi "Flex Container". Šajā konteinerā ir četri DIV elementi, kuriem ir klase "Flex Child" un kuri attiecīgi attēlo teksta saturu 1, 2, 3 un 4.

Pašlaik ir definēts tikai elastīgais konteiners ar platumu 400 pikseļi un augstumu 200 pikseļi, bet elastīgie bērni ir definēti ar platumu 100 pikseļi un augstumu 50 pikseļi. Lai gan neviens no bērniem pašlaik nav sakārtots ar Flexbox, tie tiek parādīti vertikālā sarakstā.

Lai aktīvi izmantotu Flexbox, ir nepieciešams pievienot un saglabāt CSS atribūtu display: flex; konteineram Flex. Kad to izdarīsiet, redzēsiet, ka bērnu izkārtojums automātiski mainās un tie tagad tiek parādīti viens otram blakus.

Ja vēlaties atkal sakārtot Flex bērnus vertikāli, varat izmantot īpašību flex-direction. Iestatiet elastīgajam konteineram īpašību flex-direction: column;, lai mainītu elastīgo bērnu orientāciju atpakaļ uz vertikālu.

Redzēsiet, ka tagad elastīgie bērni atkal ir izkārtoti vertikāli. Ja tagad pielāgosiet augstumu un platumu, tie izskatīsies kā integrēti blokā, pat ja displejs nav iestatīts uz Block, bet gan uz Flex.

Tas jau bija pārskats par Flexbox izkārtojuma pamatiem. Šajā videoklipā mēs esam apsprieduši svarīgākās īpašības un redzējuši to ietekmi. Turpmākajās pamācībās mēs izpētīsim vairāk Flexbox īpašību un redzēsim, ko jūs varat darīt ar šo jaudīgo izkārtojuma sistēmu.

Kopsavilkums

Šajā pamācībā jūs uzzinājāt, kā izveidot vienkāršu struktūru ar Flexbox CSS. Jūs esat integrējuši Microsoft Edge izstrādātāja rīkus programmā Visual Studio Code un veikuši pirmos soļus, lai aktivizētu Flex izkārtojumu. Jums priekšā vēl ir daudz iespēju, kuras mēs sīkāk aplūkosim nākamajos videoklipos.