Aspectul CSS Flexible Box Layout – Flexbox – oferă o soluție simplă la problemele de proiectare și aspect, pe care proiectanții și dezvoltatorii s-au confruntat cu CSS. Permiteți-mi să vă arăt cum să-l utilizați pentru a genera câteva aspecte și provocări comune cu care vă veți confrunta în proiectarea unui design de site web receptiv.

Presupun că știi deja baza Flexbox. Dacă nu, există multe documente care vă învață despre Flexbox. As recomanda Înțelegerea Flexbox: tot ce trebuie să știți.

Iată ce vom face

În acest articol, vă voi arăta cum să realizați 7 machete diferite folosind FlexBox.

  1. Navigare
  2. Centrați imaginea pe ecran
  3. Aspectul site-ului web receptiv
  4. AddOn pentru câmpurile de intrare
  5. 3 coloane

Obțineți codul

Toate exemplele pe care le voi arăta pot fi descărcat din contul meu GitHub. Codul pentru fiecare exemplu este doar html și css. Am creat o pagină principală principală care oferă un link către fiecare exemplu pe care îl vom acoperi.

Iata 5 machete pe care le puteti realiza cu

Fiecare site web are o navigare. Folosind Flexbox puteți crea o navigare care are numele companiei dvs. în stânga și elementele de meniu în dreapta.

1611330846 24 Iata 5 machete pe care le puteti realiza cu

Pentru a realiza acest aspect în CSS, ar trebui să utilizați flotante pentru a obține un conținut care să apară în stânga, iar restul conținutului să apară în dreapta.

Cu FlexBox trebuie să specificați un container flex care conține navigarea. Numele companiei din stânga este un articol flexibil din acest container.

Elementele de meniu din dreapta sunt propriul container flexibil cu un

    care conține toate elementele de meniu.

    Iată html-ul pentru navigare:

    Iată CSS pentru navigare:

    Centrare imagine pe ecran

    Multe site-uri web includ o imagine de dimensiuni complete. De obicei, această imagine conține text centrat pe ecran.

    1611330847 572 Iata 5 machete pe care le puteti realiza cu

    Provocarea constă în stilizarea imaginii astfel încât să se potrivească paginii complete, indiferent dacă vizualizați acest lucru pe un monitor cu ecran lat, laptop, tabletă sau telefon și dacă CSS rămâne centrat pe ecran. Flexbox facilitează acest lucru. Pentru a imita textul centrat pe ecran am inclus un buton

    Iată html pentru a centra o imagine pe ecran:

    Iată CSS pentru a centra o imagine pe ecran:

    Aspect responsabil de site-ul web

    Aproape fiecare site web are același aspect care conține o navigație în partea de sus și un subsol în partea de jos. Între acestea există 3 coloane formate sau o bară laterală dreaptă și stângă și zona principală de conținut. În general, zona principală de conținut ocupă 60% din lățimea ecranului, iar celor două bare laterale li se alocă câte 20% din ecran.

    1611330848 872 Iata 5 machete pe care le puteti realiza cu

    Provocarea pentru crearea unui site web receptiv este ca subsolul să rămână în partea de jos a paginii, indiferent de cât de mult conținut este afișat. Zona de conținut ar trebui să deruleze dacă există mai mult decât poate fi afișat pe pagină.

    Iată html-ul pentru aspectul site-ului receptiv:

    Iată codul css pentru aspectul site-ului receptiv:

    AddOn pentru câmpul de intrare

    Pentru a vă îmbunătăți experiența de utilizare, mulți designeri preferă să introducă imagini sau text în câmpurile lor de introducere. Aceasta oferă utilizatorului instrucțiuni cu privire la ceea ce ar trebui să fie inclus în câmp.

    1611330848 830 Iata 5 machete pe care le puteti realiza cu

    Cu CSS tradițional, care a fost foarte provocator și a necesitat să utilizați un format de tabel pentru a insera ceva înainte sau după un câmp de intrare. Cu Flexbox este mult mai ușor.

    Iată codul html pentru addon pentru câmpurile de intrare:

    Iată codul css pentru addon pentru câmpul de intrare:

    Aspect 3 coloane

    Este foarte frecvent ca site-urile web să includă un aspect cu 3 coloane pe ecran.

    1611330849 7 Iata 5 machete pe care le puteti realiza cu

    Iată html pentru un aspect cu 3 coloane:

    Iată css pentru aspectul cu 3 coloane:

    Mulțumesc că mi-ai citit articolul. Dacă vă place, faceți clic pe pictograma clap de mai jos pentru ca alții să găsească articolul. Iată câteva dintre articolele mele care v-ar putea interesa:

    Gândiți-vă în afara cutiei cu CSS forma-afară
    7 lucruri pe care le-am învățat în călătoria mea de la programarea bootcampului la Senior Developer
    De ce cultura companiei este importantă pentru cariera dvs. de inginer software