Metodă pentru poziționarea elementelor flexibile. Alinierea blocurilor utilizând CSS utilizând recipientul Flex Flex Flexbox

Unul dintre motivele pentru care Flexbox a prins rapid interesul dezvoltatorilor web este că a adus pentru prima dată capabilități de aliniere adecvate pentru web. A permis o aliniere verticală adecvată, astfel încât să putem centra cu ușurință o cutie. În acest ghid, vom lua o privire detaliată a modului în care proprietățile de aliniere și justificare lucrează în Flexbox.

Pentru a centra cutia noastră folosim proprietatea de aliniere pentru a alinia elementul nostru pe axa transversală, care în acest caz este axa blocului care rulează vertical. Folosim justifică conținutul pentru a alinia elementul de pe axa principală, care, în acest caz, axa inline care rulează orizontal.

Puteți să aruncați o privire la codul acestui exemplu de mai jos. Schimbarea dimensiunii containerului sau a elementului imbricat și elementul imbricat rămâne întotdeauna centrat.

Proprietăți care controlează alinierea

Proprietățile pe care le vom uita în acest ghid sunt ca urmare.

Justificați-conținutul - controlează alinierea tuturor elementelor de pe axa principală.
Aliniere - controlează alinierea tuturor elementelor de pe axa încrucișată.
Align-auto - controlează alinierea unui element flexibil individual pe axa încrucișată.
Align-conținut - descris în spec ca pentru "Linii Flex Flex"; Controlează spațiul dintre liniile flexibile de pe axa încrucișată.

De asemenea, vom descoperi modul în care marjele auto pot fi utilizate pentru alinierea în Flexbox.

Notă.: Proprietățile de aliniere din Flexbox au fost plasate în propriul lor specificație - nivelul de aliniere a casetei CSS 3. Este de așteptat ca acest spec să înlocuiască în cele din urmă proprietățile definite în Nivelul FlexBox.

Axa încrucișată.

Alinierea elementelor și alinierea proprietăților de aliniere a elementelor noastre flexibile pe axa încrucișată, în jos coloanele dacă direcția Flex este rând și de-a lungul rândului dacă este o coloană Flex-Direcție.

Folosim alinierea axei încrucișate în cel mai simplu exemplu Flex. Dacă adăugăm afișaj: Flex la un container, elementele copilului devin elemente flexibile aranjate la rând. Ei se vor întinde pentru a fi la fel de înalți ca cel mai înalt element, deoarece acel element definește înălțimea elementelor de pe axa încrucișată. Dacă recipientul dvs. Flex are un set de înălțime, elementele se vor întinde la această înălțime, indiferent de cantitatea de conținut în element.

Elementele devin aceeași înălțime este că valoarea inițială a elementelor de aliniere, proprietatea care controlează alinierea pe axa încrucișată, este setată la întindere.

Putem folosi alte valori pentru a controla modul în care elementele aliniază:

align-elemente: Flex-Start
aliniere: Flex-end
align-elemente: centru
align-elemente: Stretch
align-elemente: linia de bază

În exemplul live de mai jos, valoarea articolelor aliniere este întinsă. Încercați celelalte valori și vedeți cum toate elementele se aliniază unul împotriva celuilalt în recipientul Flex.

Alinierea unui element cu aliniere-sine

Proprietatea de articole aliniene stabilește proprietatea alinierelor pe toate elementele flexibile ca grup. Aceasta înseamnă că puteți declara în mod explicit proprietatea alinierei de a vizita un singur element. Alinierea proprietății acceptă toate aceleași valori ca și elementele de aliniere plus o valoare de auto, care va reseta valoarea la cea definită pe recipientul Flex.

În acest text următor, recipientul Flex are elemente de aliniere: Flex-Start, ceea ce înseamnă că elementele sunt aliniate la începutul axei încrucișate. Am vizat primul element utilizând un selector de prim copil și se stabilește acel element la aliniere: întindere; Un alt element a fost selectat folosind clasa sa de a alinia de sine selectată și dată: centru. Puteți schimba valoarea de aliniere sau puteți schimba valorile de aliniere pe elementele individuale pentru a vedea cum funcționează acest lucru.

Schimbarea axei principale

Până acum ne-am uitat la comportament atunci când direcția noastră flexibilă este rând și în timp ce lucram într-o limbă scrisă de sus în jos. Aceasta înseamnă că axa principală se desfășoară de-a lungul rândului orizontal, iar alinierea noastră axei noastre se mișcă în sus și în jos.

Dacă ne schimbăm direcția flexibilă în coloană, aliniați-elemente și alinierea se vor alinia elementele spre stânga și la dreapta.

Puteți încerca acest lucru în exemplul de mai jos, care are un recipient Flex cu o coloană Flex-Direcție: dar altfel este exact același cu exemplul anterior.

Alinierea conținutului pe axa încrucișată - proprietatea de a alinia

Până în prezent am aliniat elementele sau un element individual în interiorul zonei definite de Flex-container. Dacă aveți un recipient flexibil înfășurat înfășurat, atunci ar putea dori, de asemenea, să controlați distribuția spațiului între rânduri. În descriere, acest lucru este descris ca linii flexibile de ambalare.

Pentru a alinia-conținut pentru a lucra, aveți nevoie de mai multă înălțime în recipientul dvs. Flex decât este necesar pentru a afișa ITIM-urile. Elemente ca un set și dictează ceea ce fericirea cu acel spațiu liber și alinierea întregului set de elemente din el.

Proprietatea de conținut alin-conținut ia următoarele valori:

align-Content: Flex-Start
align-Content: Flex-end
aliniere-conținut: centru
aliniere-conținut: spațiu-între
aliniere-conținut: spațiu-în jur
align-Content: Stretch
aliniere-conținut: spațiu-uniform (nu este definit în specificația FlexBox)

În exemplul live de mai jos, recipientul Flex are o înălțime de 400 de pixeli, ceea ce este mai mult decât necesar pentru a afișa articolele noastre. Valoarea conținutului de aliniere este spațiu-între, ceea ce înseamnă că spațiul disponibil este împărțit Între. Liniile Flex, care sunt plasate în același timp cu începutul și capătul recipientului de pe axa încrucișată.

Încercați celelalte valori pentru a vedea cum funcționează proprietatea de conținut alin-conținut.

