LPgenerator - Professional Pagina de destinație Platforma pentru a crește vânzările afacerii dvs.
MAGAZIN UNIVERSITATEA Aterizare ACTIUNI DIN PARTENERII
Flexbox - o nouă metodă de simulare reproducea în CSS3. Versiunea anterioară a avut patru CSS metoda de aspect:
- Schema bloc pentru un aspect de document;
- Liniar de simulare de circuit pentru cuvânt;
- Schema de tabel pentru tabelul de date 2D;
- Schema predeterminate elemente de poziționare pentru poziționare precisă.
Acum, s-ar putea crede, „Ce despre metodele de poziționare? Ele sunt adesea folosite pentru realizarea de prototipuri! „Bună idee, dar metodele de poziționare nu au fost destinate acestui scop. CSS au fost restaurate de vechiul compatibil cu acesta atributul în HTML. Dezvoltatorii web inteligente au găsit modalități de utilizare a acestora pentru a crea alte aspecte complexe, dar acestea sunt limitate și, de asemenea, buggy - confirma oricine care a luptat cu metodele Slearfix de curățare.
CSS3 a introdus două noi metode de aspect ca o metodă alternativă de utilizare de poziționare și tabele:
- -komponovka Grid sau aspect, împarte spațiul în coloane și rânduri. Deoarece schema de masă, dar mai bine! Specificații Grid -komponovki sunt încă în curs de dezvoltare și nu este încă gata pentru utilizare.
- Flexbox aspect alocă spațiu împreună un rând sau o coloană. Ca pozitionare, dar este mai bine! Caietul de sarcini flexbox sunt finalizate și au browser-suport excelent până în prezent.
Scurt istoric flexbox
Scopul meu în timp ce am fost de lucru cu flexbox și mai târziu cu rețeaua, a fost de a înlocui toate aceste poziții nebun / de masă / liniare și alte prostii, pe care a trebuit să învețe ca un dezvoltator de web. Tot rahatul ăsta a fost (a) prost, (b) dificil de ținut minte, și (c) o milioane limitat de moduri de enervant, și așa aș dori să fac câteva module machetate de înaltă calitate, care rezolvă aceeași problemă o simplă, ușor - și modalități accesibile de utilizat.
Pe scurt: flexbox Grid și au fost create în mod deliberat pentru a înlocui metoda de poziționare și schema de tabel.
Există (sau nu) 3 caietul de sarcini flexbox?
Este posibil să fi auzit despre cele trei caracteristici flexbox. (Ceea ce-mi aduce aminte de scena din Star Trek :)
Nu-l lăsa să te sperii. Da, există trei versiuni ale caietului de sarcini, dar numai unul dintre ei are într-adevăr o greutate:
Aspecte flexbox «merg în aceeași direcție“
Ne pare rău, glumă proastă.
Am spus că flexbox are elemente în același rând sau coloană. Să vorbim despre ce înseamnă:
Aspect flexbox cuprinde flex-container care conține elementele flexare. container Flex- pot fi aranjate orizontal sau vertical. Noi o numim axa principală.
copil Direct înregistrează-flex container aliniat de-a lungul axei principale. Aceste intrări pentru copii pot schimba dimensiunea lor și umple spațiul neutilizat în container, sau poate fi redusă pentru a evita merge dincolo de limitele containerului.
Combinarea mai multor flexare containere în direcții diferite, puteți crea machete complexe.
Flexbox au prea multe proprietăți pentru a le dezasamblează aici, așa că am să vă trimit la unic pe Ghidul flexbox și trucuri CSS, care face o treabă excelentă de a introduce toate proprietățile.
Nu-ți face griji! Există mai multe opțiuni, dar flexbox include un set de valori implicite inteligente, astfel încât să puteți crea un aspect puternic, folosind foarte puțin cod. De exemplu:
Aceasta este o linie de cod are toate caracteristicile următoare:
- Recunoațte container .flex asemănător container flex.
- Toate intrările copilului recunoaște .flex cum ar fi containere elemente flex.
- Elementele Flex sunt aranjate într-o linie orizontală.
- Componentele Flex sunt aranjate în ordinea inițială.
- Elementele Flex sunt aranjate, pornind de la containerul flexibil din partea stanga.
- Elementele Flex vor avea o anumită dimensiune în funcție de proprietățile de lățime constantă.
- Dacă nu aveți suficient spațiu pentru toate elementele flex, acestea vor fi comprimate pe orizontală, până când totul se potrivesc.
- În cazul în care au nevoie să fie comprimat, fiecare element va fi redus în mod egal.
- Elemente Flex va trage toate vertical pentru a se potrivi cu înălțimea de cel mai înalt element de flex.
Cu toate acestea, nu este suficient pentru o singură linie de CSS! Aveți posibilitatea să modificați oricare dintre ele, dar aș dori să vă dau un gust de cât de puternic poate fi flexbox fără muncă suplimentară.
suport Browser: Chrome 21+, Opera 12.1+, Firefox 22+, Safari 6.1+, IE 10+
Flexbox sprijinit în toate browserele moderne.
IE10 sprijină, de asemenea, flexbox, dar utilizează specificațiile Tweener (afișare: flexbox).
Ce se va întâmpla cu versiunile mai vechi ale IE?
Am câteva sugestii.
În cel mai bun caz? Dacă nu te superi, browsere non-flexbox vor avea aspect diferit, și atunci nu trebuie să faceți nimic. Aceasta se numește „degradare grațioasă“ și, desigur, cea mai simplă abordare.
Când browsere vedea ordinea în care ei nu înțeleg - cum să afișeze: flex - ei ignora complet. Este foarte convenabil pentru noi, deoarece aceasta înseamnă că toate proprietățile flexbox vor fi ignorate. Flex-recipient și elementele sale va reveni la valoarea implicită, și, de asemenea display: block.
degradare „Elegant“ cu Modernizr
În cazul în care browser-ul dvs. nu acceptă flexbox, acesta va fi adăugat klass.no-flexbox. Aici este un exemplu simplu de modul în care CSS va arata:
Avantajul acestei abordări este că codul de rezervă este distribuit la clasa .no-flexbox. Ca urmare, atunci când vine ziua, va fi capabil să refuze să sprijine browsere non-flexbox, puteți elimina cu ușurință toate codul .no-flexbox și site-ul dvs. continuă să funcționeze la fel de bine. Și nu necesită refactorizare.
Flexbox o modalitate de a bate joc de simulare a adăugat CSS3, pentru a înlocui poziția și de masă viciate machete. Ea are un set de valori implicite inteligente, ceea ce face ușor de a crea machete complexe cu cod relativ mic. El este browsere stabil, ușor de utilizat, și bine susținute.
ATENȚIE! Utilizați un browser învechit Internet Explorer
Acest site este construit pe tehnologii avansate, moderne și nu acceptă al doilea Internet Explorer și versiunea a șaptea.
