Ce etichete să folosiți în html flexbox. Flexbox: un nou principiu al aspectului CSS

Conţinut:

Flexbox este o nouă modalitate de a aranja blocurile pe pagină. Aceasta este o tehnologie creată special pentru aranjarea elementelor, spre deosebire de flotoare. Prin utilizarea Flexbox Puteți alinia cu ușurință elementele pe orizontală și pe verticală, puteți schimba direcția și ordinea de afișare a elementelor, puteți întinde blocurile la înălțimea completă a părintelui sau le puteți fixa pe marginea de jos.

UPD din 02.02.2017: Am făcut o fișă de cheat sheet convenabilă pe Flexbox, cu demonstrații live și descrieri din specificații: Cheatsheet Flexbox.

Exemplele folosesc doar sintaxa nouă. În momentul scrierii, acestea sunt cel mai corect afișate în Crom. În Firefox funcționează parțial, în Safari nu funcționează deloc.

Potrivit caniuse.com, Flexbox nu este acceptat de IE 8 și 9 și Opera Mini, iar în alte browsere nu toate proprietățile sunt acceptate și/sau sunt necesare prefixe.

Aceasta înseamnă că tehnologia nu poate fi utilizată pe scară largă în acest moment, dar acum este momentul să o cunoaștem mai bine.

Mai întâi trebuie să știți că elementele flexibile sunt dispuse de-a lungul axelor. În mod implicit, elementele sunt aranjate orizontal - de-a lungul axa principală- axa principală.

De asemenea, trebuie reținut că atunci când utilizați Flexbox float , clear și vertical-align nu funcționează pentru blocurile interne, precum și pentru proprietățile care specifică coloane în text.

Să pregătim un teren de testare pentru experimente:

Un bloc părinte (galben) și 5 blocuri copii.

Display: flex

Și acum adăugăm display: flex la elementul părinte. . Div-urile interioare sunt aliniate (de-a lungul axei principale) cu coloane de aceeași înălțime, indiferent de conținut.

display: flex; Face ca toate elementele copil să fie flexibile, mai degrabă decât în ​​linie sau bazate pe blocuri, așa cum a fost cazul inițial.

Dacă un bloc părinte conține imagini sau text fără pachete, acestea devin elemente flexibile anonime.

Afișează proprietatea pentru Flexbox poate lua două sensuri:

flex - se comportă ca un element bloc. La calcularea lățimii blocurilor, aspectul are prioritate (dacă lățimea blocului este insuficientă, conținutul se poate extinde dincolo de limite).

inline-flex - se comportă ca un bloc inline. Conținutul are prioritate (conținutul întinde blocurile la lățimea necesară, astfel încât liniile, dacă este posibil, să se potrivească).

Flex-direcție

Direcția aspectului blocului este controlată de proprietatea flex-direction.

Valori posibile:

rând - rând (valoare implicită); row-reverse - un rând cu elemente în ordine inversă; coloană - coloană; column-reverse - o coloană cu elemente în ordine inversă.

rând și rând-invers

coloană și coloană-revers

Flex-wrap

Pot exista multe blocuri într-o singură linie. Dacă se înfășoară sau nu este determinat de proprietatea flex-wrap.

Valori posibile:

nowrap - blocurile nu sunt transferate (valoare implicită); wrap - blocurile sunt transferate; wrap-reverse - blocurile sunt împachetate și plasate în ordine inversă.

O prescurtare pentru proprietățile flex-direction și flex-wrap este proprietatea: flex-flow .

Valori posibile: puteți seta ambele proprietăți sau doar una. De exemplu:

flex-flow: coloană; flex-flow: wrap-reverse; flex-flow: coloană-reverse wrap;

Demo pentru înfășurare inversă rând-revers:

Ordin

Pentru a controla ordinea blocurilor, utilizați proprietatea order.

Valori posibile: numere. Pentru a pune blocul pe primul loc, da-i ordine: -1:

Justificare-conținut

Există mai multe proprietăți pentru alinierea elementelor: justify-content , align-items și align-self .

justify-content și align-items sunt aplicate containerului părinte, align-self este aplicat copiilor.

justify-content este responsabil pentru alinierea axei principale.

Valori posibile pentru justificare-conținut:

flex-start - elementele sunt aliniate de la începutul axei principale (valoare implicită); flex-end - elementele sunt aliniate de la capătul axei principale; centru - elementele sunt aliniate la centrul axei principale; spațiu-între - elementele sunt aliniate de-a lungul axei principale, repartizând spațiul liber între ele; space-around - elementele sunt aliniate de-a lungul axei principale, distribuind spațiul liber în jurul lor.

flex-start și flex-end

spațiu-între, spațiu-în jur

Alinierea elementelor

align-items este responsabil pentru alinierea de-a lungul axei perpendiculare.

Valori posibile ale elementelor de aliniere:

flex-start - elementele sunt aliniate de la începutul axei perpendiculare; flex-end - elementele sunt aliniate de la capătul axei perpendiculare; centru - elementele sunt aliniate în centru; linia de bază - elementele sunt aliniate de-a lungul liniei de bază; stretch - elementele sunt întinse, ocupând tot spațiul de-a lungul axei perpendiculare (valoare implicită).

flex-start , flex-end

linie de bază, întindere

Aliniați-vă

align-self este, de asemenea, responsabil pentru alinierea perpendiculară, dar este setat la elementele flexibile individuale.

Valori posibile pentru align-self:

auto este valoarea implicită. Indică faptul că elementul folosește elementele de aliniere ale elementului părinte; flex-start - elementul este aliniat de la începutul axei perpendiculare; flex-end - elementul este aliniat de la capătul axei perpendiculare; centru - elementul este aliniat în centru; linia de bază - elementul este aliniat de-a lungul liniei de bază; stretch - elementul este întins, ocupând întreg spațiul de înălțime.

Aliniere-conținut

Pentru a controla alinierea într-un container flexibil cu mai multe linii, există proprietatea align-content.

Valori posibile:

flex-start - elementele sunt aliniate de la începutul axei principale; flex-end - elementele sunt aliniate de la capătul axei principale; centru - elementele sunt aliniate la centrul axei principale; spațiu-între - elementele sunt aliniate de-a lungul axei principale, repartizând spațiul liber între ele; space-around - elementele sunt aliniate de-a lungul axei principale, distribuind spațiul liber în jurul lor; stretch - elementele sunt întinse pentru a umple întreaga înălțime (valoare implicită).

flex-start , flex-end

centru, întindere

spațiu-între, spațiu-în jur

Ps: Nu am reușit niciodată să văd unele lucruri în acțiune, de exemplu, linia flex-flow: column wrap sau intrarea completă a aceleiași flex-direction: column; flex-wrap: wrap; .

Elementele stau într-o coloană, dar nu sunt transferate:

wrap nu funcționează cu flex-direction: coloană; , deși în specificații arată așa:

Cred că va funcționa în timp.

UPD din 21.06.2014: totul funcționează dacă setați înălțimea blocului. Multumesc pentru sfat

Modulul Flexbox Layout (Flexible Box) își propune să ofere o modalitate mai eficientă de a poziționa, alinia și distribui spațiul liber între elementele dintr-un container, chiar și atunci când dimensiunea acestora este necunoscută în prealabil și/sau dinamic (de unde și cuvântul „flex”).

Ideea de bază a aspectului flexibil este de a oferi unui container capacitatea de a modifica lățimea/înălțimea (și ordinea) elementelor sale pentru a umple cel mai bine spațiul disponibil (practic pentru a se potrivi pe toate tipurile și dimensiunile de ecran). Un container Flexbox extinde elementele pentru a umple spațiul liber sau le micșorează pentru a evita debordarea.

Cel mai important, Flexbox este agnostic direcțional, spre deosebire de layout-urile convenționale (cutii bazate pe poziționarea verticală și elementele inline bazate pe poziționarea orizontală). Deși funcționează suficient de bine, le lipsește flexibilitatea de a suporta aplicații mari sau complexe (mai ales când vine vorba de schimbarea orientării, redimensionarea, întinderea, micșorarea etc.).

Notă. Flexbox este mai potrivit pentru componentele aplicației și layout-urile mici, în timp ce CSS Grid este proiectat pentru layout-uri mai mari.

Bazele și terminologia