Încă o dată ne putem schimba în coloana Flex-Direcție în coloană pentru a vedea cum se comportă această proprietate când lucrăm pe coloană. Ca și înainte, avem nevoie de spațiu suficient în axa încrucișată pentru a avea un spațiu liber după afișarea tuturor ITM-urilor.

Notă.: Valoarea spațiu-uniform nu este definită în specificația FlexBox și este o adăugare ulterioară la specificația de aliniere a casetei. Suportul browserului pentru această valoare nu este la fel de bun ca cel al valorilor definite în Spectrul FlexBox.

CSS3-Flexbox. - Aceasta este o tehnologie specială care a fost introdusă în ultima versiune a stilurilor cascade, care vă permite să setați ochiul flexibil al locației blocurilor din interiorul unui container părinte.

Ce caracteristici au oferit această plasă:

abilitatea de a controla structura coloanei a cadrului principal HTML-Clash;
gestionați orientarea aranjamentului etichetelor HTML ca un aspect de masă;
ordinea de control;
și multe altele.

Tehnologia CSS-FlexBox se află pe blocurile de bază din vecinătatea relativă și axele verticale conform următoarei scheme:

Navigare

Oferim o listă de browsere web care susțin proprietatea considerată a blocurilor ca standard și utilizând proiecte speciale:

Adică: 11.0, 10.0 -M-
Firefox: 28,0, 18,0 -Moz-
Crom: 29.0, 21.0 -Webkit-
Safari: 6.1 -Webkit-
Operă: 12.1 -Webkit.
Safari (sub mac): 7.0 -Webkit-
Opera mini: 8
Browser Anroyd: 4.4, 4.1 -Webkit-
Chrome (sub Android): 44

1.1. Afișați proprietatea: Flex

Regula CSS este destinată să construiască o rețea Flexbox, care este construită din filiale de etichete HTML situate în interiorul unui container părinte. Pentru a specifica această rețea, trebuie să setați regula afișajului la valoarea:

afișaj: Flex; - pentru afișarea blocului;
afișaj: Inline-Flex; - pentru afișarea inline.

Trebuie remarcat faptul că, pentru unele versiuni ale browserelor, este necesar să se prescrie această regulă utilizând proiecte speciale (a se vedea paragraful de mai sus), precum și faptul că etichetele HTML situate într-un părinte fără ambalaj sunt considerate anonime:

1.2. Alinierea orizontală justifică-conținut

Regula este utilizată pentru alinierea filialelor orizontale în interiorul containerului părinte Flexbox. Această regulă nu este moștenită.

justificați-conținutul
Valori:
Flex-start.	Linii de pe marginea din stânga. Valoare implicită
Flex-end.	Linii de pe marginea din dreapta.
Centru	Linii în mijloc.
Spațiu-între.	În întreaga lățime a părintelui pe segmentul de echilibru. Este demn de remarcat faptul că primul element vine până la marginea stângă fără goluri, dar luând în considerare și ultimul, dar la marginea dreaptă. Toate celelalte elemente bloc sunt plasate între prima și ultima prin aceleași segmente ale goliciunii.
Spațiu-în jur.	Pe toată lățimea, astfel încât între două blocuri va fi aceeași liniuță și jumătate din margine.
iniţială	Setarea valorii implicite.
moşteni.

Formatul de înregistrare

