Dacă ați însușit fleksboksy (și care nu le-a stăpânit în ultimii doi sau trei ani?), Pentru că nu aveți problema de centrare totul, și în general aliniați după cum doriți. Ați fost mult timp proprietăți „magice“ familiare justifică conținut, aliniați-conținut, aliniați-elemente și aliniați-auto. și ceea ce face fiecare dintre valorile lor (nu neapărat amintiți-le pe toate pe de rost, puteți arunca o privire mereu în pat de copil sau de referință vizuală :). Dar știi despre aceste proprietăți? Ce se întâmplă dacă ți-am spus că puterea lor nu este fleksboksami limitat? Și ați văzut doar o fracțiune din valorile lor? Și că ei înșiși aceste proprietăți nu sunt de ori 4, și două și jumătate la fel de mult? Dacă doriți să stăpânească toată puterea lor, să învețe, și aici aspectul grila de modă nouă (grilă de aspect CSS), și nu se tem de caietul de sarcini junglă - bun venit la acest articol, în cazul în care vă voi arăta cât de adânc gaura de iepure merge W3C.
Grile CSS-menționate nu întâmplător: este mai bine să fie înarmat cu unul dintre browsere, în cazul în care acestea sunt deja lucrează (Firefox 52+, Chrome 57+, Opera 44+ și Safari 10.1 + / iOS 10.3+ Safari), și a vedea exemple în toată splendoarea lor.
Nu numai fleksboksy
Intr-un articol recent despre fleksboksov noi oportunități și CSS-grilele atunci când lucrează în conjuncție, a fost o scurtă probă cu proprietatea Align-sine (și încă unul, dar despre asta mai târziu) pentru celulele de grilă. A de mai jos - un exemplu interactiv de unde puteți compara pentru tine efectul celor patru proprietăți cunoscute în două containere cu diferite context, formatare - fleksboksovom și gridovom:
Vezi principiul general?
Proprietatea justifica conținut determină ce să facă cu spațiu nefolosit rămas după plasarea întregului conținut orizontal (mai precis, axa majoră, în funcție de proprietățile flex-direcție pentru fleksboksov, iar axa orizontală, în funcție de direcția textului, pentru grile -. Dar până când ne limităm la cazul simplu, la fel ca în exemplul). Dacă să părăsească acest loc la sfârșitul șirului (implicit), trece la partea de sus (apăsând conținutul până la capăt), împrăștie uniform pe dreapta și din stânga a conținutului (și astfel de centrare), împrăștie uniform între elementele, etc. Singura diferență este că elementele de rețea sunt grupate mai multe sau pe verticală (coloane), astfel încât locul este împărțit în mod necesar între coloane, și nu de elemente, cum ar fi fleksboksov.
O aliniere conținut are în esență același lucru, dar în verticale (sau mai precis, pe o axă perpendiculară pe fleksboksov bloc și grilele axă, dacă la toate zanudstvovat). Aici, în ambele cazuri, conținutul am grupat deja - în linie (în fleksboksah) sau seria (în grila). Și spațiu vertical poate fi, după toate aceste linii / rânduri în fața lui, la fel înainte și după ei (și atunci ei vor fi în mijloc), împărțită în mod egal între cele două ... În fleksboksah (în cazul în care, spre deosebire de grile, fără celule cu dimensiuni clare ) poate, de asemenea, întinde uniform înălțimea rândului / rânduri, astfel încât nu va fi nici un spațiu liber, la toate.
Cu alte cuvinte, proprietăți * -content gestiona tot conținutul dintr-o dată, tragerea și împingerea (dacă este necesar), atunci, ce conținutul este grupat siruri de caractere, rânduri sau coloane.
Ei bine, aliniați-elemente se aliniază cu precizie «elemente», adică elemente - fleksboksa rânduri în interiorul și rânduri ale grilei. Și aliniați-auto - este același, dar fiecare element separat, și a indicat pentru el. Prima stabilește comportamentul implicit al elementelor, iar al doilea îi permite să suprascrie.
Dar cum să se alinieze elementele - toate (implicit) sau unele individual - pe orizontală în coloanele grilei?
Mai puțin de nouă proprietăți
Se pare că pentru fiecare obiect de aliniere - tot conținutul. toate elementele implicit și singurul membru însuși - există o pereche de proprietăți, dintre care una se aliniază axa principală / orizontală (în acest caz - orizontală), iar al doilea - transversal / malic (în exemplul nostru - vertical). 6 transformă proprietăți - toate combinațiile celor două opțiuni prin care să se alinieze axa și trei - care este aliniat (elemente de conținut sau un element specific în sine). Iată-le:
- alinia conținut
- justifică conținut
- aliniați-elemente
- justifică-elemente
- alinierea auto
- justifica auto
In exemplul de mai sus puteți vedea toate cele 6 proprietăți în funcțiune în grile. Doar 4 dintre prietenii noștri vechi lucrează în fleksboksah: alinia elementele individuale de-a lungul axei principale este inutilă, deoarece întreg spațiul dintre ele deja reușește să justifice conținut. și distribuie după ce a avut nimic.
Deci, în plus față de cele șase proprietăți au acum trei:
Valoarea fiecăruia dintre ele - o combinație de valori align- * și justify- * separate printr-un spațiu. De exemplu, locul în conținut: centru de spațiu-între sau locul auto: centru de întindere. Procedura (prima aliniere verticală, apoi pe orizontală) corespunde ordinii, care include, de exemplu, indentare (în înregistrările de tip marjă: 20px auto). În cazul în care doar o singură valoare (de exemplu, loc-elemente: Start), acesta este copiat ambele componente de-a lungul ambelor axe.
O grămadă de valori noi
Dacă ați examinat cu atenție exemplul de mai sus, ai putea surprinde anumite valori pentru proprietățile nivelare. Ele sunt într-adevăr noi, și ei sunt în valoare de o poveste separată.
începe și se termină
În fleksboksah suntem obișnuiți cu valorile flex-start si flex-end. în funcție de direcția principale și laterale axe - care, la rândul lor, depind de direcția textului. Doar începe și se termină - aproape același lucru: începutul / sfârșitul liniei sau a blocului (rând sau coloană), respectiv, în funcție de direcția textului. Pentru linia / serie pe scris de la dreapta la stânga la Start - este lăsat margine, final - dreapta. Când scris de la dreapta la stânga - dimpotrivă. Atunci când litera pe verticală în jos, respectiv, începe - aceasta este înălțimea, sfârșitul anului - partea de jos. Și așa mai departe.
În practică, diferența dintre începutul / sfârșitul anului și flex-Start / flex-end doar prin faptul că primul, spre deosebire de a doua, nu ia în considerare „lovitura de stat“ axe în situații, cum ar fi-flux flex: inversat rând folie-inversat. Și în grilele au toate în esență, sinonime.
În Firefox, aceste valori sunt deja de lucru pentru fleksboksov și grile în Chrome - în prezent numai pentru grile.
auto-start și auto-end (pentru -items * și * -self)
Aceste două valori sunt tentați să numim „mai relativă“, mai degrabă decât doar începutul și sfârșitul. acestea alinia elemente fleks- și grid pe baza propriilor lor zone de text. De exemplu, în cazul în care unele celule ale grilei se introduce textul de la stânga la dreapta, în timp ce altele - de la dreapta la stânga (de exemplu, acest dicționar rusă-arabă), apoi justifica-elemente: auto-start conținutul primului presat marginea din stânga, iar al doilea - la dreapta. Ai putea vedea în exemplele de mai sus - pentru element penultimul în fiecare container, evidențiate în verde.
la stânga și la dreapta
Uneori, deși rar, este necesar să se alinieze ceva absolut, dreapta / stânga, indiferent de direcția textului. Acum este remediul pentru acest lucru. Dar nu exagera!
spațiu uniform (pentru * -content)
Cribs traduse Joni Traytel-ne la un moment dat a trebuit să corecteze o inexactitate (în original a rămas până în prezent, a fost la început, și în articolul lui Chris Koyera din care Joni alungare). Pentru spațiu în jurul a fost elaborat, în cazul în golurile dintre elementele și marginile containerului la elementele extreme sunt egale între ele:
Că un astfel de rezultat este de așteptat, în mod intuitiv de mulți (inclusiv eu), iar rezultatul real al spațiului din jurul-(golurile dintre elementele de două ori mai mare ca de margini) neplăcut surprins. A intervale regulate până acum a trebuit să caute hack non-triviale - fie prin spațiu-între, și :: înainte c :: după. sau utilizarea atipică a marjei: auto. Și este doar pentru un singur fleksboksov.
prima și ultima valoarea inițială de referință
Alinierea liniei de bază a fost mult timp o problemă dificilă în CSS, chiar și cele mai mari maeștri au avut adesea să poarte cu el întreaga luptă. Mai ales surprinzător faptul că unele elemente - de ex. Blocuri de inline - ultima linie aliniate cu linia de bază, și altele - de exemplu. Inline-tabel - la început. Acum este posibil să se controleze în mod explicit. Pentru această bază inițială înainte de un cuvânt cheie, puteți specifica un alt cuvânt-modificator - primul sau ultimul.
Vă rugăm să rețineți: modificator indicat cu precizie printr-un spațiu, nu cu cratimă, astfel încât valoarea proprietăților se obține un compozit de două cuvinte. Din cauza acestui decalaj, aproape nu a existat o confuzie cu valori reduse (cum se înțelege, de exemplu, locul auto:.? Primul sistem de referință Cât de amuzant alinierea primei o axă și se aliniază cu linia de bază a celuilalt sau ca alinierea liniei de bază pe ambele axe) a fost chiar o propunere pentru a înlocui valorile reduse slash decalajul, dar în cele din urmă începutul meciului. Deci, fii atent!
Acestea nu au putut fi încă văzut în acțiune în orice browser, astfel încât la început nici nu a vrut să fie adăugate la articol. Dar trebuie să :)
Poate că atunci când elementele de centrare într-un container flexibil de cauciuc pe care se confruntă cu o astfel de caracteristică neplăcută: în cazul în care containerul devine mai puțin elementul, ambele margini ale elementelor încep să se joace pentru container. Și în cazul în care containerul - această pagină, puteți lăsa conținutul pentru marginea sa stânga / sus și devin inaccesibile. Cu aceasta și lupte de cuvinte cheie în condiții de siguranță. dacă îl adăugați la centru (de exemplu, aliniați-elemente: centru de siguranță;), atunci elementul va fi centrat în container numai atunci când el este apt. Dacă el este coplesit cu containerul, partea „extra“ va acționa numai dreapta și în jos (pentru noi direcția obișnuită de scriere), în cazul în care până la ei, cel puțin se poate ajunge la defilare. Aproximativ cum se comportă atunci când elementele de centrare prin intermediul margin: auto. Ceea ce, de altfel, și simulează acest comportament în exemplul de mai jos:
Există, de asemenea, opusul a cuvântului cheie nesigure - alinierea întotdeauna / elementul de centrare așa cum se arată, indiferent unde și cum, în același timp, sunt „excedent“. Și, în mod implicit, proiectul actual, ar trebui să fie ceva între - un element ar trebui să fie aliniate așa cum este descris, dar cu apariția sulului totul trebuie să fie disponibile pentru el (dar au plecat de rezervare: În cazul în care browserele nu copleșească un comportament „inteligent“ - să le facă :) nesigur.
normale. cuvinte cheie auto și moștenirea
Așa cum se întâmplă de multe ori în CSS, valorile cu nume, cum ar fi normal și auto sunt cele mai confuz :). „Normal“ Comportamentul proprietatile noastre de a alinia depinde de metoda particulară de formatare a valorilor moștenite (moștenire este un modificator doar afectează dacă aceste valori moștenite sunt luate în considerare), și nici măcar nu sa deranjat să le adăugați la exemplele (care a fost posibil) astfel încât absolut nu se confunda. Dacă doriți, pentru a afla mai multe de la fiecare dintre ele va fi capabil direct la caietul de sarcini (a se vedea. De mai jos). Din fericire, în fleksboksah și grilele de comportament implicit general al principiului este destul de simplu: este posibil - să încerce să se întindă (întindere), restul - să apese pe axa corespunzătoare început (start).
Specificațiile întregi ale modulului (CSS Caseta de aliniere)
Dar cea mai mare surpriza, care ascunde modulul - că proprietățile pentru a alinia întregul nu se limitează doar fleksboksami și grile: în teorie, ei vor trebui să lucreze pentru un layout mai multe coloane (de altfel, browsere recent - Chrome pe versiunea 55th , Firefox c 52 minute - prefixe în final eliminate pentru proprietățile de coloană) și ... Tobele ... la blocuri convenționale !. Și ce dacă eu nu greșeală, aliniați-conținut: centru ar trebui să devină soluția standard a problemei legendara a alinierii pe verticală a unui conținut arbitrar. Din păcate, pentru a justifica conținut pentru blocuri prevede în mod explicit că nu se va aplica (oh, va trebui să continue să se alinieze -s marja contraintuitive ...), dar pentru a alinia conținut. în teorie, speranța rămâne! În teorie - pentru că în browser-ul (sau în Firefox, nici Chrome Canary) acest lucru este încă, se pare, că nu funcționează.
P.S. Acesta poate fi, de asemenea, interesat în:
Mai puțin de șase luni de la ultima schimbare în procesul de lucru W3C ca conducerea consorțiului a primit o propunere de a aplica acest nou proces în cele din urmă cu privire la caz. Și scrie off este caietul de sarcini HTML irelevant pentru muzeu, astfel încât acestea nu sunt dezvoltatori confuzi „pretinde a fi“ relevante.
Un alt modul CSS, pe care ni sa spus în liniște maturizat la statutul cu care W3C recomandă pentru a începe utilizarea de rutină a noilor produse. conține elemente de proprietate vă permite să restricționați schimbarea desenului copac, retrasarea CSS-cutii și de a schimba dimensiunea lor în cadrul elementului. De aceea este atât de important ...
MAI MULT
De la Paris (foto), care a trecut recent CSS intalnire de lucru de grup, a sosit știri amuzant: Proprietăți grilă-rând-gap și grila coloana-decalaj, precum și reducerea grilă decalaj ...