Deoarece Flexbox este un modul întreg și nu o singură proprietate, conține o mulțime de lucruri diferite, inclusiv o mulțime de proprietăți. Unele dintre ele sunt menite să fie setate la containerul lor (elementul părinte, cunoscut sub numele de „container flexibil”), în timp ce altele sunt menite să fie setate la elemente copil (cunoscute ca „elementele flexibile”).

În timp ce un sistem convențional de aspect se bazează pe direcții de bloc și linie, Flexbox se bazează pe „direcții de flux flexibil”. Vă rugăm să aruncați o privire la acest grafic din specificație care explică ideea de bază a Flexbox.

Practic, elementele vor fi amplasate de-a lungul axa principală(de la începutul principal la sfârşitul principal) sau axul transversal(de la început la capăt).

Suport pentru browser

Modulul de aranjare a casetei flexibile CSS

Chrome pentru Android

Browserul Blackberry, începând cu versiunea 10, acceptă noua sintaxă.

Proprietăți pentru container

Proprietăți pentru elemente

Proprietăți pentru elementul părinte (container Flex)

afişa

Definește un container flexibil; șir sau bloc depinde de valoarea transmisă. Activează contextul flexibil pentru toate elementele sale secundare directe.

Container ( afișare: flex; /* sau inline-flex */ )

Vă rugăm să rețineți că coloanele CSS nu afectează containerul flexibil.

flex-direcție

Setează axa principală, determinând astfel direcția elementelor situate în container. Flexbox (pe lângă ambalajul său opțional) este un concept de aspect unidirecțional. Gândiți-vă la elementele flexibile în primul rând ca la rânduri orizontale sau coloane verticale.

Container (direcție flexibilă: rând | rând invers | coloană | coloană inversă; )

• rând (implicit)- de la stânga la dreapta în ltr ; de la dreapta la stânga în rtl;
• rând-invers- de la dreapta la stânga în ltr; de la stânga la dreapta în rtl;
• coloană- la fel ca și rândul, doar de sus în jos;
• coloană-invers- la fel ca rând-invers, doar de jos în sus;

flex-wrap

În mod implicit, articolele vor încerca să umple doar un rând. Puteți modifica acest comportament și permite elementelor să se încadreze la următoarea linie, dacă este necesar.

Container( flex-wrap: nowrap | wrap | wrap-reverse; )

• nowrap (implicit)- toate elementele flexibile vor fi amplasate pe o singură linie;
• înfășura- elementele flex vor fi amplasate pe mai multe linii, de sus in jos;
• înfășurare-invers- elementele flex vor fi amplasate pe mai multe linii, de jos in sus;

justifica-conținut

Definește alinierea de-a lungul axei majore. Acest lucru ajută la distribuirea spațiului liber rămas după ce toate articolele flexibile cu lățime fixă ​​și nefixă au atins dimensiunea maximă. De asemenea, ajută la asigurarea unui anumit control asupra alinierii elementelor atunci când depășesc o linie.

Container ( justificare-conținut: flex-start | flex-end | centru | spațiu-între | spațiu-în jur; )

• flex-start (implicit)- elementele sunt presate la începutul liniei;
• flex-end- elementele sunt presate până la capătul liniei;
• centru- elementele sunt situate central de-a lungul liniei;
• spațiu-între- elementele sunt asezate uniform pe linie; primul element este la începutul liniei, ultimul element este la sfârșitul liniei;
• spatiu-in jur- elementele sunt așezate uniform pe o linie cu spațiu egal lângă ele. Rețineți că vizual spațiul nu este egal, deoarece toate elementele au același spațiu pe ambele părți. Primul element va avea o unitate de spațiu pe partea containerului, dar două unități între el și următorul element, deoarece următorul element are și o unitate pe ambele părți.

alinierea elementelor

Această proprietate determină comportamentul elementelor flexibile de-a lungul axei transversale pe linia curentă. Gândiți-vă la asta ca , dar pentru axa transversală (perpendiculară pe axa principală).

Container ( elemente de aliniere: flex-start | flex-end | centru | linie de bază | stretch; )

• flex-start - elementele sunt plasate la începutul axei transversale;
• flex-end elementele sunt plasate la capătul axei transversale;
• centru - elementele sunt situate în centrul axei transversale;
• de bază- elementele sunt aliniate de-a lungul liniei de bază;
• întindere (implicit)- se întinde pentru a umple întregul recipient (respectând totuși lățimea min / lățime max);

alinierea-conținut

Notă. Această proprietate nu are efect atunci când există un singur rând de elemente flexibile.

Container ( align-content: flex-start | flex-end | centru | spațiu între | spațiu-în jur | întindere; )

• flex-start- liniile sunt amplasate la începutul containerului;
• flex-end- liniile sunt amplasate la capatul containerului;
• centru- liniile sunt plasate în centrul containerului;
• spațiu-între- liniile sunt distribuite uniform, prima linie este situată la începutul containerului, iar ultima linie la sfârșit;
• spatiu-in jur- liniile sunt distribuite uniform, cu aceeași distanță între ele;
• întindere (implicit)- liniile sunt întinse pe toată lățimea pentru a ocupa spațiul rămas;

Proprietăți pentru elementele copil (elementele Flex)

Ordin

În mod implicit, toate elementele sunt aranjate în ordinea lor inițială. Cu toate acestea, proprietatea de comandă controlează ordinea în care elementele sunt aranjate în interiorul containerului.

Articol (comanda: ; }

flex-creștere

Proprietatea determină capacitatea elementului de a crește în dimensiune dacă este necesar. Este nevoie de o valoare adimensională ca proporție, care determină cât spațiu liber ar trebui să ocupe în interiorul containerului elementul.

Dacă toate elementele au proprietatea flex-grow setată la 1, atunci spațiul liber din interiorul containerului va fi distribuit uniform între toate elementele. Dacă unul dintre elemente are o valoare setată la 2, atunci elementul va ocupa de două ori mai mult spațiu decât celelalte (sau cel puțin va încerca).

Articol(flex-grow: ; /* implicit 0 */ )

Numerele negative nu pot fi specificate.

flex-bază

Definește dimensiunea implicită a unui element, înainte de a aloca spațiul rămas. Aceasta ar putea fi o lungime (20%, 5rem etc.) sau un cuvânt cheie. Cuvântul cheie auto înseamnă „arata ca proprietatea mea lățime sau înălțime”. Cuvântul cheie de conținut înseamnă că „dimensiunea se bazează pe conținutul elementului” - acest cuvânt cheie nu este încă foarte bine susținut, deci este dificil de testat și cu atât mai dificil de știut care sunt frații săi min-content , max-content și fit-conținut fac.

Articol (bază flexibilă: | auto; /* automat implicit */ )

Dacă este setat la 0, spațiul suplimentar din jurul conținutului nu va fi luat în considerare. Dacă este setat la automat, spațiu suplimentar va fi alocat pe baza valorii.

contracta

Aceasta este prescurtarea pentru , și . Al doilea și al treilea parametru (flex-shrink și flex-basis) sunt opționali. Valoarea implicită este setată la 0 1 auto.

Articol ( flex: niciunul | [<"flex-grow"> <"flex-shrink">? || <"flex-basis"> ] }

alinierea-sine

Această proprietate vă permite să înlocuiți alinierea implicită (sau un set folosind proprietatea) pentru elementele flexibile individuale.

Vă rugăm să consultați explicația proprietății pentru a înțelege valorile disponibile.

Item ( align-self: auto | flex-start | flex-end | centru | linie de bază | stretch; ) .item ( align-self: auto | flex-start | flex-end | centru | linie de bază | stretch; )

Rețineți că float , clear și vertical-align nu au niciun efect asupra unui element flexibil.

Exemple

Să începem cu un exemplu foarte simplu care rezolvă o problemă care apare aproape în fiecare zi: centrarea perfectă. Nu ar putea fi mai ușor dacă utilizați Flexbox.

Părinte ( afișare: flex; înălțime: 300 px; ) .copil ( lățime: 100 px; înălțime: 100 px; margine: automată; )

Acest lucru depinde de marja care este setată la automat pe containerul flexibil care consumă spațiu suplimentar. Astfel, setarea marginii verticale la auto pe un element va face ca elementul să fie perfect centrat pe ambele axe.

