Acest articol se va concentra pe proprietatea flex. Despre aceasta am scris deja în acest articol - A doua parte a proprietăților secrete ale CSS3.
Amenajarea paginii
Partea HTML
Definiți două coloane, care în viitor vor face aceeași înălțime folosind CSS:
- flex-crestere - câte un bloc separat poate fi mai mult decât elemente învecinate.
- flex-shrink - definește capacitatea de a se micsora atunci când este necesar.
Pagina noastră este aproape de finalizare. Dar când blocul cu conținutul principal este îngustat, pagina devine foarte lungă. Prin urmare, pentru o anumită lățime a ecranului, putem asigura că bara laterală merge sub blocul cu conținutul principal și este vizibil în mod convenabil pe dispozitivele mobile:
Aici este codul fără prefixe, astfel încât să nu necesite mult spațiu și să nu pară greoaie. Puteți utiliza exemplul utilizând butonul de la începutul articolului.
De asemenea, este necesar să spunem despre locul în care funcționează această metodă. Deoarece această proprietate este destul de nouă, funcționează în browserele moderne Firefox, Chrome, Safari, Opera și IE 11.
Din acest articol, ați învățat cum să creați coloane de aceeași înălțime în CSS. Dar nu toate caracteristicile acestei proprietăți CSS. Proprietatea Flex vă permite să faceți blocuri de cauciuc, să aliniați elementele în mod automat în mai multe coloane sau rânduri, ocupând întreaga zonă liberă și multe altele.
Dar cea mai de bază și, cel mai important, soluția cea mai frecvent utilizată pentru aspectul paginii, am abordat acest articol.
😎 O soluție teribilă de două coloane de înălțime egală! Nu există altă alternativă!
Alte soluții sunt fie "bluffs", cum ar fi lățimea marginii în afară. O soluție mai mult sau mai puțin bună este să dăm containerului global proprietățile tabelului (afișaj: tabel;), în afară și principală - proprietățile celulei (afișare: table-cell;). Dar această decizie nu este aceeași, nu foarte ... Și aici - doar încântare!
Soluția este simplă, elegantă, se adaptează cu ușurință la sine. În plus, aceasta include opțiunea pentru telefoanele mobile.
Deși regula cea mai recentă nu este complet clară:
@media all și (max-width: 700px).
#main
>
- Acest gol nu este vizibil în 40 de pixeli.
Mulțumesc foarte mult, îl dau în slujba.
Dar este interesant, cum va fi corect să înșurubați antetul și pivnița în afara paginii containerului? De exemplu, pentru a crea un container global
#greutate globală: 0 automat;
max-lățime: 1300px;>
și în acesta antetul, apoi secțiunea id = "pagina # 038; # 34, în cele din urmă, subsolul ...
Mulțumesc, omule - a venit la îndemână!
Dar el are câteva probleme - le puteți rezolva, dar va trebui să sufli.
IMHO, pentru a scăpa de această derulare, există două soluții:
a) În meniu dați link-uri nu numai la articole, ci și link-uri către ancora de la începutul articolului. De exemplu,
Apoi, când faceți clic pe butonul de meniu, utilizatorul va sari imediat în partea de sus a articolului, nu pe pagină. Și meniul va rămâne în partea de sus.
2. A doua problemă - sa dovedit, nu este atât de ușor să alegeți lățimea la care deoparte și pagina sunt aliniate cu o panglică:
Deși, acum experimentat: se pare, în diferite browsere mobile, totul în moduri diferite! oklmn!
Poate cineva va propune o soluție?
Articole similare
Trimiteți-le prietenilor: