Totul despre proprietățile flexboxului

Conceptul din spatele proprietăților Flexbox este de a oferi capacității containerului de a schimba automat lățimea, înălțimea și ordinea articolelor sale pentru a umple cel mai bine spațiul disponibil. Acest lucru poate fi util pentru acomodarea articolelor în diferite dimensiuni de ecran și dispozitive. Articolele sunt extinse pentru a umple orice spațiu liber sau micșorat pentru a evita o revărsare.

Grila CSS Flexbox Pentru începători

CSS este unul dintre primele și cele mai ușoare lucruri de învățat în dezvoltarea și designul web, dar nu greșiți simplitatea sa din lipsa funcțiilor. Are o serie de funcții și funcții uimitoare, gata de a fi utilizate, una dintre ele fiind modulul său relativ nou de aspect: proprietățile Flexbox.

Proprietățile Flexbox sunt una dintre cele mai noi machete disponibile pentru CSS3 și sunt multe de învățat despre aceasta. Aici, ne ocupăm de aspect și modul de utilizare. Cu toate acestea, înainte de a începe, iată un fundal mic asupra proprietăților Flexbox:

Ce sunt modurile de dispunere?

În termenii cei mai simpli, grila CSS Flexbox este un mod de dispunere. CSS are o serie de moduri de layout existente. Modul de dispunere a blocului (cum ar fi afișarea: bloc) este de mult timp. Aspectele bloc sunt o alegere bună pentru stilul documentelor complete. De fapt, un browser web tratează în mod implicit mai multe elemente precum div-uri și paragrafe ca nivel de bloc.

Un alt mod de aspect comun este inline. Eticheta puternică, eticheta de intrare și eticheta ancoră sunt exemple de elemente la nivel de linie. Instrumentele pentru dezvoltatori Google Chrome vă permit chiar să vizualizați „stilul calculat” al unui element pentru a determina proprietățile și valorile CSS care au fost aplicate elementelor care nu au fost stabilite explicit de dezvoltator.

Proprietățile relativ mai noi ale Flexbox (cutie flexibilă) sunt concepute ca o metodă mai eficientă de stabilire, aliniere și distribuire a spațiului între obiectele containerului, chiar dacă dimensiunea acestor elemente este dinamică sau necunoscută. De aici termenul „flexibil”.

Conceptul de proprietăți Flexbox

Cel mai important lucru despre proprietățile Flexbox este faptul că este direcțional-agnostic. În timp ce aspectul blocului este bazat pe verticală și aspectul în linie este bazat pe orizontală, Flexbox nu este niciuna. Blocarea și linia în linie funcționează bine în situațiile potrivite, dar nu au flexibilitate pentru a susține aplicații complicate sau mari, în special atunci când vine vorba de schimbarea orientării, întinderii, micșorarea, redimensionarea și modificarea altfel a dimensiunilor elementelor.

Unde sunt utilizate proprietățile Flexbox?

Ca orice alt aspect CSS, Flexbox este cel mai bine utilizat în anumite situații. În special, este potrivit pentru machete la scară mică și componente ale unei aplicații. Pentru machete la scară mai mare, un aspect Grilă ar fi alegerea mai înțeleaptă.

De ce este preferat Flexbox?

O mulțime de dezvoltatori și designeri dau preferință proprietăților Flexbox ori de câte ori pot (uneori prea des!). Acest lucru se datorează faptului că proprietățile Flexbox sunt mai ușor de utilizat; poziționarea elementelor este mult mai simplă, astfel încât puteți obține machete mai complexe, cu mai puțin codare. Cu alte cuvinte, face procesul de dezvoltare mai simplu.

Un ghid pentru proprietățile Flexbox

Acum, că știți un pic despre proprietățile Flexbox și cum și de ce funcționează, iată un ghid detaliat privind aspectul. Modelul machetei este alcătuit dintr-un container părinte, numit și „container flex”. Copiii imediați din acest container sunt numiți „articole flexibile”.

Aspectul a trecut prin mai multe iterații și modificări de sintaxă de-a lungul anilor de la crearea primului proiect în 2009. Cea mai recentă specificație Flexbox este acceptată pe următoarele browsere web:

  • Opera 17+
  • Internet Explorer 11+
  • Mozilla Firefox 28+
  • Google Chrome 29+
  • Apple Safari 6.1+
  • Android 4.4+
  • iOS 7.1+

Terminologia folosită în proprietățile Flexbox

Iată câteva terminologii de bază utilizate în aspectul proprietăților Flexbox:

  • Afișare: Această comandă este folosită pentru a defini containerul flex. Poate fi în linie sau bloc, în funcție de. De asemenea, definește conținutul flex pentru toate articolele din container. Exemplu:

.container (

afișare: flex; / * sau inline-flex * /

)

  • Comandă: articolele Flex sunt stabilite în funcție de comanda sursă în mod implicit, dar proprietatea „comandă” poate controla ordinea în care articolele apar în container. Exemplu:

.item (

Ordin: ;

)

  • Direcție flexibilă: Această comandă stabilește axa principală, definind direcția ca elementele de flexare să fie plasate în container. Articolele flexibile pot fi așezate în principal pe direcții verticale sau orizontale. Exemplu:

.container (

direcție flexă: rând | rând-invers | coloană | coloană-invers;

)

  • Flex-grow: Această comandă definește capacitatea elementului flex de a scala automat dacă are spațiu. Poate accepta o valoare unitară care să servească drept proporție. Această valoare dictează cât spațiu ar trebui să ocupe obiectul în containerul flex. De exemplu, dacă toate articolele au flex-crește setate ca 1, spațiul rămas în container va fi distribuit în mod egal tuturor copiilor. Dacă valoarea este 2, spațiul rămas va ocupa de două ori mai mult spațiu decât restul. Exemplu:

.item (

flex-cresc :; / * implicit 0 * /

)

  • Flex-shrink: Acest lucru face exact opusul ca flex-grow, prin faptul că micșorează elementele flex atunci când este necesar. Exemplu:

.item (

flex-contrare:; / * implicit 1 * /

)

  • Flex-bază: Această comandă definește o dimensiune implicită a elementelor înainte de a distribui restul de spațiu. Poate fi o lungime, cum ar fi 5rem sau 20%, sau un cuvânt cheie. Cuvântul cheie „auto” indică faptul că lățimea și înălțimea articolului trebuie măsurată, iar cuvântul cheie „conținut” indică faptul că elementul este dimensionat în funcție de conținutul său. Exemplu:

.item (

flex-base: | auto; / * implicit auto * /

)

  • Flex: acesta este un shorthand combinat pentru toate cele trei proprietăți de mai sus: flex-grow, flex-base și flex-shrink. Valoarea implicită este „0 1 auto”.

.item (

flex: niciunul | (||)

)

  • Justify-content: Această ordine definește alinierea axei principale și ajută la distribuirea spațiului liber suplimentar dacă mai rămâne când articolele sunt inflexibile sau au atins dimensiunea maximă. Acest lucru ajută, de asemenea, la controlul alinierii elementului atunci când există un preaplin.

.container (

justifica-continut: flex-start | capăt flex | centru | spațiu-între | spațiu- în jurul valorii de ;

)

  • Aliniere-elemente: Acesta este utilizat pentru a defini comportamentul implicit al aspectului elementelor flex pe axa transversală a liniei curente. În esență, este o versiune a „conținutului justificat” de pe axa transversală, care este perpendiculară pe axa principală. Exemplu:

.container (

align-items: flex-start | flex-end | centru | linie de bază | întinde;

)

  • Aliniere-conținut: Această ordine aliniază liniile containerului în cazul în care există un spațiu suplimentar pe axa transversală. Este similar cu „conține justificare”, dar pentru axa transversală în loc de axa principală. Dacă există o singură linie de elemente flexibile, această proprietate nu are niciun efect. Exemplu:

.container (

align-content: flex-start | flex-end | centru | spațiu-între | spațiu- în jurul valorii | întinde;

)

Utilizarea proprietăților Flexbox

Pentru a utiliza aspectul Flexbox, puteți seta pur și simplu proprietatea de afișare pe elementul HTML HTML, cum este mai jos:

.flex-container (

afisaj: -webkit-flex; / * Safari * /

afișare: flex;

)

Dacă preferați să afișați ca un element inline, puteți scrie în:

.flex-container (

afișare: -webkit-inline-flex; / * Safari * /

afișare: inline-flex;

)

Aveți nevoie doar de această proprietate să setați pe recipientul pentru flex părinte și pe elementele sale flexibile imediate. Copiii container vor deveni automat articole flexibile.

Cursuri recomandate

  • Curs online despre jQuery gratuit
  • Curs online pentru JS Angular gratuit
  • Instruire online pe Mudbox
  • Pregătirea certificării în rubin gratuit

Proprietăți Flexbox- Proprietăți ale containerului Flex

Există o mulțime de modalități de grupare a proprietăților Flexbox, iar cea mai simplă modalitate de a afla despre ele este divizându-le în proprietățile Flex container și element. Tocmai am acoperit unele dintre proprietățile flexibile ale containerului de mai sus. Să ne uităm la restul:

  • Direcție flexibilă: rând sau coloană

Proprietatea de direcție flexă poate fi pusă sub formă de coloane vertical sau rânduri pe orizontală. Cu direcția rândului, elementele flex sunt stivuite de la stânga la dreapta în mod implicit. Row-reverse schimbă această direcție de la dreapta la stânga. Direcția coloanei este de sus în jos în mod implicit, iar funcția coloană inversă inversează aceasta într-o direcție de jos în sus.

  • Flex-wrap: nowrap sau wrap

Proprietatea flex-wrap controlează dacă copiii containerului flex sunt dispuse în mai multe linii sau mai multe și direcția în care sunt stivuite noile linii. Valoarea nowrap vede elementele flex afișate într-un singur rând, micșorate pentru a se potrivi cu lățimea containerului în mod implicit. Valoarea de înfășurare vede elementele flex afișate în diferite rânduri într-o direcție de la stânga la dreapta sau de sus în jos. Puteți adăuga wrap-reverse pentru a schimba și comanda. Valoarea implicită este nowrap.

  • Flex-flux

Această proprietate este, în principiu, o caracteristică rapidă pentru a stabili proprietățile de direcție flex și flex-wrap. Valoarea implicită este „rândul acum”. Exemplu:

.flex-container (

curgere flexibilă: ||

)

  • Justify conținut

Proprietatea justify-content are patru valori: flex-start pentru alinierea articolelor la partea stângă a containerului; capăt flex pentru a alinia elementele pe partea dreaptă; centru pentru a se alinia cu centrul; spațiu între pentru a alinia elementele cu o distanță egală între ele, cu primele și ultimele articole aliniate la marginile containerului; și spațiu în jurul pentru alinierea elementului flex cu spațiu egal în jurul lor, inclusiv primul și ultimul element. Flex-start este valoarea implicită.

  • Aliniere-elemente

Această proprietate are cinci valori: întinderea până la scalarea elementelor flexibile pentru a umple întreaga lățime sau înălțimea de la începutul încrucișat la capătul încrucișat al containerului; flex-start pentru a stiva elemente la începutul încrucișat; capăt flex pentru a stiva articole la capăt; centru pentru a alinia elementele cu centrul axei transversale; și linia de bază pentru a alinia elementele astfel încât liniile de bază ale acestora să fie aliniate. Stretch este valoarea implicită.

  • Aliniere conținut

Această proprietate aliniază liniile unui container flex atunci când există un spațiu suplimentar în axa transversală. Valorile sale sunt: ​​întinderea pentru a distribui spațiul după fiecare rând; flex-start pentru a stiva articole spre începutul încrucișat; capăt flexibil pentru a stiva articole către capătul transversal; centru pentru a stiva obiecte în centrul axei transversale; space-around pentru a distribui în mod egal spațiul în jurul elementelor flex. Valoarea implicită este stretch.

Proprietăți Flexbox- Proprietăți ale elementului Flex

Acum că știți despre proprietățile containerului Flexbox, să ne uităm la proprietățile articolului:

  • Ordin

Această proprietate controlează ordinea de apariție a copiilor containerului flex. În mod implicit, sunt comandate în containerul flex.

.flex-item (

Ordin: ;

)

Puteți reordona elementele flex fără a trebui să restructurați codul HTML. Valoarea implicită este zero.

  • Aliniere auto

Această proprietate permite să fie ignorată alinierea implicită a unui anumit element flex. Puteți utiliza valorile din elementele aliniate pentru această proprietate.

.flex-item (

align-self: auto | flex-start | flex-end | centru | linie de bază | întinde;

)

Valoarea automată în alinierea de sine este calculată de valoarea elementelor de aliniere din elementul părinte. Dacă elementul nu are părinte, întinderea este folosită în schimb.

Exemple de bază

Aceasta este tot ceea ce trebuie să știți pentru utilizarea layout-ului grilei CSS Flexbox. Acum este timpul să exersezi ceea ce ai învățat. Iată câteva exemple care vă arată cum se îmbină toate aceste proprietăți. Să începem cu ceva absolut simplu:

.parent (

afișare: flex;

inaltime: 300px;

)

.child (

latime: 100px;

inaltime: 100px;

marja: auto;

)

Acesta este un exemplu de centrare perfectă. Valorile înălțimii și lățimii pot fi modificate după cum doriți. Cheia aici este să setați marja pe „auto”, astfel încât containerul flexor să absoarbă automat orice spațiu suplimentar. Destul de simplu!

Acum, să trecem la adăugarea unor alte proprietăți: o listă cu șase elemente cu dimensiuni fixe care pot fi dimensionate automat. Ele trebuie distribuite uniform pe axa orizontală.

.flex-container (

afișare: flex;

justifica-continut: spatiu-in jur;

)

În continuare, să încercăm să centrăm o navigare pe linia dreaptă pentru ecrane de dimensiuni medii și să o facem pe o singură coloană pe dispozitive mici.

/ * Mare * /

.navigation (

afișare: flex;

flex-flow: înveliș pe rând;

justifica-continut: flex-end;

)

/ * Ecrane medii * /

@media all și (lățime maximă: 800px) (

.navigation (

justifica-continut: spatiu-in jur;

)

)

/ * Ecrane mici * /

@media all and (max-width: 500px) (

.navigation (

direcție flexă: coloană;

)

)

E timpul să faceți acest pas mai departe! Haideți să încercăm un aspect mobil-prim cu trei coloane, cu un subsol și un antet cu lățime completă și independent de ordinea sursei.

.wrapper (

afișare: flex;

flex-flow: înveliș pe rând;

)

/ * Spunem tuturor articolelor ca lățime de 100% * /

.header, .main, .nav, .aside, .footer (

flex: 1 100%;

)

/ * Ne bazăm pe comanda sursă pentru prima abordare mobilă * /

/ * Ecrane medii * /

@media all și (min-lățime: 600px) (

.aside (flex: 1 auto; )

)

/ * Ecrane mari * /

@media all și (lățime min: 800px) (

.main (flex: 2 0px; )

.aside-1 (comanda: 1; )

.main (comanda: 2; )

.aside-2 (comanda: 3; )

.footer (comanda: 4; )

)

Concluzie

Acestea sunt doar câteva exemple de bază. Puteți juca mult mai mult cu machete grilă CSS Flexbox și sunt absolut neprețuite dacă doriți să creați o pagină web cu răspuns.

Articole recomandate

Iată câteva articole care vă vor ajuta să obțineți mai multe detalii despre proprietățile flexbox-ului, codul flexbox și, de asemenea, despre grila flexbox-ului CSS, așa că treceți prin linkul care este dat mai jos.

  1. HTML vs XML - diferențe de top
  2. CSS3 vs CSS - Cum sunt ele diferite? (Infograph)
  3. Diferențe de top HTML vs CSS
  4. HTML5 vs Flash

Categorie:

Instrumente de dezvoltare web