Acum să folosim câteva proprietăți suplimentare. Luați în considerare o listă de 6 elemente, toate cu o dimensiune fixă ​​din punct de vedere estetic, dar pot fi automate. Dorim ca acestea să fie distribuite uniform de-a lungul axei orizontale, astfel încât atunci când browserul este redimensionat, totul va fi bine (fără interogări media!).

Flex-container ( afișare: flex; flex-flow: înfășurare rând; justificare-conținut: spațiu-în jur; )

Gata! Orice altceva sunt doar niște probleme de design. Mai jos este un exemplu pe CodePen, asigurați-vă că mergeți acolo și încercați să redimensionați ferestrele pentru a vedea ce se întâmplă.

Să încercăm altceva. Imaginați-vă că avem o navigare aliniată la dreapta în partea de sus a ecranului, dar dorim ca aceasta să fie centrată pe ecrane de dimensiuni medii și într-o singură coloană pe ecrane mici. La fel de ușor ca o plăcintă.

Navigare ( display: flex; flex-flow: row wrap; justify-content: flex-end; ) @media all și (max-width: 800px) ( .navigation (justify-content: space-around; ) ) @media all și (lățime maximă: 500 px) ( .navigation ( direcție flexibilă: coloană; ) )

Să încercăm să facem ceva și mai bun jucându-ne cu flexibilitatea articolelor noastre flexibile! Ce zici de un aspect pe trei coloane pentru dispozitive mobile, cu un antet și un subsol care se întinde pe întreaga lățime a ecranului și nu depinde de ordinea inițială a elementelor.

Wrapper ( display: flex; flex-flow: row wrap; ) .header, .main, .nav, .aside, .footer (flex: 1 100%; ) @media all și (min-width: 600px) ( .aside ( flex: 1 auto; ) ) @media all and (min-width: 800px) ( .main ( flex: 2 0px; ) .aside-1 ( order: 1; ) .main ( order: 2; ) .aside- 2 ( ordine: 3; ) .footer ( ordine: 4; ) )

Proprietăți aferente

Erori

Desigur, Flexbox nu este lipsit de erori. Cea mai bună colecție pe care am văzut-o este Flexbugs de la Philip Walton și Greg Whitworth. Acesta este un loc Open Source pentru a urmări toate erorile, așa că cred că cel mai bine este să lăsați un link.

Flexbox este conceput pentru a ne salva de nenorocirea CSS-ului pur (cum ar fi alinierea verticală) și face o treabă grozavă. Dar înțelegerea principiilor funcționării acestuia poate fi uneori dificilă, mai ales dacă ești începător.

Scopul principal al Flexbox este de a face straturile flexibile și intuitive pentru a lucra. Pentru a atinge acest obiectiv, permite containerelor să decidă cum să-și gestioneze copiii, inclusiv schimbarea dimensiunii și a distanței.

Sună bine, dar să vedem dacă este atât de lin în practică. În acest articol, vom explora cele mai populare 5 proprietăți Flexbox, ce fac acestea și cum funcționează de fapt.

Display: Flex

Iată o pagină exemplu:

Avem 4 div-uri de culori diferite de dimensiuni diferite care se află în interiorul unui div gri. Fiecare div are un display: proprietate de bloc. Prin urmare, fiecare pătrat ocupă întreaga lățime a liniei.

Pentru a începe cu Flexbox, trebuie să facem din containerul nostru un container flexibil. Acest lucru se face astfel:

#container ( afișare: flex; )

Se pare că nimic nu s-a schimbat - div-urile tocmai s-au aliniat. Dar ai făcut ceva cu adevărat puternic. Ați dat pătratelor dvs. o proprietate grozavă numită „context flexibil”.

Direcție Flex

Un container flexibil are două axe: axa principală și cea perpendiculară pe aceasta.

În mod implicit, toate obiectele sunt situate de-a lungul axei principale: de la stânga la dreapta. De aceea, pătratele noastre s-au aliniat când am aplicat afișajul: flex . Cu toate acestea, direcția flexibilă permite rotirea axei principale.

#container ( afișare: flex; direcție flex: coloană; )

Este important să rețineți că direcția flexibilă: coloana nu aliniază pătratele de-a lungul unei axe perpendiculare pe cea principală. Axa principală în sine își schimbă locația și acum este direcționată de sus în jos.

Mai există câteva proprietăți pentru direcția flexibilă: inversare rând și inversare coloană.

Justificați conținutul

Justify-content este responsabil pentru alinierea elementelor de-a lungul axei principale.

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

#container ( display: flex; flex-direction: row; justify-content: flex-start; )

Justify-conținut poate lua 5 valori:

1. flex-start;
2. flex-end ;
3. centru ;
4. spațiu-între ;
5. spatiu-in jur.

Spațiul dintre setează aceeași distanță între pătrate, dar nu între container și pătrate. Space-around stabilește, de asemenea, aceeași distanță între pătrate, dar acum distanța dintre container și pătrate este jumătate din distanța dintre pătrate.

Aliniați elementele

Dacă justify-content funcționează pe axa principală, atunci align-items funcționează pe axa perpendiculară pe axa principală.

Să revenim la flex-direction: row și să trecem prin comenzile align-items:

1. flex-start;
2. flex-end ;
3. centru ;
4. întindere;
5. de bază.

Merită remarcat faptul că pentru elementele de aliniere: întindere, înălțimea pătratelor ar trebui să fie setată la automat . Pentru elementele de aliniere: linia de bază nu este nevoie să eliminați etichetele de paragraf, altfel se va dovedi astfel:

Pentru a înțelege mai bine cum funcționează axele, să combinăm conținutul justificat cu elementele de aliniere și să vedem cum funcționează alinierea la centru pentru cele două proprietăți de direcție flexibilă:

Aliniați Sinele

Align-self vă permite să aliniați elementele individual.

#container ( align-items: flex-start; ) .square#one ( align-self: center; ) // Numai acest pătrat va fi centrat.

Să folosim align-self pentru două pătrate și să folosim align-items: center și flex-direction: row pentru restul.

Flex-Basis

Flex-basis este responsabil pentru dimensiunea inițială a elementelor înainte ca acestea să fie modificate de alte proprietăți Flexbox:

Flex-basis afectează dimensiunea elementelor de-a lungul axei principale.

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

Observați că a trebuit să modificăm și înălțimea elementelor. Flex-basis poate defini atât înălțimea elementelor, cât și lățimea acestora în funcție de direcția axei.

Flex Grow

Această proprietate este puțin mai complicată.

Mai întâi, să dăm pătratelor noastre aceeași lățime de 120 px:

În mod implicit, valoarea flex-grow este 0. Aceasta înseamnă că pătratele nu au voie să crească (ocupă spațiul rămas în container).

Să încercăm să setăm flex-grow la 1 pentru fiecare pătrat:

Pătratele au ocupat spațiul rămas în container. Valoarea flex-grow înlocuiește valoarea lățimii.

Dar aici apare o întrebare: ce înseamnă flex-grow: 1?

Să încercăm să setăm flex-grow la 999:

Și... nu sa întâmplat nimic. Acest lucru s-a întâmplat pentru că flex-grow nu acceptă valori absolute, ci relative.

Aceasta înseamnă că nu contează care este valoarea flex-grow, ceea ce contează este ceea ce este în raport cu celelalte pătrate:

La început, creșterea flexibilă a fiecărui pătrat este 1, totalul este 6. Aceasta înseamnă că containerul nostru este împărțit în 6 părți. Fiecare pătrat va ocupa 1/6 din spațiul disponibil în container.

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

Acum al treilea pătrat ocupă 2/7 din spațiu, restul - 1/7 fiecare.

Merită să ne amintim că flex-grow funcționează doar pentru axa principală (până când îi schimbăm direcția).

Flex Shrink

Flex-shrink este exact opusul flex-grow. Acesta determină cât de mult se poate micșora pătratul în dimensiune.

Flex-shrink este utilizat atunci când elementele nu se potrivesc în container.

Tu stabilești ce elemente ar trebui să se micșoreze în dimensiune și care nu. În mod implicit, valoarea flex-shrink pentru fiecare pătrat este 1. Aceasta înseamnă că pătratele se vor micșora pe măsură ce containerul devine mai mic.

Să setăm flex-grow și flex-shrink la 1:

