În acest tutorial vei învăța cum să construiești o structură exemplu pentru proiectele tale web folosind layout-ul Flexbox în CSS și HTML. Ne vom concentra pe uneltele de depanare integrate în Visual Studio Code în legătură cu Microsoft Edge și vom face primii pași pentru activarea layout-ului Flexbox. Flexbox este un sistem de layout puternic care te ajută să creezi aspecte complexe cu efort minim și aranjare flexibilă a elementelor.
Cel mai important
- Cu Flexbox poți aranja elementele orizontal și vertical.
- Uneltele de dezvoltare Microsoft Edge pot fi integrate direct în Visual Studio Code.
- Flex-Direction influențează orientarea elementelor Flex.
Ghid pas cu pas
În primul rând, vei instala uneltele Microsoft Edge în Visual Studio Code. Caută „Unelte Microsoft Edge for VS Code” în extensii și instalează-le.
După ce extensia este instalată, va trebui să accesezi opțiunile de depanare. Fă clic pe „Run and Debug” apoi pe „create a launch.json file”. Acest lucru te va ajuta să-ți configurezi setările.
În fișierul de configurare creat, adaugă o nouă configurație pentru „Uneltele Microsoft Edge”. Asigură-te că introduci adresa locală localhost:3000, deoarece vom rula serverul pe acest port în terminalul nostru.
Acum este momentul să începi proiectul tău. Navighează în directorul corect și rulează comanda npm run dev. Apoi deschide localhost:3000 în browser-ul tău.
Odată ce pagina s-a încărcat, poți activa uneltele de dezvoltare Microsoft Edge făcând clic pe butonul corespunzător din Visual Studio Code. Aceasta va deschide Developer-Tool direct lângă editorul tău.
Acum poți vedea structura aplicației tale. Avem un container (div) care poartă clasa „Flex Container”. În interiorul acestui container sunt patru elemente DIV, fiecare având clasa „Flex Child” și reprezentând textul 1, 2, 3 și 4.
Containerul Flex este definit în prezent doar cu o lățime de 400 pixeli și o înălțime de 200 pixeli, în timp ce copiii Flex sunt definiți cu o lățime de 100 pixeli și o înălțime de 50 pixeli. Deși niciunul dintre copii nu este actualmente aranjat cu Flexbox, aceștia sunt afișați într-o listă verticală.
Pentru a folosi Flexbox, trebuie să adaugi atributul CSS display: flex; pentru containerul Flex și să salvezi. Dacă faci acest lucru, vei vedea că aranjamentul copiilor se schimbă automat și sunt afișați acum unul lângă altul.
Dacă dorești să rearanjezi copiii Flex din nou vertical, poți folosi proprietatea flex-direction. Setează flex-direction: column; pentru containerul Flex, pentru a readuce orientarea copiilor Flex la direcția verticală.
Vei observa că acum copiii Flex sunt aranjați din nou vertical. Dacă ajustezi înălțimea și lățimea acum, va părea că sunt integrate într-un bloc, chiar dacă display-ul nu este setat pe bloc, ci pe Flex.
Aceasta a fost deja o prezentare generală a conceptelor de bază ale layout-ului Flexbox. În videoclip am discutat principalele caracteristici și am văzut cum acestea afectează. În viitoarele tutoriale, vom explora mai multe funcționalități ale Flexbox și vom vedea ce poți face cu acest sistem de layout puternic.
Rezumat
În acest tutorial ai învățat cum să construiești o structură simplă cu Flexbox în CSS. Ai integrat uneltele de dezvoltare Microsoft Edge în Visual Studio Code și ai făcut primii pași pentru activarea layout-ului Flex. Mai ai multe posibilități în fața ta, pe care le vom aborda mai detaliat în videoclipurile următoare.
Întrebări frecvente
Cum activez Flexbox în CSS?Activezi Flexbox adăugând CSS-ul display: flex; pentru container.
Ce este flex-direction?flex-direction determină orientarea copiilor Flex, fie orizontală (rând) fie verticală (coloană).
Cum integrez uneltele Microsoft Edge în Visual Studio Code?Îți poți instala pur și simplu „Uneltele Microsoft Edge for VS Code” din bara de extensii și le poți activa.