B-Podlogka (înălțime: 120px; fundal-culoare: #ddd; margine: 0px; Padding: 10px; Afișaj: Flex; Afișaj: -Webit-Flex; Justify-Content: Flex-Start; -Webkit-Justify-Content: Flex -start;)

B-Podlogka (Justiune-Conținut: Flex-end;)

B-Podlogka (Justiune-Conținut: Centrul;)

B-podlogka (justificați-conținut: spațiu-între;)

B-podlogka (justificați conținutul: spațiu-în jur;)

1.3 Alinierea elementelor aliniere verticale

Proprietatea este utilizată pentru a alinia obiecte pe verticală a copilului în interiorul containerului părinte Flexbox. Trebuie remarcat faptul că obiectele flexibile anonime se încadrează, de asemenea, sub această aliniere. Această regulă nu este moștenită. Numai primele blocuri de șir sunt aliniate.

aliniați-elemente.
Valori:
Întinde.	Blocurile flexibile, dacă nu sunt fixe, înălțimea este trasă la întreaga înălțime a containerului părinte. Este parametrul inițial (de bază).
Flex-start.	Acesta este destinat alinierea elementelor flexibile de-a lungul marginii superioare a containerului părinte, luând în considerare liniile interne (padding).
Flex-end.	Acesta este destinat alinierea elementelor flexibile de-a lungul marginii inferioare a containerului-mamă, luând în considerare liniile interne (padding).
Centru	Aliniază blocurile flexibile pentru copii în interiorul unui recipient flexibil în linia de mijloc a celui mai mare bloc.
De bază	ALiniază blocurile flexibile ale copilului în interiorul părintelui în raport cu linia de mijloc a textului din aceste blocuri.
iniţială
moşteni.	Acesta este destinat interpretului mesajului CSS că valoarea trebuie luată de la eticheta-mamă.

Formatul de înregistrare

B-podlogka (elemente aliniere: stretch; -webkit-elemente: stretch;)

Trebuie remarcat faptul că blocurile flexibile copilului se întind la întreaga înălțime a recipientului, este necesar ca ei să nu aibă o înălțime fixă \u200b\u200ba acestora: Înălțime: Auto; .

B-Podlogka (Alins-elemente: Flex-start;)

B-Podlogka (articole aliniere: flex-capăt;)

B-podlogka (elemente aliniere: centru;)

B-Podlogka (elemente aliniere: linia de bază;)

1.4. Orientarea direcției flexibile a axei principale

Se utilizează pentru a specifica orientarea (orientarea) a următoarelor blocuri Flex unul pentru celălalt. În conformitate cu standardele stabilite, orientarea poate fi de două tipuri: vertical (în coloană, în mod implicit?) Și orizontal (în șir, în mod implicit?).

Formatul de înregistrare

B-Podlogka (Direcția Flex: rând; -webit-flex-direcție: rând;)

B-Podlogka (Direcția Flex: Row-Reverse;)

B-Podlogka (Flex-Direct: Coloană;)

B-Podlogka (Direcția Flex: coloană-inversă;)

1.5. Cazare în mai multe rânduri Flex-wrap

Responsabil pentru plasarea blocurilor flexibile pentru copii într-una sau mai multe linii.

flex-wrap.
Valori:
Nowrap.	În starea inițială, toate articolele copilului sunt situate într-o singură linie (? Sau? În funcție de orientarea textului selectat).
Înfășurați.	Când specificați un astfel de parametru, elementele copilului vor lua mai multe rânduri în funcție de lățimea părintelui (sau? În funcție de orientarea textului selectat).
Înfășurați înapoi.	Atunci când se precizează un astfel de parametru, filialele vor ocupa mai multe rânduri, în funcție de lățimea părintelui, având în același timp o ordine alternativă de inversare.
iniţială	Acesta va fi găsit în valoarea inițială.
moşteni.	Acesta este destinat interpretului mesajului CSS că valoarea trebuie luată de la eticheta-mamă.

Formatul de înregistrare

B-Podlogka (Flex-Wrap: Wrap; -Webkit-Flex-Wrap: Wrap;)

B-podlogka (flex-folie: înfășurată;)

1.6. Directivitate și multi-stream o regulă Flex-flux

Această regulă este utilizată ca înregistrare mai compactă a celor două reguli anterioare pentru a optimiza codul.

Formatul de înregistrare

B-Podlogka (Flex-Flow: Wrap Row; -Webkit-Flex-Flow: Wrap Row;)

1.7. Aliniați vertical în toate liniile de a alinia

Aceste TSS este o regulă este utilizată pentru a alinia blocurile Flex Flex Flex Intra-container Flex. Pentru a declanșa această regulă, este necesar ca recipientul-părinte să fie setat: înălțime și flux flexibil. Nu este moștenit.

aliniere-conținutul.
Valori:
Întinde.	Întinzându-se elementele pe întreaga înălțime a containerului părinte (blocurile Flex nu trebuie înregistrate înălțime).
Flex-start.	Linii deasupra.
Flex-end.	Pleacă în jos.
Centru	Linii verticale în centru.
Spațiu-între.	Se aliniază vertical elementele intra-plate astfel încât prima linie de blocuri să fie presată în sus, aceasta din urmă este o carte, iar spațiul dintre restul este distribuit uniform.
Spațiu-în jur.	Aliniază vertical elementele intra-plate în așa fel încât distanța de la început, la capăt și între ele sunt egale unul cu celălalt.
iniţială	Acesta va fi găsit în valoarea inițială.
moşteni.	Opțiunea de interpret a mesajului CSS, care trebuie luată de la eticheta părintească.

Cod simplu

B-Podlogka (înălțime: 120px; Flex-Flow: înfășurarea rândului; Conținutul de aliniere: întindere;)

B-podlogka (aliniere-conținut: Flex-start;)

B-podlogka (aliniere-conținut: flex-capăt;)

B-Podlogka (aliniere-conținut: centru;)

B-podlogka (aliniere-conținut: spațiu-între;)

B-podlogka (aliniere-conținut: spațiu-înot;)

În plus față de regulile utilizate în legătură cu un părinte de container, există mai multe reguli aplicate elementelor fiice din grila Flexbox. Luați în considerare în detaliu.

2.1. Comandarea blocurilor de ordine

Regula TSS este utilizată pentru a organiza un element subsidiar în interiorul părintelui Flex-Parent. Pentru a seta blocul ca fiind primul, este necesar să se indice 1 și să o mutați la sfârșitul lui -1. Nu este moștenit.

Formatul de înregistrare

B-div1 (-webkit-comandă: 1; ordinea: 1;)

B-div5 (-webit-comandă: -1; ordine: -1;)

2.2. Flex-bază flex-bază bază

Regula CSS concepută pentru a fixa lățimea unui bloc flexibil subsidiar în interiorul containerului-mamă. Setați pentru doi sub parametrii subiacenți. Nu este o regulă moștenită.

Cod simplu

B-div3 (flex-bază: 70px; -Webkit-flex-bază: 70px;)

Toate blocurile stabilesc o bază în valoare de cincizeci de pixeli, iar al treilea - nouăzeci de pixeli.

Proprietatea de conținut alin-conținut stabilește tipul de aliniere a rândurilor în interiorul recipientului Flex în axa transversală în prezența spațiului liber.

Se aplică: Container Flex.

Valoare implicită: Stretch.

Rândurile Flex-Start sunt situate la începutul axei transversale. Fiecare linie următoare trece cu cea anterioară. Rândurile flex-end sunt amplasate începând de la capătul axei transversale. Fiecare linie anterioară merge la următorul. Rândurile centrale sunt situate în centrul recipientului. Spațiul-între rânduri sunt distribuite uniform în recipient, iar distanța dintre ele este în mod egal. Spațiu-în jurul rândurilor sunt distribuite uniform, astfel încât spațiul dintre cele două rânduri adiacente să fie același. Spațiul gol în fața primului șir și după ultimul rând egal cu jumătate din spațiul dintre cele două rânduri adiacente. Space-rândurile uniform sunt distribuite uniform. Spațiul gol înainte de prima linie și după ultima linie are aceeași lățime ca și alte linii. Stringurile întinse sunt în mod egal întinse, umplând spațiu liber.

Proprietatea de aliniere a conținutului aliniază o liniile de container Flex în liniile containerului Flex din spațiul Flex din axa încrucișată, similar cu modul în care conținutul justificat aliniază elemente individuale în cadrul axei principale. Notă, această proprietate nu are efect asupra unui container flexibil cu o singură linie. Valorile au următoarele semnificații:

Notă: Numai containerele flexibile multi-line au vreodată spațiu liber în axa încrucișată pentru linii care urmează să fie aliniate, deoarece într-un container cu o singură linie, singura linie se întinde automat pentru a umple spațiul.

Se aplică la.: Containere flexibile.

Iniţială: Stretch.

Liniile de pornire flexibile sunt ambalate spre începutul recipientului Flex. Marginea de pornire încrucișată a primei linii din recipientul Flex este plasată în același timp cu marginea de pornire încrucișată a recipientului Flex și fiecare linie ulterioară este plasată în același timp cu linia precedentă. Liniile flex-end sunt ambalate spre capătul recipientului Flex. Marginea transversală a marginii transversale a recipientului Flex și fiecare linie de presare este plasată la același nivel cu linia ulterioară. Liniile centrale sunt ambalate spre centrul containerului Flex. Liniile din recipientul Flex sunt plasate în același timp și aliniate în centrul flexului între marginea conținutului de pornire încrucișată a recipientului Flex și linia de pumn în recipientul Flex și între marginea conținutului transversal al flexiei Container și ultima linie din recipientul Flex. (Dacă spațiul liber rămas este negativ, liniile vor depăși în mod egal în ambele direcții.) Spațiul-între liniile sunt distribuite uniform în recipientul Flex. Dacă spațiul liber stânga este negativ, această valoare este identică cu Flex-Start. În caz contrar, marginea de pornire încrucișată a primei linii din marginea conținutului de pornire încrucișată a marginii conținutului de pornire încrucișată a containerului Flex, marginea transversală a ultimei linii din recipientul Flex este plasată în același timp cu capătul încrucișat Marginea de conținut a recipientului Flex și liniile rămase din recipientul Flex sunt distribuite astfel încât distanța dintre cele două linii adiacente să fie aceeași. Spațiu-în jurul liniilor sunt distribuite uniform în recipientul Flex, cu spații de jumătate de dimensiune la fiecare capăt. Dacă spațiul liber de stânga este negativ, această valoare este identică cu centrul. În caz contrar, liniile din recipientul Flex sunt distribuite astfel încât distanța dintre cele două linii adiacente este aceeași, iar distanța dintre pumnul / ultimele linii și marginile containerelor Flex este de jumătate din dimensiunea distanței dintre liniile Flex. Linii spațiale-uniform sunt distribuite uniform în recipientul Flex. Dacă spațiul liber de stânga este negativ, această valoare este identică cu centrul. În caz contrar, liniile din recipientul Flex sunt distribuite astfel încât distanța dintre fiecare linie Flex este aceeași. Liniile de întindere se întind pentru a prelua spațiul rămas. Dacă spațiul liber rămas este negativ, această valoare este identică cu Start-Start. În caz contrar, spațiul liber este împărțit în mod egal între toate liniile, sporind dimensiunea încrucișată.

Cum funcționează CSS FlexBox: Introducere vizuală în sistemul de aspect layout de pe pagina web

Flexbox este conceput pentru a ne salva de momentele neplăcute ale CSS Pure (de exemplu, de la alinierea verticală) și se confruntă perfect cu sarcina sa. Dar uneori este greu de înțeles principiile muncii sale uneori, mai ales dacă sunteți nou.

Sarcina principală a FlexBox este de a face straturi flexibile și de a lucra cu ele este intuitivă. Pentru a atinge acest obiectiv, permite containerelor să decidă cum să se ocupe de filialele lor, inclusiv schimbarea dimensiunii și distanței între ele.

Sună bine, dar să vedem dacă este netedă în practică. În acest articol vom studia cele 9 cele mai populare proprietăți ale Flexbox, ne vom ocupa de ceea ce fac și cum funcționează de fapt.

Afișaj: Flex.

Iată un exemplu al unei pagini:

Avem 4 divze multicolore de diferite dimensiuni care sunt în interiorul Grey Div. Fiecare div are un afișaj: blocați proprietatea. Prin urmare, fiecare pătrat ia întreaga lățime a liniei.

Pentru a începe să lucrați cu Flexbox, trebuie să facem recipientul Flex-container. Acest lucru se face astfel:

#Container (afișaj: flex;)

Se pare că nu este nimic schimbat în mod deosebit - Divs tocmai a intrat într-un rând. Dar ai făcut ceva cu adevărat puternic. Ți-ai dat pătratul o proprietate rece numită "Context Flex".

Direcția Flex.

Containerul Flex are două axe: axa principală și perpendiculară pe ea.

Implicit, toate elementele sunt amplasate de-a lungul axei principale: de la stânga la dreapta. Prin urmare, pătratele noastre s-au îndreptat într-o linie când am aplicat afișarea: Flex. Cu toate acestea, direcția flexibilă vă permite să rotiți axa principală.

#Container (afișaj: flex, flex-direcție: coloană;)

Este important să rețineți că o direcție flexică: coloana nu se află pătrate de-a lungul axei perpendiculare pe cea principală. Axa principală își schimbă locația și este îndreptată acum de sus în jos.

Există, de asemenea, câteva proprietăți pentru direcția Flex: row-inversă și invers.

Justificați conținutul

Justificarea conținutului este responsabil pentru alinierea elementelor de pe axa principală.

Să revenim la direcția Flex: rând.

#Container (Afișaj: Flex, Direcție Flex: rând, justificați-conținutul: Flex-Start;)

Justificarea conținutului poate lua 5 valori:

flex-start;
flex-end;
centru;
spațiu-între;
spațiu-în jur.

Spațiu-între stabilește aceeași distanță între pătrate, dar nu între recipient și pătrate. Spațiul-în jurul valorii de, de asemenea, stabilește aceeași distanță între pătrate, dar acum distanța dintre recipiente și pătrate este de jumătate din distanța dintre pătrate.

Aliniați elementele.

Dacă justificați conținutul funcționează cu axa principală, elementele de aliniere funcționează cu axa perpendiculară pe axa principală.

Să ne întoarcem la direcția Flex: rând și să trecem prin comenzile de aliniere:

flex-start;
flex-end;
centru;
Întinde;
de bază.

Este demn de remarcat faptul că pentru elementele de aliniere: întinderea înălțimii pătratelor trebuie să fie egală cu Auto. Pentru aliniere: etichetele paragrafului de bază nu trebuie să fie eliminate, altfel se pare că:

Pentru a afla mai bine munca axei, hai să ne unim justificați-conținut cu elemente de aliniere și să vedem cum funcționează alinierea centrului pentru două proprietăți de direcție Flex:

Aliniați sinele.

Align-sine vă permite să aliniați elementele separat.

#Container (elemente aliniere: flex-start;) .Square # unul (aliniere-sine: centru;) // Numai acest pătrat va fi centrat.

Să aplicăm aliniere-sine pentru două pătrate, iar pentru ceilalți aplicăm articole aliniere: centru și direcția flexică: rând.

Baza flexibilă.

Baza flexibilă este responsabilă pentru dimensiunea inițială a elementelor înainte de a fi modificate de alte proprietăți FlexBox:

Baza flexibilă afectează dimensiunea elementelor de-a lungul axei principale.

Să vedem ce se întâmplă dacă schimbăm direcția axei principale:

Rețineți că a trebuit să schimbăm înălțimea elementelor. Baza flexibilă poate defini atât înălțimea elementelor, cât și lățimea lor în funcție de direcția axei.

Flex cresc.

Această proprietate este puțin mai complicată.

Pentru a începe cu, hai să ne întrebăm pătratele la aceeași lățime de 120px:

În mod implicit, valoarea flex-ului este 0. Aceasta înseamnă că pătratele sunt interzise să crească (țin locul rămas în recipient).

Să încercăm să stabilim Flex-cresc egal cu 1 pentru fiecare pătrat:

Pătratele au ocupat locul rămas în recipient. Valoarea Flex-group anulează valoarea lățimii.

Dar există o întrebare aici: Ce înseamnă Flex-crescă: 1 înseamnă?

Să încercăm să stabilim Flex-cresc la 999:

Și ... Nimic nu sa întâmplat. Sa întâmplat deoarece Flex-Grow acceptă valori absolute, ci relativă.

Aceasta înseamnă că nu contează ce valoare de la Flex-cresc este importantă ceea ce este în legătură cu alte pătrate:

La început, Flex-Grow Fiecare pătrat este 1, în cantitatea pe care o dezactivează 6. Deci, recipientul nostru este împărțit în 6 părți. Fiecare pătrat va dura 1/6 parte din spațiul disponibil în recipient.

Când creșterea flexibilă a celui de-al treilea pătrat devine 2, recipientul este împărțit în 7 părți (1 + 1 + 2 + 1 + 1 + 1).

Acum, cel de-al treilea pătrat ocupă 2/7 spații, restul - 1/7.

Merită să ne amintim că Flex-Grow funcționează numai pentru axa principală (până când ne schimbăm direcția).

Flex subțire

Flex-Shrink - opus direct al creșterii flexibile. Acesta determină modul în care pătratul poate fi redus în dimensiune.

Se utilizează flex-contracție atunci când elementele nu se încadrează în recipient.

Determinați care elemente ar trebui să scadă în dimensiune și care nu este. În mod implicit, valoarea Flex-Shrink pentru fiecare pătrat este 1. Aceasta înseamnă că pătratele se vor micsora atunci când recipientul va scădea.

Lăsați flex-cresc și flex-microfon egal cu 1:

Acum, să schimbăm valoarea lui Flex-Shrink pentru un al treilea pătrat la 0. A fost interzis să se micsoreze, astfel încât lățimea sa va rămâne egală cu 120px:

Merită să ne amintim că Flex-Shrink se bazează pe proporții. Asta este, dacă pătratul Flex-Shrink este de 6, iar restul este de 2, atunci acest lucru înseamnă că piața noastră va fi strânsă de trei ori mai repede decât alții.

Contracta

Flex înlocuiește Flex-crescă, flex-subțire și flex-bază.

Valorile implicite: 0 (cresc) 1 (psihic) și auto (bază).

Creați două pătrate:

Pătrat # unul (flex: 2 1 300px;) .square # două (flex: 1 2 300px;)

Ambele pătrate au același flexibil. Aceasta înseamnă că ambele vor fi lățimea în 300px (lățimea containerului: 600px plus marjă și umplutură).

Dar atunci când recipientul începe să crească în dimensiune, primul pătrat (cu un mare flex-crescătorie) va crește de două ori mai rapid, iar al doilea pătrat (cu cel mai mare flex-contracție) va fi comprimat de două ori mai rapid.

Cum lucrurile cresc și se micșorează

Când crește primul pătrat, nu primește de două ori mai mult decât al doilea pătrat, iar când cel de-al doilea pătrat scade, nu primește de două ori mai puțin decât primul. Acest lucru se datorează faptului că Flex-Grow și Flex-Shrink sunt responsabile pentru rata de creștere și reducerea.

O mică matematică

Dimensiunea inițială a containerului: 640px. Lăsați-o pe 20px pe fiecare parte pentru căptușeală și vom avea 600px, doar pentru două pătrate.

Când lățimea recipientului devine egală cu 430px (pierdere în 210px), primul pătrat (flex-contracție: 1) pierde 70px. Cel de-al doilea pătrat (flex-contracție: 2) pierde 140px.

Când recipientul este comprimat la 340px, pierdem 300px. Primul pătrat pierde 100px, al doilea - 200px.

Același lucru se întâmplă cu creșterea flexibilă.

CSS Flexbox. (Modul flexibil al layout-ului casetei) - modulul layout-ului flexibil al containerului este o metodă de elemente de așezare, bazată pe axa este bazată pe.

FlexBox este alcătuită din afară flex container (Flex Container) și elemente flexibile (elemente flexibile). Elementele flexibile pot fi construite în șir sau coloană, iar spațiul liber rămas este distribuit între ele în diferite moduri.

Modulul FlexBox vă permite să rezolvați următoarele sarcini:

Plasați elemente în una din cele patru direcții: de la stânga la dreapta, dreapta stânga, sus în jos sau de jos în sus.
Suprascrie procedura pentru afișarea elementelor.
Determină automat dimensiunile elementelor astfel încât să se potrivească în spațiul accesibil.
Rezolvați problema cu centrele orizontale și verticale.
Transferați elementele din interiorul recipientului fără a permite depășirea acestuia.
Creați coloane de aceeași înălțime.
Creați apăsat în partea de jos a paginii.

FlexBox rezolvă sarcini specifice - crearea unor dispozitive unidimensionale, de exemplu, panoul de navigație, deoarece elementele Flex pot fi plasate numai pe unul dintre axe.

Lista problemelor actuale ale modulului și soluțiilor transfrontaliere pentru ele puteți citi în articolul Philip Walton.

Ce este FlexBox.

Sprijiniți browserele

Adică: 11.0, 10.0 -M-
Firefox: 28,0, 18,0 -Moz-
Crom: 29.0, 21.0 -Webkit-
Safari: 6.1 -Webkit-
Operă: 12.1 -Webkit.
iOS Safari: 7.0 -Webkit-
Opera mini: 8
Android Browser: 4.4, 4.1 -Webkit-
Chrome pentru Android: 44

1. Concepte de bază

Smochin. 1. Modelul FlexBox

Pentru a descrie modulul FlexBox, se utilizează un anumit set de termeni. Valoarea Flex-Flow și modul de înregistrare determină corespondența acestor termeni la direcțiile fizice: partea de sus / dreapta / jos / stânga, axe: verticală / orizontală și dimensiune: lățime / înălțime.

Axa principală - Axa de-a lungul căreia sunt stabilite elementele Flex. Se extinde în principal măsurarea.

Start principal și capătul principal - linii care definesc partea inițială și finală a containerului Flex, în raport cu care sunt stabilite elementele Flex (începând cu pornirea principală spre capătul principal).

Dimensiunea principală) - lățimea sau înălțimea containerului Flex sau a elementelor flexibile, în funcție de faptul că acestea sunt măsurate în principal, determină dimensiunea principală a recipientului Flex sau a elementului Flex.