Acum să modificăm valoarea flex-shrink pentru al treilea pătrat la 0. Nu este permis să se micșoreze, așa că lățimea sa va rămâne la 120px:

Merită să ne amintim că flex-shrink se bazează pe proporții. Adică, dacă un pătrat are un flex-shrink de 6, iar restul are o flex-shrink de 2, atunci aceasta înseamnă că pătratul nostru se va micșora de trei ori mai repede decât celelalte.

Contracta

Flex înlocuiește flex-grow, flex-shrink și flex-base.

Valorile implicite sunt 0 (creștere), 1 (micșorare) și automat (bază).

Să creăm două pătrate:

Square#one ( flex: 2 1 300px; ) .square#two ( flex: 1 2 300px; )

Ambele pătrate au aceeași bază flexibilă. Aceasta înseamnă că ambele vor avea o lățime de 300 de pixeli (lățimea containerului: 600 de pixeli plus marja și umplutură).

Dar când containerul începe să crească în dimensiune, primul pătrat (cu cel mai mare flex-grow) va crește de două ori mai repede, iar al doilea pătrat (cu cel mai mare flex-shrink) se va micșora de două ori mai repede.

Cum cresc și se micșorează lucrurile

Când primul pătrat crește, nu devine de două ori dimensiunea celui de-al doilea pătrat, iar când al doilea pătrat scade, nu devine jumătate din dimensiunea primului. Acest lucru se datorează faptului că flex-grow și flex-shrink sunt responsabile pentru rata de creștere și contracție.

Puțină matematică

Dimensiunea inițială a containerului: 640px. Scădeți 20px din fiecare parte pentru umplutură și rămânem cu 600px, suficient pentru două pătrate.

Când lățimea containerului devine 430px (o pierdere de 210px), primul pătrat (flex-shrink: 1) pierde 70px. Al doilea pătrat (flex-shrink: 2) pierde 140px.

Când containerul se micșorează la 340 px, pierdem 300 px. Primul pătrat pierde 100px, al doilea - 200px.

Același lucru se întâmplă cu flex-grow.

Cum folosește Yandex datele și învățarea automată pentru a personaliza serviciile -.

Pe scurt, aspectul Flexbox ne oferă soluții simple la probleme odată dificile. De exemplu, atunci când trebuie să aliniați un element pe verticală sau să apăsați subsolul în partea de jos a ecranului sau pur și simplu să introduceți mai multe blocuri într-un rând, astfel încât acestea să ocupe tot spațiul liber. Probleme similare pot fi rezolvate fără flex. Dar, de regulă, aceste soluții sunt mai degrabă ca „cârje” - tehnici de utilizare a CSS în alte scopuri decât scopul propus. În timp ce cu flexbox astfel de sarcini sunt rezolvate exact așa cum este intenționat modelul flex.

Modulul CSS Flexible Box Layout (modul CSS pentru machete cu blocuri flexibile), pe scurt flexbox, a fost creat pentru a elimina deficiențele la crearea unei game largi de modele HTML, inclusiv cele adaptate la diferite lățimi și înălțimi, și pentru a face aspectul logic și simplu . Și o abordare logică, de regulă, funcționează în locuri neașteptate, unde rezultatul nu a fost verificat - logica este totul!

Flexbox vă permite să controlați în mod elegant o varietate de parametri ai elementelor din interiorul unui container: direcția, ordinea, lățimea, înălțimea, alinierea de-a lungul și transversal, distribuția spațiului liber, întinderea și compresia elementelor.

Cunostinte de baza

O FlexBox constă dintr-un Container și articolele acestuia (elementele flexibile).

Pentru a activa flexbox, orice element HTML trebuie doar să atribuie proprietatea CSS display:flex; sau afișare:inline-flex; .

După activarea proprietății flex, în interiorul containerului sunt create două axe: principală și transversală (perpendiculară (⊥), axă transversală). Toate elementele imbricate (de la primul nivel) sunt aliniate de-a lungul axei principale. În mod implicit, axa principală este orizontală și direcționată de la stânga la dreapta (→), iar axa transversală este în mod corespunzător verticală și direcționată de sus în jos (↓).

Axele principale și transversale pot fi schimbate, apoi elementele vor fi amplasate de sus în jos (↓) și când nu se mai potrivesc în înălțime, se vor deplasa de la stânga la dreapta (→) - adică axele pur și simplu schimbate locurile . În acest caz, începutul și sfârșitul aranjamentului elementelor nu se schimbă - se schimbă doar direcțiile (axele)! Acesta este motivul pentru care trebuie să vă imaginați axele din interiorul containerului. Totuși, nu trebuie să credem că există niște axe „fizice” și ele influențează ceva. Axa aici este doar direcția de mișcare a elementelor din interiorul containerului. De exemplu, dacă am specificat alinierea elementelor la centrul axei principale și apoi am schimbat direcția acestei axe principale, atunci alinierea se va schimba: elementele au fost la mijloc pe orizontală, dar au devenit la mijloc pe verticală... Vezi exemplul.

O altă caracteristică importantă a Flexbox este prezența rândurilor în direcția transversală. Pentru a înțelege despre ce vorbim, să ne imaginăm că există o axă orizontală principală, sunt multe elemente și nu se „încadează” în container, așa că se mută pe alt rând. Acestea. un container arată astfel: un container cu două rânduri în interior, fiecare rând conținând mai multe elemente. Introdus? Acum amintiți-vă că putem alinia vertical nu numai elemente, ci și rânduri! Cum funcționează acest lucru se vede clar în exemplul pentru proprietate. Și așa arată schematic:

Proprietăți CSS care pot afecta modelul de aspect: float, clear, vertical-align, coloanele nu funcționează în design flex. Aici se folosește un model diferit pentru construirea unui aspect și aceste proprietăți CSS sunt pur și simplu ignorate.

Proprietăți CSS Flexbox

Flexbox conține diferite reguli CSS pentru a controla întregul design flex. Unele trebuie aplicate pe containerul principal, iar altele pe elementele acestui container.

Pentru container

afişa:

Activează proprietatea flex pentru element. Această proprietate acoperă elementul în sine și elementele sale imbricate: sunt afectați doar descendenții de primul nivel - vor deveni elemente ale containerului flexibil.

• contracta- elementul este întins pe toată lățimea și are spațiul său complet printre blocurile din jur. Rupele de linie apar la începutul și la sfârșitul blocului.
• inline-flex- un element este înfășurat în jurul altor elemente. În acest caz, partea sa internă este formatată ca element bloc, iar elementul în sine este formatat ca inline.

flex și inline-flex diferă prin faptul că interacționează diferit cu elementele din jur, similar cu display:block și display:inline-block .

direcție flexibilă:

Schimbă direcția axei principale a containerului. Axa transversală se modifică în consecință.

• rând (implicit)- direcția elementelor de la stânga la dreapta (→)
• coloană- direcția elementelor de sus în jos (↓)
• rând-invers- direcția elementelor de la dreapta la stânga (←)
• coloană-invers- direcția elementelor de jos în sus ()

flex-wrap:

Controlează transferul elementelor care nu se potrivesc în container.

• nowrap (implicit)- elementele imbricate se așează pe un rând (cu direcție=rând) sau într-o coloană (cu direcție=coloană) indiferent dacă încap sau nu în container.
• înfășura- include elemente de mișcare pe rândul următor dacă nu se potrivesc în container. Acest lucru permite deplasarea elementelor de-a lungul axei transversale.
• înfășurare-invers- la fel ca wrap, doar transferul nu va fi in jos, ci in sus (in sens invers).

flex-flow: înfășurare de direcție

Combină atât proprietățile de direcție flexibilă, cât și proprietățile de înfășurare flexibilă. Ele sunt adesea folosite împreună, astfel încât proprietatea flex-flow a fost creată pentru a scrie mai puțin cod.

flex-flow acceptă valorile acestor două proprietăți, separate printr-un spațiu. Sau puteți specifica o singură valoare pentru orice proprietate.

/* flex-direction only */ flex-flow: row; flex-flow: rând-invers; flex-flow: coloană; flex-flow: coloană-invers; /* flex-wrap only */ flex-flow: nowrap; flex-flow: wrap; flex-flow: wrap-reverse; /* ambele valori simultan: flex-direction și flex-wrap */ flex-flow: row nowrap; flex-flow: înfășurare coloană; flex-flow: coloană-reverse wrap-reverse; justificare-conținut:

Aliniază elementele de-a lungul axei principale: dacă direcția=rând, atunci pe orizontală și dacă direcția=coloană, apoi pe verticală.

• flex-start (implicit)- elementele vor merge de la început (s-ar putea să rămână ceva spațiu la sfârșit).
• flex-end- elementele sunt aliniate la sfârșit (spațiul va rămâne la început)
• centru- în centru (spațiul va rămâne în stânga și în dreapta)
• spațiu-între- elementele cele mai exterioare sunt presate pe margini (spațiul dintre elemente este distribuit uniform)
• spatiu-in jur- spatiul liber este distribuit uniform intre elemente (elementele cele mai exterioare nu sunt presate de margini). Spațiul dintre marginea recipientului și elementele exterioare va fi la jumătate față de spațiul dintre elementele din mijlocul rândului.
• spațiu-uniform

aliniere-conținut:

Aliniază rândurile care conțin elemente de-a lungul axei transversale. La fel ca justify-content numai pentru axa opusă.

Notă: Funcționează când există cel puțin 2 rânduri, de exemplu. Dacă există doar 1 rând, nu se va întâmpla nimic.

Acestea. dacă flex-direction: row , atunci această proprietate va alinia rândurile invizibile pe verticală. Este important de reținut aici că înălțimea blocului trebuie stabilită rigid și trebuie să fie mai mare decât înălțimea rândurilor, altfel rândurile în sine vor întinde containerul și orice aliniere a acestora devine lipsită de sens, deoarece nu există spațiu liber între ele... Dar când flex-direction: coloană , atunci rândurile se mișcă orizontal → și lățimea containerului este aproape întotdeauna mai mare decât lățimea rândurilor și alinierea rândurilor are sens imediat...

• întindere (implicit)- rândurile se întind pentru a umple rândul complet
• flex-start- rândurile sunt grupate în partea de sus a containerului (s-ar putea să rămână ceva spațiu la sfârșit).
• flex-end- rândurile sunt grupate în partea de jos a containerului (spațiul va rămâne la început)
• centru- rândurile sunt grupate în centrul containerului (spațiul va rămâne la margini)
• spațiu-între- randurile exterioare sunt presate de margini (spatiul dintre randuri este distribuit uniform)
• spatiu-in jur- spațiul liber este distribuit uniform între rânduri (elementele cele mai exterioare nu sunt presate de margini). Spațiul dintre marginea recipientului și elementele exterioare va fi la jumătate față de spațiul dintre elementele din mijlocul rândului.
• spațiu-uniform- la fel ca spatiul din jur, doar distanta dintre elementele exterioare pana la marginile recipientului este aceeasi ca intre elemente.

alinierea elementelor:

Aliniază elementele de-a lungul unei axe transversale în cadrul unui rând (rând invizibil). Acestea. Rândurile în sine sunt aliniate prin align-content , iar elementele din aceste rânduri (rânduri) sunt aliniate prin align-items și de-a lungul axei transversale. Nu există o astfel de împărțire de-a lungul axei principale, nu există conceptul de rânduri și elementele sunt aliniate prin justify-content .

• întindere (implicit)- elementele sunt întinse pentru a umple linia complet
• flex-start- elementele sunt presate la începutul rândului
• flex-end- elementele sunt presate până la capătul rândului
• centru- elementele sunt aliniate la centrul rândului
• de bază- elementele sunt aliniate la linia de bază a textului

Pentru elementele containerului

creștere flexibilă:

Setează factorul de mărire al elementului atunci când există spațiu liber în container. Flex-grow implicit: 0 i.e. niciunul dintre elemente nu ar trebui să crească și să umple spațiul liber din recipient.

Creștere flexibilă implicită: 0

• Dacă specificați flex-grow:1 pentru toate elementele, atunci toate se vor întinde în mod egal și vor umple tot spațiul liber din container.
• Dacă specificați flex-grow:1 la unul dintre elemente, atunci acesta va umple tot spațiul liber din container și aliniamentele prin justify-content nu vor mai funcționa: nu există spațiu liber pentru aliniere...
• Cu flex-grow:1. Dacă unul dintre ele are flex-grow:2 atunci va fi de 2 ori mai mare decât toate celelalte
• Dacă toate cutiile flexibile din interiorul unui container flexibil au flex-grow:3, atunci acestea vor avea aceeași dimensiune
• Cu flex-grow:3. Dacă unul dintre ele are flex-grow:12, atunci va fi de 4 ori mai mare decât toate celelalte

Cum functioneaza? Să presupunem că un container are 500 px lățime și conține două elemente, fiecare cu o lățime de bază de 100 px. Aceasta înseamnă că mai sunt 300 de pixeli liberi în container. Acum, dacă specificăm flex-grow:2; , iar al doilea flex-grow: 1; , atunci blocurile vor ocupa toată lățimea disponibilă a containerului, iar lățimea primului bloc va fi de 300px, iar al doilea de 200px. Acest lucru se explică prin faptul că 300px de spațiu liber disponibil în container a fost distribuit între elemente într-un raport de 2:1, +200px pentru primul și +100px pentru al doilea.

Notă: puteți specifica numere fracționale în valoare, de exemplu: 0,5 - flex-grow:0,5

flex-contractie:

Setează factorul de reducere al elementului. Proprietatea este opusul flex-grow și determină modul în care elementul ar trebui să se micșoreze dacă nu mai rămâne spațiu liber în container. Acestea. proprietatea începe să funcționeze atunci când suma dimensiunilor tuturor elementelor este mai mare decât dimensiunea containerului.

Flex-shrink implicit:1

Să presupunem că containerul are 600px lățime și conține două elemente, fiecare 300px lățime - flex-basis:300px; . Acestea. două elemente umplu complet recipientul. Dați primul element flex-shrink: 2; , iar al doilea flex-shrink: 1; . Acum să reducem lățimea containerului cu 300px, adică. elementele trebuie să se micșoreze cu 300 px pentru a se potrivi în interiorul containerului. Se vor micșora într-un raport de 2:1, adică. primul bloc se va micșora cu 200px, iar al doilea cu 100px, iar noile dimensiuni ale elementelor vor deveni 100px și 200px.

Notă: puteți specifica numere fracționale în valoare, de exemplu: 0,5 - flex-shrink:0,5

baza flexibila:

Setează lățimea de bază a elementului - lățimea înainte ca alte condiții care afectează lățimea elementului să fie calculate. Valoarea poate fi specificată în px, em, rem, %, vw, vh etc. Lățimea rezultată va depinde de lățimea de bază și de valorile flex-grow, flex-shrink și conținutul din interiorul blocului. Cu auto, elementul primește o lățime de bază în raport cu conținutul din interiorul său.

Implicit: automat

Uneori este mai bine să setați greu lățimea unui element prin proprietatea obișnuită. De exemplu, latime: 50%; va însemna că elementul din interiorul containerului va fi exact 50%, dar proprietățile flex-grow și flex-shrink vor funcționa în continuare. Acest lucru poate fi necesar atunci când elementul este întins de conținutul din interiorul său, mai mult decât este specificat în flex-basis. Exemplu.

flex-basis va fi „rigid” dacă stretch și shrink sunt setate la zero: flex-basis:200px; flex-grow:0; flex-contractie:0; . Toate acestea pot fi scrise astfel: flex:0 0 200px; .

flex: (creștere pe bază de contracție)

Un scurt rezumat al celor trei proprietăți: flex-grow flex-shrink flex-basis.

Implicit: flex: 0 1 auto

Cu toate acestea, puteți specifica una sau două valori:

Flex: niciunul; /* 0 0 auto */ /* număr */ flex: 2; /* flex-grow (flex-basis merge la 0) */ /* nu este un număr */ flex: 10em; /* flex-basis: 10em */ flex: 30px; /* flex-basis: 30px */ flex: auto; /* flex-basis: auto */ flex: continut; /* flex-basis: conținut */ flex: 1 30px; /* flex-grow și flex-basis */ flex: 2 2; /* flex-grow și flex-shrink (flex-basis merge la 0) */ flex: 2 2 10%; /* flex-grow și flex-shrink și flex-basis */ align-self:

Vă permite să modificați proprietatea align-items, numai pentru un singur element.

Implicit: din containerul align-items

• întinde- elementul este întins pentru a umple linia complet
• flex-start- elementul este apăsat la începutul liniei
• flex-end- elementul este presat până la capătul liniei
• centru- elementul este aliniat la centrul liniei

de bază- elementul este aliniat la linia de bază a textului

Ordin:

Vă permite să schimbați ordinea (poziție, poziție) a unui element din rândul general.

Implicit: comanda: 0

În mod implicit, elementele au ordine: 0 și sunt plasate în ordinea apariției lor în codul HTML și în direcția rândului. Dar dacă modificați valoarea proprietății de ordine, atunci elementele vor fi aranjate în ordinea valorilor: -1 0 1 2 3 ... . De exemplu, dacă specificați ordinea: 1 pentru unul dintre elemente, atunci toate zerourile vor merge mai întâi, iar apoi elementul cu 1.

Astfel, de exemplu, puteți muta primul element până la capăt fără a schimba direcția de mișcare a elementelor rămase sau a codului HTML.

Note

Care este diferența dintre baza flexibilă și lățime?

Mai jos sunt diferențele importante dintre baza flexibilă și lățime/înălțime:

flex-basis funcționează numai pentru axa principală. Aceasta înseamnă că cu flex-direction:row flex-basis controlează lățimea, iar cu flex-direction:column controlează înălțimea. .

flex-basis se aplică numai elementelor flexibile. Aceasta înseamnă că dacă dezactivați flex pentru un container, această proprietate nu va avea niciun efect.

Elementele containerului absolut nu participă la construcția flexibilă... Aceasta înseamnă că baza flexibilă nu afectează elementele flexibile ale unui container dacă sunt poziție absolută: absolută. Ei vor trebui să specifice lățimea/înălțimea.

• Când utilizați proprietatea flex, 3 valori (flex-grow/flex-shrink/flex-basis) pot fi combinate și scrise pe scurt, dar pentru creșterea sau micșorarea lățimii trebuie să scrieți separat. De exemplu: flex:0 0 50% == lățime:50%; flex-contractie:0; . Uneori este doar incomod.

Dacă este posibil, preferați totuși baza flexibilă. Utilizați lățimea numai atunci când baza flexibilă nu este adecvată.

Diferența dintre baza flexibilă și lățime - un bug sau o caracteristică?

Conținutul din interiorul unui element flexibil îl împinge și nu poate depăși el. Cu toate acestea, dacă setați lățimea folosind width sau max-width mai degrabă decât flex-basis , atunci un element din interiorul unui container flexibil se va putea extinde dincolo de limitele acelui container (uneori acesta este exact comportamentul pe care îl doriți). Exemplu:

Exemple de layout Flex

Nicăieri în exemple nu sunt folosite prefixe pentru compatibilitatea între browsere. Am făcut acest lucru pentru a citi ușor css. Prin urmare, consultați cele mai recente versiuni de Chrome sau Firefox pentru exemple.

# 1 Exemplu simplu cu aliniere verticală și orizontală

Să începem cu cel mai simplu exemplu - alinierea verticală și orizontală în același timp și la orice înălțime de bloc, chiar și cauciuc.

Sau așa, fără un bloc înăuntru:

#1.2 Separarea (ruperea) între elementele blocului flexibil

Pentru a poziționa elementele containerului de-a lungul marginilor și a selecta aleatoriu un element după care va exista o pauză, trebuie să utilizați proprietatea margin-left:auto sau margin-right:auto.

#2 Meniu adaptiv pe flex

Să creăm un meniu chiar în partea de sus a paginii. Pe un ecran lat ar trebui să fie în dreapta. În medie, aliniați-vă la mijloc. Iar pe cel mic, fiecare element trebuie să fie pe o linie nouă.

# 3 Adaptive 3 coloane

Acest exemplu arată cum să faci rapid și convenabil 3 coloane, care, atunci când sunt restrânse, se vor transforma în 2 și apoi în 1.

Vă rugăm să rețineți că acest lucru se poate face fără a utiliza regulile media, totul este pe flex.

Accesați jsfiddle.net și modificați lățimea secțiunii „rezultat”.

# 4 Blocuri adaptive pe flex

Să presupunem că trebuie să scoatem 3 blocuri, unul mare și două mici. În același timp, este necesar ca blocurile să se adapteze la micile ecrane. Noi facem:

Accesați jsfiddle.net și modificați lățimea secțiunii „rezultat”.

#5 Galerie cu flexibilitate și tranziție

Acest exemplu arată cât de repede poți face un acordeon drăguț cu imagini folosind flex. Acordați atenție proprietății de tranziție pentru flex.

# 6 Flex to Flex (doar un exemplu)

Sarcina este de a face un bloc flexibil. Astfel încât începutul textului din fiecare bloc să fie pe aceeași linie orizontal. Acestea. Pe măsură ce lățimea se îngustează, blocurile cresc în înălțime. Este necesar ca imaginea să fie în partea de sus, butonul să fie întotdeauna în jos, iar textul din mijloc să înceapă de-a lungul unei linii orizontale...

Pentru a rezolva această problemă, blocurile în sine sunt întinse cu flex și setate la lățimea maximă posibilă. Fiecare bloc intern este, de asemenea, o structură flexibilă, cu o axă rotită flex-direction:coloană; iar elementul din mijloc (unde este textul) este întins flex-grow:1; pentru a umple tot spațiul liber, așa se obține rezultatul - textul începea cu o singură linie...

Mai multe exemple

Suport browser - 98,3%

Desigur, nu există suport complet, dar toate browserele moderne acceptă modele flexbox. Unele încă necesită prefixe. Pentru o imagine reală, să ne uităm la caniuse.com și să vedem că 96,3% dintre browserele folosite astăzi vor funcționa fără prefixe, cu 98,3% folosind prefixe. Acesta este un indicator excelent pentru a utiliza cu încredere flexbox.

Pentru a ști ce prefixe sunt relevante astăzi (iunie 2019), voi da un exemplu al tuturor regulilor flexibile cu cu prefixele necesare:

/* Container */ .flex ( display:-webkit-box; display:-ms-flexbox; display:flex; display:-webkit-inline-box; display:-ms-inline-flexbox; display:inline-flex; -webkit-box-orient:vertical -ms-flex-wrap:wrap -webkit-box-pack; :justify; align-content:space-around ) /* Elemente */ .flex-item ( -webkit-box-flex:1; -ms-flex-positive:1; -ms -flex-negativ:2 -ms-flex-preferred-size:1 2 align-self:center; :3; ​​-ms-flex-order:2);

Este mai bine dacă proprietățile cu prefixe merg înaintea proprietății originale.
Această listă nu conține prefixe care nu sunt necesare astăzi (după caniuse), dar în general există mai multe prefixe.

Crom	Safari	Firefox	Operă	I.E.	Android	iOS
20- (vechi)	3.1+ (vechi)	2-21 (vechi)		10 (interpolare)	2.1+ (vechi)	3.2+ (vechi)
21+ (nou)	6.1+ (nou)	22+ (nou)	12.1+ (nou)	11+ (nou)	4.4+ (nou)	7.1+ (nou)

• (nou) - sintaxă nouă: display: flex; .
• (tweener) - sintaxă veche neoficială din 2011: afișaj: flexbox; .
• (vechi) - sintaxa veche din 2009: afisare: caseta;

Video

Ei bine, nu uitați de videoclip, uneori este și interesant și de înțeles. Iată câteva dintre cele populare:

Link-uri utile pe Flex

flexboxfroggy.com - joc educațional flexbox.

Flexplorer este un generator de coduri flexibile vizuale.

Bună, habr!

Într-o seară bună, fără a prefigura ceva interesant, chat-ul nostru a primit o propunere de la autorul unei publicații pe care a scris-o în primăvara lui 2012, de a scrie un articol remake, dar folosind FlexBox și o explicație însoțitoare despre ce și cum funcționează. După câteva îndoieli, interesul de a înțelege mai profund specificația a câștigat și eu și m-am așezat cu bucurie să scriu aceleași exemple. Pe măsură ce ne cufundam în această zonă, multe nuanțe au început să devină clare, care au devenit ceva mai mult decât doar reproiectarea layout-urilor. În general, în acest articol vreau să vorbesc despre o specificație atât de minunată numită „CSS Flexible Box Layout Module” și să arăt câteva dintre caracteristicile sale interesante și exemple de aplicație. Îi invit cu drag pe toți cei interesați să se alăture hack-ului.