Axa încrucișată. - Axa perpendiculară pe axa principală. Se extinde în dimensiunea transversală.

Cross Start și Cross capăt - Liniile care definesc partea inițială și cea finală a axei transversale față de care sunt stabilite elementele Flex.

Cruce) - Lățimea sau înălțimea elementelor flex-container sau flexibile, în funcție de ceea ce este în dimensiunea transversală, sunt dimensiunea lor transversală.

Smochin. 2. Modul de rând și coloana

2. Flex-container

Flex Container stabilește un nou context flexibil de formatare pentru conținutul său. Containerul Flex nu este un recipient bloc, prin urmare, astfel de proprietăți CSS, cum ar fi float, limpede, vertical-align nu funcționează pentru elementele copilului. De asemenea, recipientul Flex nu afectează proprietățile coloanei *, creând difuzoare în text și Pseudo-elemente :: First-Line și :: prima scrisoare.

Modelul MARKUP FLEXBOX este asociat cu o anumită valoare a proprietății CSS a afișării elementului HTML părinte care conține blocuri sub-electorale din interiorul în sine. Pentru a controla elementele utilizând acest model, trebuie să setați proprietatea afișată după cum urmează:

Flex-container (/ * generează un bloc Flex-container * / Afișaj: -Webkit-Flex; Afișaj: flex;) .flex-container (/ * generează un nivel de șir flex-container * / Afișaj: -Webkit-Inline-Flex ; Afișaj: Inline-Flex;)

După instalarea acestor valori de proprietăți, fiecare element copil devine automat un element Flex, setând într-un rând (de-a lungul axei principale). În acest caz, elementele de blocare și litere mici se comportă în mod egal, adică. Lățimea blocurilor este egală cu lățimea conținutului lor, luând în considerare câmpurile interioare și cadre ale elementului.

Smochin. 3. Elemente de aliniere în modelul FlexBox

Dacă blocul părinte conține text sau imagini fără ambalaje, ele devin elemente anonime de flexie. Textul este de nivelare peste marginea superioară a blocului de containere, iar înălțimea imaginii devine egală cu înălțimea blocului, adică. Este deformat.

3. Elemente flexibile

Elemente flexibile - Blocuri reprezentând conținutul recipientului Flex în flux. Containerul Flex stabilește un nou context de formatare pentru conținutul său, ceea ce determină următoarele caracteristici:

Pentru elementele Flex, valoarea lor a proprietății afișajului este blocată. Valoarea afișajului: blocul inline; și afișați: celulă de masă; calculat în afișaj: bloc; .
Spațiul gol între elemente dispare: nu devine propriul element flexibil, chiar dacă textul inter-element este înfășurat într-un element de flexic anonim. Pentru conținutul unui element flexic anonim, este imposibil să setați propriile stiluri, dar le va moșteni (de exemplu, parametrii fontului) de la recipientul Flex.
Elementul Flex absolut poziționat nu participă la aspectul layout.
Câmpurile de marjă, elementele flexibile adiacente nu sunt prăbușite.
Valorile procentuale ale marginii și umplerii sunt calculate din dimensiunea internă a blocului care le conține.
marja: Auto; Se extinde, absorbind un spațiu suplimentar în măsurarea corespunzătoare. Ele pot fi folosite pentru a se alinia sau răspândi elemente flexibile adiacente.
Dimensiunea minimă automată a elementelor flexibile în mod implicit este dimensiunea minimă a conținutului său, adică min-lățime: Auto; . Pentru derularea containerelor, dimensiunea minimă automată este de obicei zero.

4. Elemente flexibile și orientare

Conținutul containerului Flex poate fi descompus în orice direcție și în orice ordine (reordonarea elementelor flexibile din interiorul recipientului afectează numai redarea vizuală).

4.1. Direcția axei principale: Direcția Flex

Proprietatea aparține containerului Flex. Gestionează direcția axei principale, de-a lungul căreia elementele Flex sunt stivuite, în conformitate cu modul curent de înregistrare. Nu este moștenit.

direcție flexibilă.
Valori:
Rând	Valoarea implicită de la stânga la dreapta (în RTL la stânga dreapta). Elementele flexibile sunt așezate în șir. Începutul (pornirea principală) și direcțiile de capăt (principalele) ale axei principale corespund începutului (inline-start) și un capăt (inline-capăt) axei inline (axa inline).
Row-Reverse.	Direcția spre stânga stânga (în RTL la stânga la dreapta). Elementele flexibile sunt așezate în șirul față de marginea dreaptă a recipientului (în stânga RTL).
coloană.	Direcția de sus în jos. Elementele Flex sunt stabilite în coloană.
Coloana-invers.	Coloană cu elemente în ordine inversă, de jos în sus.
iniţială
moşteni.

Smochin. 4. Proprietatea flexibilă pentru limbile stângi la dreapta

Sintaxă

Flex-container (Afișaj: -Webkit-Flex; -Webkit-Flex-Direcție: Row-Reverse; Afișaj: Flex; Flex-Direcție: Row-Reverse;)

4.2. Gestionarea containerului multi-flex: Flex-Wrap

Proprietatea determină dacă recipientul Flex va fi unic sau multi-linie și, de asemenea, stabilește direcția axei transversale, care determină direcția de a stabili noi linii de containere flexibile.

În mod implicit, elementele Flex sunt stivuite într-o singură linie de-a lungul axei principale. Când se scurge, vor depăși cadrul limită al recipientului Flex. Proprietatea nu este moștenită.

Smochin. 5. Gestionarea multi-stream utilizând proprietățile flex-wrap pentru LTR-limbi

Sintaxă

Flex-container (Afișaj: -Webkit-Flex; -Webkit-Flex-Wrap: Wrap; Afișaj: Flex; Flex-Wrap: Wrap;)