Ceea ce aș dori să vă atrag atenția este că pentru a crea un aspect pe FlexBox, dezvoltatorul va avea nevoie de un anumit grad de adaptare. Din propriul meu exemplu, am simțit că mulți ani de experiență fac o glumă crudă. FlexBox necesită un mod ușor diferit de a gândi despre alinierea elementelor într-un flux.

Partea tehnica

Înainte de a trece la orice exemple, merită să înțelegeți ce proprietăți sunt incluse în această specificație și cum funcționează. Din moment ce unele dintre ele nu sunt foarte clare inițial, iar altele sunt înconjurate de mituri care nu au nimic de-a face cu realitatea.

Asa de. Există două tipuri principale de elemente în FlexBox: Flex Container și copiii săi - Flex Items. Pentru a inițializa containerul, trebuie doar să atribuiți, prin css, elementului display: flex; sau display: inline-flex;. Diferența dintre flex și inline-flex este doar în principiul interacțiunii cu elementele care înconjoară containerul, similar cu afișajul: bloc; și afișare: inline-block;, respectiv.

Două axe sunt create în interiorul unui container flexibil, axa principală și axa perpendiculară sau transversală. Cele mai multe elemente flexibile sunt aliniate de-a lungul axei principale și apoi de-a lungul axei transversale. În mod implicit, axa principală este orizontală și direcționată de la stânga la dreapta, iar axa transversală este verticală și direcționată de sus în jos.

Direcția axelor poate fi controlată folosind o proprietate css flex-direcție. Această proprietate ia un număr de valori:
rând(implicit): axa principală a containerului flexibil are aceeași orientare ca axa în linie a modului de direcție a rândului curent. Începutul (principal-start) și sfârșitul (principal-sfârșit) direcției axei principale corespund începutului (inline-start) și sfârșitului (inline-end) ale axei inline.
rând-invers: Totul este la fel ca în rând, doar main-start și main-end sunt schimbate.
coloană: la fel ca și rândul, doar că acum axa principală este direcționată de sus în jos.
coloană-invers: la fel ca rândul invers, doar axa principală este direcționată de jos în sus.
Puteți vedea cum funcționează acest lucru în exemplul de pe jsfiddle.

În mod implicit, toate elementele flexibile dintr-un container sunt plasate pe o singură linie, chiar dacă nu se potrivesc în container, se extind dincolo de limitele acestuia. Acest comportament este comutat folosind proprietatea flex-wrap. Această proprietate are trei stări:
nowrap(implicit): articolele Flex sunt aliniate într-o singură linie de la stânga la dreapta.
înfășura: elementele flexibile sunt construite în modul multi-linie, transferul se efectuează în direcția axei transversale, de sus în jos.
înfășurare-invers: la fel ca și wrap, dar se înfășoară de jos în sus.
Să ne uităm la un exemplu.

Pentru confort, există o proprietate suplimentară flex-flow, în care puteți specifica simultan flex-direcțieȘi flex-wrap. Arata cam asa: flux flexibil:

Elementele dintr-un container pot fi aliniate folosind proprietatea justifica-conținut de-a lungul axei principale. Această proprietate acceptă până la cinci valori diferite.
flex-start(implicit): Elementele flexibile sunt aliniate la originea axei principale.
flex-end: elementele sunt aliniate la capătul axei principale
centru: Elementele sunt aliniate la centrul axei principale
spațiu-între: elementele ocupă toată lățimea disponibilă în container, elementele cele mai exterioare sunt presate strâns pe marginile containerului, iar spațiul liber este distribuit uniform între elemente.
spatiu-in jur: Elementele flexibile sunt aliniate astfel încât spațiul liber să fie distribuit uniform între elemente. Dar este de remarcat faptul că spațiul dintre marginea recipientului și elementele exterioare va fi la jumătate față de spațiul dintre elementele din mijlocul rândului.
Desigur, puteți face clic pe un exemplu despre cum funcționează această proprietate.

Asta nu este tot, avem și capacitatea de a alinia elemente de-a lungul axei transversale. Prin aplicarea proprietății alinierea elementelor, care ia și cinci valori diferite, puteți obține un comportament interesant. Această proprietate vă permite să aliniați elementele într-un rând unul față de celălalt.
flex-start: toate elementele sunt împinse la începutul liniei
flex-end: elementele sunt împinse până la capătul liniei
centru: elementele sunt aliniate la centrul rândului
de bază: Elementele sunt aliniate la linia de bază a textului
întinde(implicit): elementele sunt întinse pentru a umple întreaga linie.

O altă proprietate similară celei anterioare este alinierea-conținut. Este singurul responsabil pentru alinierea liniilor întregi în raport cu containerul flexibil. Nu va avea niciun efect dacă articolele flexibile ocupă o singură linie. Proprietatea ia șase valori diferite.
flex-start: toate liniile sunt apăsate la începutul axei transversale
flex-end: toate liniile sunt apăsate până la capătul axei transversale
centru: Toate liniile de pachet sunt aliniate la centrul axei transversale
spațiu-între: liniile sunt distribuite de la marginea superioară spre jos, lăsând spațiu liber între linii, în timp ce liniile cele mai exterioare sunt presate pe marginile recipientului.
spatiu-in jur: liniile sunt distribuite uniform în întregul container.
întinde(implicit): liniile sunt întinse pentru a ocupa tot spațiul disponibil.
Puteți încerca cum funcționează elementele de aliniere și conținutul de aliniere în acest exemplu. Am prezentat în mod specific aceste două proprietăți într-un singur exemplu, deoarece interacționează destul de strâns, fiecare realizând propria sa sarcină. Observați ce se întâmplă atunci când elementele sunt plasate pe o linie sau pe mai multe linii.

Am aranjat parametrii unui container flexibil, tot ce rămâne este să ne dăm seama de proprietățile elementelor flexibile.
Prima proprietate cu care ne vom familiariza este Ordin. Această proprietate vă permite să schimbați poziția unui anumit element în flux. În mod implicit, toate elementele flexibile au ordine: 0;și sunt construite în ordinea curgerii naturale. În exemplu, puteți vedea cum sunt schimbate elementele dacă li se aplică valori diferite de ordine.

Una dintre proprietățile principale este flex-bază. Cu această proprietate putem specifica lățimea de bază a unui articol flexibil. Valoarea implicită este auto. Această proprietate este strâns legată de flex-creștereȘi flex-contractie, despre care voi vorbi puțin mai târziu. Acceptă o valoare a lățimii în px, %, em și alte unități. În esență, nu este strict lățimea elementului flexibil, este un fel de punct de plecare. Față de care elementul se întinde sau se micșorează. În modul automat, elementul primește o lățime de bază în raport cu conținutul din interiorul său.

flex-creștere pe mai multe resurse are o descriere complet incorectă. Se spune că se presupune că stabilește raportul dintre dimensiunile elementelor din container. De fapt, acest lucru nu este adevărat. Această proprietate specifică factorul de mărire al elementului atunci când există spațiu liber în container. În mod implicit, această proprietate are valoarea 0. Să ne imaginăm că avem un container flex care are o lățime de 500px, în interiorul lui sunt două elemente flex, fiecare cu o lățime de bază de 100px. Acest lucru lasă încă 300 de pixeli de spațiu liber în container. Dacă specificăm flex-grow: 2 pentru primul element, iar flex-grow: 1; Ca urmare, aceste blocuri vor ocupa toată lățimea disponibilă a containerului, doar lățimea primului bloc va fi de 300 px, iar al doilea doar 200 px. Ce s-a întâmplat? Ceea ce s-a întâmplat este că cei 300 px de spațiu liber disponibil în container au fost distribuite între elemente într-un raport de 2:1, +200px pentru primul și +100px pentru al doilea. Acesta este de fapt modul în care funcționează.