4.3. Rezumatul direcției și multiplay-ului: Flex-flux

Proprietatea vă permite să determinați instrucțiunile axelor principale și transversale, precum și posibilitatea de a transfera elemente flexibile dacă este necesar pentru mai multe linii. Este o înregistrare abreviată a proprietăților Flex-Direcție și Flex-Wrap. Valoarea implicită este Flex-Flow: rândul Nowrap; . Proprietatea nu este moștenită.

Sintaxă

Flex-container (Afișaj: -Webkit-Flex; -Webkit-Flex-Flow: Wrap Row; Afișaj: Flex, Flex-Flow: Înfășurator rând;)

4.4. Comandă de afișare a elementului Flex: comandă

Proprietatea determină ordinea în care elementele Flex sunt afișate și amplasate în interiorul recipientului Flex. Se aplică elementelor flexibile. Proprietatea nu este moștenită.

Inițial, toate elementele flexibile au ordine: 0; . Când specificați valoarea de la -1 pentru element, se mută la începutul timpului, valoarea 1 - până la capăt. Dacă mai multe elemente Flex au aceeași valoare a comenzii, acestea vor fi afișate în conformitate cu ordinea inițială.

Sintaxă

Flex-container (Afișaj: -Webkit-Flex; Afișaj: Flex;) .flex-element (-webkit-comandă: 1; Ordine: 1;)
Smochin. 6. Comandă de afișare cu elemente flexibile

5. Elemente flexibile flexibile

Aspectul determinant al unui aspect flexibil este abilitatea de a "îndoi" elementele flexibile, schimbarea lățimii / înălțimii lor (în funcție de dimensiunea pe axa principală) pentru a completa spațiul disponibil în dimensiunea principală. Acest lucru se face folosind proprietatea Flex. Containerul Flex distribuie spațiul liber între elementele copilului (proporțional cu coeficientul lor de creștere flexibilă) pentru a umple recipientul sau pentru a le comprima (proporțional cu coeficientul de contracție flexibilă) pentru a preveni scurgerea.

Elementul Flex va fi complet "inflexibil" dacă valorile sale Flex-Grow și Flex-Shrink sunt zero și altfel "flexibil".

5.1. Set de dimensiuni flexibile cu o proprietate: Flex

Proprietatea este o înregistrare abreviată a proprietăților Flex-crescătorie, flex-contracție și flexibilă. Valoare implicită: Flex: 0 1 Auto; . Puteți specifica atât una cât și toate cele trei proprietăți. Proprietatea nu este moștenită.

Sintaxă

Flex-container (Afișaj: -Webkit-Flex; Afișaj: Flex;) .flex-element (-Webkit-Flex: 3 1 100px; -m-flex: 3 1 100px; Flex: 3 1 100px;)

5.2. Coeficientul de creștere: creșterea flexibilă

Proprietatea determină coeficientul de creștere al unui element flexibil față de alte elemente flexibile din recipientul Flex în timpul distribuției spațiului liber pozitiv. Dacă suma valorilor elementelor flexibile Flex-Grow în șir este mai mică de 1, ei ocupă mai puțin de 100% din spațiul liber. Proprietatea nu este moștenită.

Smochin. 7. Gestionarea spațiului liber în panoul de navigare utilizând Flex-Grow

Sintaxă

Flex-container (Afișaj: -Webkit-Flex; Afișaj: Flex;) .flex-element (-webit-flex-crescă: 3; Flex-crescă: 3;)

5.3. Raportul de compresie: Flex-Shrink

Proprietatea indică coeficientul de compresie al elementului Flex față de alte elemente flexibile în timpul distribuției spațiului liber negativ. Se înmulțește cu dimensiunea de bază a bazei flexibile. Spațiul negativ este distribuit proporțional cu cât de mult poate fi prins elementul, de exemplu, un mic element Flex nu va scădea la zero până când elementul Flex al mărimii mai mari este redus considerabil. Proprietatea nu este moștenită.

Smochin. 8. Ridicarea elementelor flexibile în șir

Sintaxă

Flex-container (Afișaj: -Webkit-Flex; Afișaj: Flex;) .flex-element (-webkit-flex-contracție: 3; flex-contracție: 3;)

5.4. Dimensiune de bază: flex-bază

Proprietatea stabilește dimensiunea principală inițială a elementului Flex înainte de distribuirea spațiului liber în conformitate cu coeficienții de flexibilitate. Pentru toate valorile, cu excepția Auto și a conținutului, dimensiunea flexibilă de bază este definită, precum și lățimea în modurile de înregistrare orizontală. Valorile procentuale sunt determinate în raport cu dimensiunea recipientului Flex și, dacă dimensiunea nu este specificată, valoarea utilizată pentru flexibilă este dimensiunea conținutului său. Nu este moștenit.

Sintaxă

Flex-container (Afișaj: -Webkit-Flex; Afișaj: flex;) .flex-element (-webit-flex-bază: 100px; flex-bază: 100px;)

6. Aliniere

6.1. Alinierea pe axa principală: justificați-conținutul

Proprietatea aliniază elementele flexibile de-a lungul axei principale a recipientului Flex, distribuind spațiul liber, neocupat de elemente Flex. Când elementul este convertit într-un recipient Flex, elementele implicite Flex sunt grupate împreună (dacă câmpul de margine nu este specificat). Se adaugă lacunele după calcularea valorilor marjei și creșterii flexibile. Dacă eventualele elemente au o valoare non-zero de Flex-Grow sau Margin: Auto; Proprietatea nu va avea nicio influență. Proprietatea nu este moștenită.


Valori:
Flex-start.	Valoarea implicită. Elementele flexibile sunt așezate în direcția venind de la linia inițială a recipientului Flex.
Flex-end.	Elementele flexibile sunt stabilite în direcția venită de la linia finală a recipientului Flex.
Centru	Elementele Flex sunt aliniate în centrul recipientului Flex.
Spațiu-între.	Elementele flexibile sunt distribuite uniform pe linie. Primul element Flex este plasat pe marginea liniei inițiale, ultimul element Flex este de a spăla cu marginea liniei finale, iar elementele Flex rămase de pe linie sunt distribuite astfel încât distanța dintre cele două elemente adiacente aceeași. Dacă spațiul liber rămas este negativ sau în șir, există un singur element Flex, această valoare este identică cu parametrul Flex-Start.
Spațiu-în jur.	Elementele flexibile pe linii sunt distribuite astfel încât distanța dintre cele două elemente flexibile adiacente să fie aceeași, iar distanța dintre primele / ultimele elemente flexibile și marginile containerului Flex au variat de la distanța dintre elementele Flex.
iniţială	Setează valoarea imobilului implicit.
moşteni.	Moștenește valoarea proprietății de la elementul-mamă.