Aici trecem fără probleme la o altă proprietate similară, și anume flex-contractie. Valoarea implicită este 1. De asemenea, stabilește un factor pentru modificarea lățimii elementelor, doar în direcția opusă. Dacă recipientul are o lățime Mai puțin decât suma lățimii de bază a elementelor, atunci această proprietate intră în vigoare. De exemplu, containerul are o lățime de 600px, iar baza flexibilă a elementelor este de 300px. Dați primului element flex-shrink: 2; și al doilea element flex-shrink: 1;. Acum să micșorăm containerul cu 300 px. Prin urmare, suma lățimii elementelor este cu 300px mai mare decât containerul. Această diferență este distribuită într-un raport de 2:1, așa că scădem 200px din primul bloc și 100px din al doilea. Noua dimensiune a elementelor este 100px și 200px, pentru primul și, respectiv, al doilea element. Dacă setăm flex-shrink la 0, atunci împiedicăm elementul să se micșoreze la o dimensiune mai mică decât lățimea de bază.

De fapt, aceasta este o descriere foarte simplificată a modului în care funcționează totul, astfel încât principiul general să fie clar. Mai detaliat, dacă cineva este interesat, algoritmul este descris în specificație.

Toate cele trei proprietăți pot fi scrise în formă prescurtată folosind expresia contracta. Acesta arată astfel:
contracta: ;
Și mai putem scrie două versiuni prescurtate, flex:auto;Și flex: niciunul;, care înseamnă flex: 1 1 auto;Și flex: 0 0 auto; respectiv.

Ultima proprietate a elementelor flexibile rămâne alinierea-sine. Totul este simplu aici, este la fel ca elementele de aliniere pentru un container, ceea ce vă permite să suprascrieți alinierea pentru un anumit element.

Gata, m-am saturat! Dă exemple!

Am rezolvat partea tehnică, s-a dovedit a fi destul de lungă, dar trebuie să intri în ea. Acum putem trece la aplicarea practică.
În timpul dezvoltării acelor „cinci șabloane de aspect responsive cu adevărat utile”, a trebuit să rezolvăm situații tipice pe care dezvoltatorii le întâlnesc destul de des. Cu flexbox, implementarea acestor soluții devine mai ușoară și mai flexibilă.
Să luăm același aspect al 4-lea, pentru că... are cele mai interesante elemente.

Mai întâi, să desemnăm lățimea principală a paginii, să o aliniem la centru și să apăsăm subsolul în partea de jos a paginii. Ca întotdeauna în general.

Html ( fundal: #ccc; min-height: 100%; font-family: sans-serif; display: -webkit-flex; display: flex; flex-direction: coloană; ) body ( marja: 0; padding: 0 15px ; display: -webkit-flex: flex: 10px; : 960px; margine: 430px;

Datorita faptului ca am specificat flex-grow: 1 pentru .main; se întinde la toată înălțimea disponibilă, apăsând astfel subsolul în partea de jos. Bonusul acestei soluții este că subsolul poate avea o înălțime nefixă.

Acum să plasăm logo-ul și meniul în antet.
.logo (dimensiune font: 0; margine: -10px 10px 10px 0; afișare: flex; flex: niciunul; aliniere-element: centru; ) .logo:before, .logo:after (conținut: ""; afișare: bloc ; ) .logo: înainte ( fundal: # 222; lățime: 50 px; înălțime: 50 px; margine: 0 10 px 0 20 px; chenar- rază: 50 %; ) . logo: după ( fundal: # 222; lățime: 90 px; înălțime : 30px; ) .nav ( margine: -5px 0 0 -5px; afișare: -webkit-flex; afișare: flex; flex-wrap: wrap; ) .nav-itm ( fundal: #222; lățime: 130px; înălțime: 50px; dimensiunea fontului: 1.5rem;

Deoarece antetul are flex-wrap: wrap; și justificare-conținut: spațiu-între; Logo-ul și meniul sunt împrăștiate pe diferite părți ale antetului, iar dacă nu există suficient spațiu pentru meniu, acesta se va deplasa elegant sub logo.

Apoi vedem o postare mare sau un banner, este dificil să spunem despre ce este vorba în mod specific, dar nu acesta este ideea. Avem o imagine în dreapta și text cu un titlu în stânga. Eu personal aderă la ideea că orice element ar trebui să fie cât mai flexibil posibil, indiferent dacă aspectul este adaptiv sau static. Deci in aceasta postare avem o bara laterala in care este plasata o poza strict vorbind, nu putem spune exact ce latime avem nevoie, pentru ca azi avem o poza mare, maine una mica, si nu vrem sa refacem elementul; de la zero de fiecare dată. Aceasta înseamnă că avem nevoie de bara laterală să ocupe locul de care are nevoie, iar restul spațiului va merge la conținut. Să o facem:

Caseta (dimensiunea fontului: 1.25rem; înălțimea liniei: 1.5; stilul fontului: cursiv; marginea: 0 0 40px -50px; afișarea: -webkit-flex; afișarea: flex; flex-wrap: wrap; justificarea conținutului: center; .box-base ( margin-left: 50px; flex: 1 0 430px; ) .box-side ( margin-left: 50px; flex: none; ) .box-img (max-lățime: 100%; înălțime: auto)

După cum puteți vedea pentru .box-base, unde avem titlul și textul, am specificat lățimea bazei cu flex-base: 430px;, și, de asemenea, a interzis utilizarea contracției blocului flex-contractie: 0;. Cu această manipulare am spus că conținutul nu poate deveni mai mic de 430px lățime. Și având în vedere faptul că pentru .box indic flex-wrap: wrap;în momentul în care bara laterală și conținutul nu se potrivesc în container.box, bara laterală va cădea automat sub conținut. Și toate acestea fără aplicare @mass-media! Cred că asta este într-adevăr foarte tare.

Ne-a rămas conținut în trei coloane. Există mai multe soluții la această problemă, voi arăta una dintre ele în celelalte aspecte, există o altă opțiune.
Să creăm un container, să-l numim .content și să-l configurem.
.conținut ( margin-bottom: 30px; display: -webkit-flex; display: flex; flex-wrap: wrap; )

Containerul are trei coloane, .bannere, .postări, .comentarii
.bannere ( flex: 1 1 200 px; ) . postări ( marjă: 0 0 30 px 30 px; flex: 1 1 200 px; ) . comentarii ( marjă: 0 0 30 px 30 px; flex: 1 1 200 px; )

Am dat coloanelor o lățime de bază de 200px, astfel încât coloanele să nu se îngusteze prea mult, dar ar fi mai bine dacă ar fi mutate una sub cealaltă la nevoie.

Conform aspectului, nu ne vom putea lipsi de @media cu conținutul, așa că haideți să mai reglam puțin comportamentul coloanelor pentru lățime<800px и <600px.
@media ecran și (max-width: 800px) ( .bannere ( margin-left: -30px; display: -webkit-flex; display: flex; flex-basis: 100%; ) .posts ( margin-left: 0; ) ) Ecran @media și (lățime maximă: 600px) ( .conținut ( afișare: bloc; ) .bannere ( marjă: 0; afișare: bloc; ) .comments ( marjă: 0; ) )

Aceasta este toată magia atunci când vine vorba de crearea unui aspect pe FlexBox. O altă sarcină care mi-a plăcut este cea de-a 5-a aspect, în special se referă la adaptarea conținutului.

Vedem cum la rezoluția desktop postările sunt construite într-o grilă de trei la rând. Când lățimea ferestrei de vizualizare devine mai mică de 800 px, grila se transformă într-o coloană cu postări, în care fotografia postării este aliniată în partea stângă și dreaptă a conținutului postării, alternativ. Și dacă lățimea este mai mică de 600px, fotografia postată este complet ascunsă.
.grid ( display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content: space-between; ) .grid-itm ( margin-bottom: 30px; flex-basis: calc(33,33% - 30px) * 2/3); display: -webkit-flex: flex-wrap: wrap ) .grid-img ( margine: 0 auto 20px; flex: 0 1 80%; ) 100%; grid-img ( flex: 0 0 auto; ) .grid-itm:nth-child(even) .grid-img ( margin: 0 0 0 30px; order: 2; ) .grid-itm:nth-child (impar) .grid-img ( margine: 0 30px 0 0; ) .grid-cont (flex: 1 1 auto; ) .grid-title ( text-align: left; ) ) @media ecran și (max-width: 600px) ( .grid-img (afișare: niciunul; ) )

De fapt, aceasta este doar o mică parte din ceea ce poate fi implementat cu FlexBox. Specificația vă permite să construiți machete de pagină foarte complexe folosind cod simplu.