Smochin. 9. Alinierea elementelor și distribuția spațiului liber utilizând proprietățile de conținut justificate

Sintaxă

Flex-container (Afișaj: -Webkit-Flex; -Webkit-Justify-Content: Flex-Start; Afișaj: Flex; Justify-Conținut: Flex-Start;)

6.2. Aliniați axa transversală: aliniați și aliniați-sine

Elementele Flex pot fi aliniate pe axa transversală a liniei curente a recipientului Flex. Align-elemente stabilește alinierea pentru toate elementele Flex-Container, inclusiv elemente flexibile anonime. Align-Self vă permite să înlocuiți această aliniere pentru elemente individuale flexibile. Dacă oricare dintre elementele transversale Flex este auto, align-sine nu are efect.

6.2.1. Aliniați-elemente.

Proprietatea aliniază elementele flexibile, inclusiv elemente flexibile anonime pe axa transversală. Nu este moștenit.


Valori:
Flex-start.
Flex-end.
Centru
De bază	Liniile de bază ale tuturor elementelor flexibile implicate în aliniere coincid.
Întinde.
iniţială	Setează valoarea imobilului implicit.
moşteni.	Moștenește valoarea proprietății de la elementul-mamă.

Smochin. 10. Alinierea elementelor într-un recipient vertical

Sintaxă

Flex-container (Afișaj: -Webkit-Flex; -Webkit-Align-elemente: Flex-Start; Afișaj: Flex; Align-elemente: Flex-start;)

6.2.2. Aliniați-sine.

Proprietatea este responsabilă pentru alinierea unui element flexibil separat în înălțimea recipientului Flex. Suprascrie alinierea specificată de elementele aliniere. Nu este moștenit.


Valori:
AUTO.	Valoarea implicită. Elementul Flex utilizează alinierea specificată în proprietatea de containere flexibilă de aliniere.
Flex-start.	Marginea superioară a elementului Flex este plasată îndeaproape cu linia Flex (sau la distanță, luând în considerare câmpurile de marjă specificate și cadrul de frontieră a elementului) trecând prin începerea axei transversale.
Flex-end.	Marginea inferioară a elementului Flex este plasată îndeaproape cu linia Flex (sau la distanță, luând în considerare câmpurile de marjă specificate și cadrul de frontieră a elementului) care trece prin capătul axei transversale.
Centru	Câmpurile elementului Flex sunt centrate pe axa transversală din linia Flex.
De bază	Elementul Flex este aliniat la linia de bază.
Întinde.	Dacă dimensiunea transversală a elementului Flex este calculată ca auto și nici una dintre valorile transversale ale marjei nu este egală cu Auto, elementul este întins. Valoarea implicită.
iniţială	Setează valoarea imobilului implicit.
moşteni.	Moștenește valoarea proprietății de la elementul-mamă.

Smochin. 11. Alinierea elementelor flexibile individuale

Sintaxă

Flex-container (Afișaj: -Webkit-Flex; Afișaj: Flex;) .flex-element (-webkit-align-sine: centru; align-sine: centru;)

6.3. Linii de containere flexibile: aliniere-conținut

Proprietatea liniilor liniilor din recipientul Flex dacă există un spațiu suplimentar pe axa transversală, similar cu alinierea elementelor individuale de pe axa principală utilizând proprietatea de conținut justificată. Proprietatea nu afectează recipientul flexibil cu o singură linie. Nu este moștenit.


Valori:
Flex-start.	Rândurile sunt depozitate spre începutul recipientului Flex. Marginea primei linii este plasată aproape de marginea containerului Flex, fiecare ulterior - aproape de linia anterioară.
Flex-end.	Rândurile sunt așezate spre capătul containerului Flex. Marginea ultimului rând este plasată aproape de marginea containerului Flex, fiecare anterioară - aproape de rândul următor.
Centru	Rândurile sunt stocate spre centrul containerului Flex. Rândurile sunt situate aproape unul de celălalt și aliniate în centrul recipientului Flex cu o distanță egală între marginea inițială a conținutului recipientului Flex și primul șir și între marginea finală a conținutului recipientului Flex și ultimul șir.
Spațiu-între.	Rândurile sunt distribuite uniform în recipientul Flex. Dacă spațiul liber rămas este negativ sau recipientul Flex are o singură linie Flex, această valoare este identică cu Flex-Start. În caz contrar, marginea primei linii este amplasată aproape de marginea inițială a conținutului recipientului Flex, marginea ultimului rând este aproape de marginea finală a conținutului containerului Flex. Liniile rămase sunt distribuite astfel încât distanța dintre cele două rânduri adiacente să fie aceeași.
Spațiu-în jur.	Rândurile sunt distribuite uniform în recipientul Flex cu o jumătate de spațiu la ambele capete. Dacă spațiul liber rămas este negativ, această valoare este identică cu centrul central. În caz contrar, șirurile sunt distribuite astfel încât distanța dintre cele două rânduri adiacente să fie aceeași, iar distanța dintre primele / ultimele rânduri și marginile conținutului recipientului Flex a variat de la distanța dintre liniile.
Întinde.	Valoarea implicită. Rândurile elementelor flexibile sunt întinse uniform, completând tot spațiul disponibil. Dacă spațiul liber rămas este negativ, această valoare este identică cu Flex-Start. În caz contrar, spațiul liber va fi împărțit în mod egal între toate rândurile, creșterea dimensiunii transversale.
iniţială	Setează valoarea imobilului implicit.
moşteni.	Moștenește valoarea proprietății de la elementul-mamă.

Smochin. 12. Alinierea multi-line a elementelor flexibile

Sintaxă

Flex-container (Afișaj: -Webkit-Flex; -Webkit-Flex-Flow: înfășurare rând; -Webkit-alin-content: Flex-end; Afișaj: Flex; Flex-Flow: înfășurarea rândului; Align-Conținut: Flex-end ; Înălțime: 100px;)