Să aruncăm o privire la proprietățile specifice unui container flex — un element care are o proprietate de afișare setată la flex .

Proprietate de direcție flexibilă

Proprietatea flex-direction vă permite să controlați direcția axei principale a unui container flexibil. Această proprietate este destinată să fie aplicată containerelor și ia următoarele valori:

• rând (implicit) - direcția axei majore merge de la stânga la dreapta (ca în diagrama de mai sus) pentru localitatea LTR și de la dreapta la stânga pentru localitatea RTL.
• row-reverse - aici, dimpotrivă, direcția axei principale merge de la dreapta la stânga dacă localitatea este LTR și de la stânga la dreapta dacă localitatea este RTL.
• coloană - direcția axei principale merge de sus în jos.
• coloană-revers - direcția axei principale merge de jos în sus.

Aceste valori funcționează astfel:

Direcția rândului pentru localitatea LTR

proprietatea justificare-conținut

Puteți spune unui container flexibil modul în care copiii săi vor fi aliniați de-a lungul axei principale. De regulă, acest lucru ajută la distribuirea spațiului liber în exces dacă elementele flexibile sunt inflexibile sau flexibile, dar au atins dimensiunea maximă.

Proprietatea justify-content este aplicată containerului flexibil și ia următoarele valori:

• flex-start (implicit) - elementele flexibile sunt împinse la începutul axei principale.
• flex-end - articolele flexibile sunt împinse până la capătul axei principale.
• centru - elementele flexibile sunt centrate de-a lungul axei principale.
• space-between - primul element flexibil este la începutul axei principale, ultimul element flexibil este la sfârșit și toate celelalte elemente flexibile sunt distribuite uniform în spațiul rămas.
• spațiu în jur - toate elementele flexibile sunt distribuite uniform pe axa principală, în timp ce spațiul liber este împărțit în mod egal între ele.

Funcționarea acestor valori este ilustrată mai jos:

proprietatea align-items

Align-items este o altă proprietate aplicată unui container flexibil pentru a-și alinia copiii. Numai că de această dată alinierea are loc nu de-a lungul axei principale, ci de-a lungul celei transversale. Luați în considerare lista de valori:

• stretch (implicit) - elementele flex sunt întinse de-a lungul axei transversale (dacă sunt specificate proprietățile min-width / max-width, acestea sunt luate în considerare).
• flex-start - elementele flexibile sunt presate la începutul axei transversale.
• flex-end - elementele flexibile sunt presate pe capătul axei transversale.
• centru - elementele flexibile sunt centrate de-a lungul axei transversale.
• linie de bază - elementele flexibile sunt aliniate de-a lungul liniilor de bază.

Exemple pentru o mai bună înțelegere a informațiilor:

proprietate flex-wrap

Exemplele de mai sus au arătat exemple primitive folosind doar un rând (coloană) dintr-un container flexibil. Da, acesta este cazul implicit: un container flexibil conține o singură linie. Dar datorită proprietății flex-wrap, puteți activa mai multe linii într-un container flexibil. Proprietatea acceptă următoarele valori:

• nowrap (valoare implicită) - elementele flexibile sunt plasate pe o singură linie, de la stânga la dreapta (sau de la dreapta la stânga pentru locația RTL).
• wrap - articolele flex sunt aranjate orizontal pe mai multe rânduri (cu condiția să nu se potrivească într-un singur rând). Direcția elementelor este de la stânga la dreapta (sau de la dreapta la stânga pentru RTL).
• wrap-reverse - principiul de funcționare este identic cu proprietatea anterioară, singura diferență fiind că elementele flexibile sunt dispuse în ordine inversă.

proprietate flex-flow

Proprietatea flex-flow este în esență prescurtare pentru proprietățile flex-direction și flex-wrap. Puteți seta direcția axei principale într-o singură linie și puteți determina natura cu mai multe linii a containerului flexibil. Proprietatea specifică două valori separate printr-un spațiu: una pentru flex-direction, a doua pentru flex-wrap. Exemplu:

Flex-flow: coloană wrap-reverse;

proprietatea align-content

Această proprietate funcționează numai dacă containerul flexibil acceptă mai multe linii. Folosind align-content puteți specifica modul în care rândurile de elemente flexibile vor fi aliniate vertical. Valori disponibile:

• stretch (implicit) - un rând de articole flexibile este întins pe verticală până când atinge următorul rând (dacă sunt specificate proprietățile min-width / max-width, acestea sunt luate în considerare).
• flex-start - rândurile de articole flexibile sunt presate la începutul containerului flexibil.
• flex-end - rândurile de articole flexibile sunt presate pe capătul containerului flexibil.
• centru - rândurile de articole flexibile sunt centrate vertical în containerul flexibil.
• space-between - primul rând de articole flexibile este la începutul containerului flexibil, ultimul rând de articole flexibile este la sfârșit și toate celelalte rânduri sunt distribuite uniform în spațiul rămas.
• spațiu în jur - toate rândurile de elemente flexibile sunt distribuite uniform în spațiul vertical al containerului flexibil, în timp ce spațiul liber este împărțit în mod egal între ele.

Modulul Flexbox Layout (Flexible Box) își propune să ofere mai mult mod eficient aranjarea, alinierea și distribuția spațiului 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 în cel mai bun mod posibil umpleți spațiul disponibil (în principal pentru a se potrivi pe toate tipurile și dimensiunile de ecrane). 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.).

Nota. 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 desen 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 aspect al 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, elementele 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 ( alinierea elementelor: 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;
• linia 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

Nota. 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 recipientului, 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)

comanda

Î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 (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 lungimea (20%, 5rem, etc.) sau 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.

flex

Aceasta este prescurtarea pentru , și . Al doilea și al treilea parametri (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ă suprascrieț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. Mai simplu nu poate fi.

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 CSS (Modul cu aspect flexibil)- modul flexibil de aranjare a containerelor - este o modalitate de aranjare a elementelor, bazată pe ideea unei axe.

Flexbox este format din recipient flexibilŞi articole flexibile. Elementele flexibile pot fi aranjate pe rând sau pe coloană, iar spațiul liber rămas este distribuit între ele în diferite moduri.

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

• Aranjați elementele într-una din cele patru direcții: de la stânga la dreapta, de la dreapta la stânga, de sus în jos sau de jos în sus.
• Ignorați ordinea de afișare a elementelor.
• Dimensionează automat elementele astfel încât să se încadreze în spațiul disponibil.
• Rezolvați problema cu centrarea orizontală și verticală.
• Mutați obiectele în interiorul unui container fără a-l deborda.
• Creați coloane de aceeași înălțime.
• Creați apăsat în partea de jos a paginii.

Flexbox rezolvă probleme specifice - creând machete unidimensionale, de exemplu, o bară de navigare, deoarece elementele flexibile pot fi plasate doar de-a lungul uneia dintre axe.

Puteți citi o listă cu problemele curente ale modulelor și soluțiile între browsere pentru acestea în articolul lui Philip Walton.

Ce este flexbox

Suport pentru browser

IE: 11,0, 10,0 -ms-
Firefox: 28,0, 18,0 -moz-
Chrome: 29.0, 21.0 -webkit-
Safari: 6.1 -webkit-
Operă: 12.1 -webkit-
iOS Safari: 7.0 -webkit-
Opera Mini: 8
Browser Android: 4.4, 4.1 -webkit-
Chrome pentru Android: 44

1. Concepte de bază

Orez. 1. Model Flexbox

Un set specific de termeni este folosit pentru a descrie un modul Flexbox. Valoarea flex-flow și modul de înregistrare determină corespondența acestor termeni cu direcțiile fizice: sus / dreapta / jos / stânga, axe: verticală / orizontală și dimensiuni: lățime / înălțime.

Axa principală— axa de-a lungul căreia sunt așezate elementele flexibile. Se extinde în dimensiunea principală.

Început principal și final principal— linii care definesc laturile de început și de sfârșit ale containerului flexibil, în raport cu care sunt așezate elementele flexibile (începând de la începutul principal spre capătul principal).

Dimensiunea principală) - lățimea sau înălțimea containerului flexibil sau articolelor flexibile, în funcție de care dintre ele se află în dimensiunea principală, determină dimensiunea principală a containerului flexibil sau articolului flexibil.

Axa transversală- axa perpendiculara pe axa principala. Se extinde în dimensiune transversală.

Început încrucișat și final încrucișat— linii care definesc laturile de început și de sfârșit ale axei transversale, în raport cu care sunt așezate elementele flexibile.

Dimensiune cruce— lățimea sau înălțimea unui container flexibil sau a articolelor flexibile, oricare dintre ele se află în dimensiunea transversală, este dimensiunea lor transversală.

Orez. 2. Mod rând și coloană

2. Container flexibil

Un container Flex stabilește un nou context de formatare flexibil pentru conținutul său. Un container flexibil nu este un container bloc, astfel încât proprietățile CSS precum float , clear , vertical-align nu funcționează pentru elementele copil. De asemenea, containerul flexibil nu este afectat de proprietățile column-* care creează coloane în text și de pseudo-elemente::first-line și::first-letter .

Modelul de marcare flexbox este asociat cu o valoare specifică a proprietății de afișare CSS a elementului HTML părinte care conține blocuri copil în el. Pentru a controla elementele folosind acest model, trebuie să setați proprietatea de afișare după cum urmează:

Flex-container ( /*generează un container flex la nivel de bloc*/ display: -webkit-flex; display: flex; ) .flex-container ( /*generează un container flex la nivel de linie*/ display: -webkit-inline- flex; display: inline-flex)

După setarea acestor valori de proprietate, fiecare element copil devine automat un element flexibil, aliniat pe un rând (de-a lungul axei principale). În acest caz, elementele secundare bloc și inline se comportă la fel, de exemplu. Lățimea blocurilor este egală cu lățimea conținutului lor, ținând cont de marginile și marginile interne ale elementului.

Orez. 3. Alinierea elementelor în modelul flexbox

Dacă blocul părinte conține text sau imagini fără pachete, acestea devin elemente flexibile anonime. Textul este aliniat la marginea de sus a blocului container, iar înălțimea imaginii devine egală cu înălțimea blocului, de exemplu. este deformat.

3. Elemente flexibile

Elementele flexibile sunt blocuri care reprezintă conținutul unui container flexibil într-un flux. Se instalează containerul Flex context nou formatarea conținutului său, care determină următoarele caracteristici:

• Pentru articolele flexibile, valoarea proprietății de afișare a acestora este blocată. Valoarea afișată: inline-block; și afișare: tabel-celulă; calculat în afișaj: bloc; .
• Spațiul alb dintre articole dispare: nu devine propriul său element flexibil, chiar dacă textul interitem este împachetat într-un element flexibil anonim. Conținutul unui element flexibil anonim nu poate fi stilat, dar va moșteni stiluri (cum ar fi opțiunile de font) din containerul flexibil.
• Un element flexibil poziționat absolut nu participă la layout-ul flexibil.
• Marginile elementelor flexibile adiacente nu se prăbușesc.
• Marja procentuală și valorile de umplutură sunt calculate din dimensiunea internă a blocului care le conține.
• margine: auto; extinde, absorbind spațiu suplimentar în dimensiunea corespunzătoare. Ele pot fi folosite pentru a alinia sau împinge articole flexibile adiacente.
• Dimensiunea minimă automată implicită a elementelor flexibile este dimensiunea minimă a conținutului său, adică lățimea minimă: auto; . Pentru containerele defilabile, dimensiunea minimă automată este de obicei zero.

4. Ordinea și orientarea de afișare a articolelor flexibile

Conținutul unui container flexibil poate fi așezat în orice direcție și în orice ordine (rearanjarea elementelor flexibile în interiorul containerului afectează doar redarea vizuală).

4.1. Direcția axei principale: direcția flex

Proprietatea se referă la containerul flexibil. Controlează direcția axei principale de-a lungul căreia sunt stivuite elementele flexibile, în conformitate cu modul de scriere curent. Nu moștenit.

flex-direcție
Valori:
rând	Valoarea implicită este de la stânga la dreapta (în rtl, de la dreapta la stânga). Elementele flexibile sunt așezate pe rând. Î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	Direcția este de la dreapta la stânga (în rtl de la stânga la dreapta). Elementele flexibile sunt așezate într-o linie în raport cu marginea dreaptă a containerului (în rtl - stânga).
coloană	Direcție de sus în jos. Elementele flexibile sunt așezate într-o coloană.
coloană-invers	O coloană cu elemente în ordine inversă, de jos în sus.
iniţială
moşteni

Orez. 4. Proprietate Flex-direction pentru limbile de la stânga la dreapta

Sintaxă

Flex-container ( afișare: -webkit-flex; -webkit-flex-direction: rând-invers; afișare: flex; flex-direction: rând-reverse; )

4.2. Gestionarea containerului flexibil cu mai multe linii: flex-wrap

Proprietatea determină dacă containerul flexibil va fi cu o singură linie sau cu mai multe linii și, de asemenea, setează direcția axei transversale, care determină direcția în care vor fi așezate noile linii ale containerului flexibil.

În mod implicit, elementele flexibile sunt stivuite pe o singură linie, de-a lungul axei principale. Dacă se revarsă, se vor extinde dincolo de căsuța de delimitare a containerului flexibil. Proprietatea nu este moștenită.

Orez. 5. Control pe mai multe linii folosind proprietatea flex-wrap pentru limbile LTR

Sintaxă

Flex-container ( afișare: -webkit-flex; -webkit-flex-wrap: înfășurare; afișare: flex; flex-wrap: înfășurare; )

4.3. Un scurt rezumat al direcției și mai multor linii: flex-flow

Proprietatea vă permite să definiți direcțiile axelor principale și transversale, precum și capacitatea de a muta elementele flexibile, dacă este necesar, pe mai multe linii. Aceasta este o prescurtare pentru proprietățile flex-direction și flex-wrap. Valoarea implicită flex-flow: row nowrap; . proprietatea nu este moștenită.

Sintaxă

Flex-container ( afișare: -webkit-flex; -webkit-flex-flow: înfășurare rând; afișare: flex; flex-flow: înfășurare rând; )

4.4. Ordinea de afișare a articolelor flexibile: comandă

Proprietatea definește ordinea în care elementele flexibile sunt afișate și aranjate într-un container flexibil. Se aplică articolelor flexibile. Proprietatea nu este moștenită.

Inițial, toate articolele flexibile au ordine: 0; . Când specificați o valoare de -1 pentru un element, acesta este mutat la începutul cronologiei, iar o valoare de 1 este mutată la sfârșit. Dacă mai multe articole flexibile au aceeași valoare comandă, acestea vor fi afișate conform comenzii inițiale.

Sintaxă

Flex-container ( display: -webkit-flex; display: flex; ) .flex-item ( -webkit-order: 1; comanda: 1; )
Orez. 6. Afișați ordinea articolelor flexibile

5. Flexibilitatea elementelor flexibile

Aspectul definitoriu al unui aspect flexibil este capacitatea de a „flexa” elementele flexibile, modificându-le lățimea/înălțimea (în funcție de dimensiunea axei principale) pentru a umple spațiul disponibil în dimensiunea principală. Acest lucru se face folosind proprietatea flex. Un container flexibil distribuie spațiu liber între copiii săi (proporțional cu raportul lor de creștere flexibilă) pentru a umple recipientul sau îi micșorează (proporțional cu raportul lor de contracție flexibilă) pentru a preveni debordarea.

Un element flexibil va fi complet „inflexibil” dacă valorile sale de flex-creștere și flex-shrink sunt zero, iar „flexibil” în caz contrar.

5.1. Setarea dimensiunilor flexibile cu o singură proprietate: flex

Proprietatea este prescurtarea pentru proprietățile flex-grow, flex-shrink și flex-base. Valoare implicită: flex: 0 1 auto; . Puteți specifica una sau toate cele trei valori de proprietate. Proprietatea nu este moștenită.

Sintaxă

Flex-container ( display: -webkit-flex; display: flex; ) .flex-item ( -webkit-flex: 3 1 100px; -ms-flex: 3 1 100px; flex: 3 1 100px; )

5.2. Factorul de creștere: flex-grow

Proprietatea determină rata de creștere a unui element flexibil în raport cu alte elemente flexibile din containerul flexibil atunci când se distribuie spațiu liber pozitiv. Dacă suma valorilor flex-grow ale elementelor flex într-un rând este mai mică de 1, acestea ocupă mai puțin de 100% din spațiul liber. Proprietatea nu este moștenită.

Orez. 7. Gestionați spațiul barei de navigare cu Flex-Grow

Sintaxă

Flex-container ( display: -webkit-flex; display: flex; ) .flex-item ( -webkit-flex-grow: 3; flex-grow: 3; )

5.3. Raport de compresie: flex-shrink

Proprietatea specifică raportul de compresie al unui element flexibil în raport cu alte elemente flexibile atunci când se distribuie spațiu liber negativ. Înmulțit cu dimensiunea bazei flexibile. Spațiul negativ este alocat proporțional cu cât de mult se poate micșora elementul, astfel încât, de exemplu, un articol flexibil mic nu se va micșora până la zero până când un element flexibil mai mare este micșorat vizibil. Proprietatea nu este moștenită.

Orez. 8. Îngustarea articolelor flexibile într-un rând

Sintaxă

Flex-container ( display: -webkit-flex; display: flex; ) .flex-item ( -webkit-flex-shrink: 3; flex-shrink: 3; )

5.4. Dimensiune de bază: flex-base

Proprietatea setează dimensiunea de bază inițială a unui articol flexibil înainte de a aloca spațiu liber în funcție de factorii flexibili. Pentru toate valorile, cu excepția auto și conținut, dimensiunea flexibilă de bază este definită la fel ca lățimea în modurile de scriere orizontală. Valorile procentuale sunt definite în raport cu dimensiunea containerului flexibil, iar dacă nu este specificată nicio dimensiune, valoarea utilizată pentru flex-basis este dimensiunile conținutului acestuia. Nu moștenit.

Sintaxă

Flex-container ( display: -webkit-flex; display: flex; ) .flex-item ( -webkit-flex-basis: 100px; flex-basis: 100px; )

6. Alinierea

6.1. Alinierea axei principale: justificare-conținut

Proprietatea aliniază articolele flexibile de-a lungul axei principale a containerului flexibil, distribuind spațiul liber neocupat de articolele flexibile. Când un articol este convertit într-un container flexibil, elementele flexibile sunt grupate împreună în mod implicit (cu excepția cazului în care au marje setate). Lacunele sunt adăugate după calcularea marjei și a valorilor flex-grow. Dacă vreun element are un flex-grow sau o marjă diferită de zero: auto; , proprietatea nu va avea efect. Proprietatea nu este moștenită.

Valori:
flex-start	Valoare implicită. Elementele flexibile sunt așezate într-o direcție pornind de la linia de pornire a containerului flexibil.
flex-end	Articolele flexibile sunt așezate în direcția de la linia de capăt a containerului flexibil.
centru	Articolele flexibile sunt aliniate la centrul containerului flexibil.
spațiu-între	Elementele flexibile sunt distribuite uniform de-a lungul liniei. Primul element flexibil este plasat la același nivel cu marginea liniei de început, ultimul element flexibil este plasat la același nivel cu marginea liniei de capăt, iar elementele flexibile rămase de pe linie sunt distanțate astfel încât distanța dintre oricare două elemente adiacente să fie aceeași. Dacă spațiul liber rămas este negativ sau există un singur element flexibil pe linie, această valoare este identică cu parametrul flex-start.
spatiu-in jur	Elementele flexibile de pe linie sunt distribuite astfel încât distanța dintre oricare două elemente flexibile adiacente să fie aceeași, iar distanța dintre primele/ultimele elemente flexibile și marginile containerului flexibil să fie jumătate din distanța dintre elementele flexibile.
iniţială	Setează valoarea proprietății la valoarea implicită.
moşteni	Moștenește valoarea proprietății de la elementul părinte.

Orez. 9. Alinierea elementelor și distribuirea spațiului liber folosind proprietatea justify-content

Sintaxă

Flex-container ( afișare: -webkit-flex; -webkit-justify-content: flex-start; afișare: flex; justificare-conținut: flex-start; )

6.2. Alinierea axelor transversale: align-items și align-self

Articolele flexibile pot fi aliniate de-a lungul axei transversale a rândului curent al containerului flexibil. align-items setează alinierea pentru toate elementele containerului flexibil, inclusiv elementele flexibile anonime. align-self vă permite să anulați această aliniere pentru elementele flexibile individuale. Dacă oricare dintre marginile încrucișate ale elementului flex este setată la auto , align-self nu are niciun efect.

6.2.1. Alinierea elementelor

Proprietatea aliniază elementele flexibile, inclusiv elementele flexibile anonime, de-a lungul axei transversale. Nu moștenit.

Valori:
flex-start
flex-end
centru
linia de bază	Liniile de bază ale tuturor elementelor flexibile implicate în aliniere sunt aceleași.
întinde
iniţială	Setează valoarea proprietății la valoarea implicită.
moşteni	Moștenește valoarea proprietății de la elementul părinte.

Orez. 10. Alinierea elementelor dintr-un container pe verticală

Sintaxă

Flex-container ( afișare: -webkit-flex; -webkit-align-items: flex-start; afișare: flex; align-items: flex-start; )

6.2.2. Aliniați-vă

Proprietatea este responsabilă pentru alinierea unui singur element flexibil la înălțimea containerului flexibil. Ignoră alinierea specificată de align-items . Nu moștenit.

Valori:
auto	Valoare implicită. Un element flexibil folosește alinierea specificată în proprietatea align-items a containerului flexibil.
flex-start	Marginea superioară a elementului flexibil este plasată adiacent liniei de flexibilitate (sau la o distanță, ținând cont de marginile și marginile specificate ale elementului) care trece prin începutul axei transversale.
flex-end	Marginea de jos a elementului flexibil este plasată adiacent liniei de flexibilitate (sau la o distanță, ținând cont de marginile și marginile specificate ale elementului) care trece prin capătul axei transversale.
centru	Marginea unui element flexibil este centrată de-a lungul axei transversale în cadrul liniei flexibile.
linia de bază	Elementul flexibil este aliniat la linia de bază.
întinde	Dacă dimensiunea încrucișată a unui articol flexibil este automată și niciuna dintre valorile sale încrucișate nu este automată, articolul este întins. Valoare implicită.
iniţială	Setează valoarea proprietății la valoarea implicită.
moşteni	Moștenește valoarea proprietății de la elementul părinte.

Orez. 11. Alinierea elementelor flexibile individuale

Sintaxă

Flex-container ( display: -webkit-flex; display: flex; ) .flex-item ( -webkit-align-self: centru; align-self: centru; )

6.3. Alinierea liniilor unui container flexibil: align-content

Proprietatea aliniază liniile într-un container flexibil dacă există spațiu suplimentar pe axa transversală, similar alinierii elemente individuale pe axa principală folosind proprietatea justify-content. Proprietatea nu afectează un container flexibil cu o singură linie. Nu moștenit.

Valori:
flex-start	Rândurile sunt stivuite spre începutul containerului flexibil. Marginea primei linii este plasată aproape de marginea containerului flexibil, fiecare linie ulterioară este plasată aproape de linia anterioară.
flex-end	Rândurile sunt stivuite spre capătul containerului flexibil. Marginea ultimei linii este plasată aproape de marginea containerului flexibil, fiecare linie anterioară este plasată aproape de linia următoare.
centru	Rândurile sunt stivuite spre centrul containerului flexibil. Rândurile sunt apropiate și aliniate la centrul containerului flexibil, cu o distanță egală între marginea de început a conținutului containerului flexibil și primul rând și între marginea de sfârșit a conținutului containerului flexibil și ultimul rând.
spațiu-între	Rândurile sunt distribuite uniform în containerul flexibil. Dacă spațiul liber rămas este negativ sau există o singură linie flexibilă în containerul flexibil, această valoare este identică cu flex-start . În caz contrar, marginea primei linii este plasată aproape de marginea de început a conținutului containerului flexibil, iar marginea ultimei linii este plasată aproape de marginea de capăt a conținutului containerului flexibil. Liniile rămase sunt distribuite astfel încât distanța dintre oricare două linii adiacente să fie aceeași.
spatiu-in jur	Liniile sunt distanțate uniform în containerul flexibil, cu jumătate de spațiu la ambele capete. Dacă spațiul liber rămas este negativ, această valoare este identică cu centrul centrului. În caz contrar, liniile sunt distribuite astfel încât distanța dintre oricare două linii adiacente să fie aceeași, iar distanța dintre primele/ultimele linii și marginile conținutului containerului flexibil să fie jumătate din distanța dintre linii.
întinde	Valoare implicită. Rândurile de articole flexibile se întind uniform pentru a umple 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, mărind dimensiunea laterală a acestora.
iniţială	Setează valoarea proprietății la valoarea implicită.
moşteni	Moștenește valoarea proprietății de la elementul părinte.

Orez. 12. Alinierea pe mai multe linii a articolelor flexibile

Sintaxă

Flex-container ( afișare: -webkit-flex; -webkit-flex-flow: împachetare rând; -webkit-align-content: flex-end; afișare: flex; flex-flow: împachetare rând; align-content: flex-end ; înălțime: 100px)

În acest articol, vom introduce tehnologia CSS Flexbox, concepută pentru a crea machete flexibile de pagini web.

Scopul CSS Flexbox

CSS Flexbox este pentru crearea de layout-uri flexibile. Folosind această tehnologie, poți aranja foarte simplu și flexibil elementele într-un container, să distribui spațiul disponibil între ele și să le aliniezi într-un fel sau altul, chiar dacă nu au dimensiuni specifice.

CSS Flexbox vă permite să creați design receptiv mult mai ușor decât utilizarea Float și poziționare.

Flexbox poate fi folosit atât pentru marcarea CSS a unei pagini întregi, cât și pentru blocurile sale individuale.

Suport pentru browser pentru CSS Flexbox

CSS Flexbox este acceptat de toate browserele moderne utilizate în prezent (folosind prefixe: IE10+, Edge12+, Firefox 2+, Chrome 4+, Safari 3.1+, Opera 12.1+, iOS Safari 3.2, Opera mini, Android 2.1+, Blackberry 7+) .

Bazele CSS Flexbox

Crearea marcajului CSS folosind Flexbox începe prin setarea proprietății de afișare CSS a elementului HTML necesar la flex sau flex-inline .

După aceasta, acest element devine un container flexibil și toate acestea direct elementele copil sunt elemente flexibile. Mai mult, atunci când vorbim despre flexbox, ne referim doar la un element cu display:flex sau display:flex-inline și toate elementele direct situat în el. Astfel, în CSS Flexbox există doar două tipuri de elemente: un container flex și un element flex.

Proprietățile de prefix și lățime maximă au fost adăugate la CSS pentru a accepta aspectul în majoritatea browserelor.

Pentru a „transforma” un bloc într-un container flexibil, utilizați clasa de rând. Setarea lățimii elementelor flex .col__article și .col__aside în interiorul unui container flex se face folosind proprietatea flex CSS.

De exemplu, să marcăm un alt subsol folosind flexbox și să creăm un bloc format din trei elemente în elementul .col__article (lățimea minimă a unui element este de 300 px). Vom plasa patru blocuri în subsol (lățimea minimă a unui bloc este de 200px).

CSS3-flexbox este o tehnologie specială care a fost introdusă în ultima versiune stiluri în cascadă, care vă permite să setați o grilă flexibilă de blocuri în interiorul unui container părinte.

Ce oportunități oferă această grilă:

• capacitatea de a controla structura de coloane a cadrului principal de layout HTML;
• controlați orientarea locației etichetelor html similare cu aspectul tabelului;
• gestionează ordinea de aranjare;
• si multi altii.

Tehnologia css-flexbox în sine se bazează pe blocuri de bază în axele orizontale și verticale relative, conform următoarei scheme:

Navigare

Iată o listă de browsere web care acceptă proprietatea bloc în cauză, atât standard, cât și cu utilizarea de prefixe speciale:

IE: 11,0, 10,0 -ms-
Firefox: 28,0, 18,0 -moz-
Crom: 29.0, 21.0 -webkit-
Safari: 6.1 -webkit-
Operă: 12.1 -webkit-
Safari (pe Mac): 7.0 -webkit-
Opera Mini: 8
Browser Android: 4.4, 4.1 -webkit-
Chrome (pentru Android): 44

1.1. proprietate de afișare: flex

Regula CSS este concepută pentru a construi o grilă flexbox, care este construită din etichete html copii situate în interiorul unui container părinte. Pentru a seta această grilă, trebuie să setați regula de afișare la:

• display: flex; — pentru afișarea blocurilor;
• display: inline-flex; — pentru afișare inline.

Trebuie remarcat faptul că pentru unele versiuni de browsere este necesar să specificați această regulă folosind prefixe speciale (a se vedea punctul de mai sus) și, de asemenea, că etichetele html care se află în părinte fără un wrapper sunt considerate anonime:

1.2. Aliniați conținutul justificat pe orizontală

Regula este folosită pentru a alinia orizontal obiecte copil într-un container flexbox părinte. Această regulă nu mostenit.

justifica-conținut
Valori:
flex-start	Se aliniază la marginea stângă. Valoare implicită
flex-end	Se aliniază la marginea dreaptă.
centru	Se aliniază la mijloc.
spațiu-între	Pe toată lățimea părintelui în segmente de dimensiuni egale. Este de remarcat faptul că primul element se potrivește la marginea stângă fără goluri, dar ținând cont de căptușeală, iar ultimul, de asemenea, dar la marginea dreaptă. pe toți ceilalți elemente de bloc sunt plasate între primul și ultimul prin segmente egale de gol.
spatiu-in jur	Pe toată lățimea, astfel încât între fiecare două blocuri să existe aceeași indentare și jumătate de-a lungul marginilor.
iniţială	Setarea valorii implicite.
moşteni

Format de înregistrare

B-podlogka ( înălțime: 120px; culoarea fundalului: #ddd; margine: 0px; umplutură: 10px; afișare: flex; afișare: -webkit-flex; justificare-conținut: flex-start; -webkit-justify-conținut: flex -început;

B-podlogka ( justificare-conținut: flex-end; )

B-podlogka ( justificare-conținut: centru; )

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

B-podlogka (justificare-conținut: spațiu-în jur; )

1.3. Elemente de aliniere de aliniere verticală

Proprietatea este utilizată pentru a alinia vertical obiectele copil din containerul flexbox părinte. Trebuie remarcat faptul că și articolele flexibile anonime se încadrează în această aliniere. Această regulă nu este moștenită. Doar blocurile din primul rând sunt aliniate.

alinierea elementelor
Valori:
întinde	Blocurile Flexbox, dacă înălțimea nu este fixă, sunt întinse pe toată înălțimea containerului părinte. Acesta este parametrul inițial (de bază).
flex-start	Proiectat pentru a alinia articolele flexbox de-a lungul marginii superioare a containerului părinte, ținând cont de căptușeala internă.
flex-end	Conceput pentru a alinia articolele flexbox de-a lungul marginii inferioare a containerului părinte, ținând cont de căptușeala internă.
centru	Aliniază blocurile flexibile copii dintr-un container flexibil la linia centrală a blocului cel mai înalt.
linia de bază	Aliniază casetele flexibile secundare din caseta părinte în raport cu linia centrală a textului din acele casete.
iniţială
moşteni	Intenționat să spună interpretului CSS că valoarea ar trebui luată din eticheta părinte.

Format de înregistrare

B-podlogka ( align-items: stretch; -webkit-align-items: stretch; )

Trebuie remarcat faptul că pentru ca blocurile flex pentru copii să se întindă pe toată înălțimea containerului, este necesar ca acestea să nu aibă un set de înălțime fix: înălțime: auto; .

B-podlogka ( alinierea elementelor: flex-start; )

B-podlogka ( alinierea elementelor: flex-end; )

B-podlogka ( elemente de aliniere: centru; )

B-podlogka ( elemente de aliniere: linie de bază; )

1.4. Orientarea axei principale flex-direction

Folosit pentru a seta orientarea (direcția) blocurilor flexibile care urmează unul pe celălalt. În conformitate cu standardele stabilite, orientarea poate fi de două tipuri: verticală (într-o coloană, implicit?) și orizontală (în rând, implicit?).

Format de înregistrare

B-podlogka ( direcție flex: rând; -webkit-direcție flex: rând; )

B-podlogka ( flex-direcție: rând-reverse; )

B-podlogka (direcție flexibilă: coloană; )

B-podlogka ( flex-direcție: coloană-invers; )

1.5. Plasarea mai multor linii de flex-wrap

Responsabil pentru plasarea blocurilor flex pentru copii pe una sau mai multe linii.

flex-wrap
Valori:
nowrap	În starea inițială, toate elementele copil sunt plasate pe o singură linie (? sau? în funcție de orientarea textului selectat).
înfășura	La setarea acestui parametru, elementele copil vor ocupa mai multe linii în funcție de lățimea părintelui (? sau ? în funcție de orientarea textului selectat).
înfășurare-invers	La setarea acestui parametru, articolele copil vor ocupa mai multe linii în funcție de lățimea părintelui, având în același timp o ordine inversă de alternanță.
iniţială	Va fi setat la valoarea inițială.
moşteni	Intenționat să spună interpretului CSS că valoarea ar trebui luată din eticheta părinte.

Format de înregistrare

B-podlogka ( flex-wrap: wrap; -webkit-flex-wrap: wrap; )

B-podlogka ( flex-wrap: wrap-reverse; )

1.6. Direcționalitate și mai multe linii cu o singură regulă de curgere flexibilă

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

Format de înregistrare

B-podlogka ( flex-flow: înfăşurare rând; -webkit-flex-flow: înfăşurare rând; )

1.7. Aliniați vertical în toate liniile aliniere-conținut

Această regulă CSS este utilizată pentru a alinia vertical blocurile flexibile copil intra-container. Pentru ca această regulă să funcționeze, containerul părinte trebuie să aibă următoarele setări: înălțime și flux flexibil. Nu este moștenire.

alinierea-conținut
Valori:
întinde	Întinderea elementelor la înălțimea completă a containerului părinte (blocurile flexibile nu trebuie să aibă o înălțime fixă).
flex-start	Se aliniază în partea de sus.
flex-end	Se aliniază în partea de jos.
centru	Se aliniază vertical la centru.
spațiu-între	Aliniază vertical elementele intra-container astfel încât prima linie de blocuri să fie presată în sus, ultima linie în jos, iar spațiul dintre restul să fie distribuit uniform.
spatiu-in jur	Aliniază vertical elementele intra-container astfel încât distanța la început, la sfârșit și între ele să fie egală.
iniţială	Va fi setat la valoarea inițială.
moşteni	Opțiune de a spune interpretului CSS că valoarea ar trebui luată din eticheta părinte.

Exemplu de cod

B-podlogka (înălțime: 120 px; flex-flow: row wrap; align-content: stretch; )

B-podlogka ( align-content: flex-start; )

B-podlogka ( align-content: flex-end; )

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

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

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

Pe lângă regulile care se aplică containerului părinte, o grilă flexbox are mai multe reguli care se aplică elementelor secundare. Să le aruncăm o privire mai atentă.

2.1. Comanda blochează comanda

Regula CSS este folosită pentru a ordona un element flex copil într-un părinte flex. Pentru a plasa un bloc ca primul, trebuie specificat ca 1 și pentru a-l muta până la capăt -1. Nu este moștenire.

Format de înregistrare

B-div1 ( -webkit-order: 1; ordine: 1; )

B-div5 ( -webkit-order: -1; comanda: -1; )

2.2. Flex-block baz flex-baze

O regulă CSS concepută pentru a fixa lățimea unei casete flexibile copil în interiorul containerului părinte. Setați să declanșeze doi parametri de bază. Nu este o regulă moștenită.

Exemplu de cod

B-div3 ( flex-basis: 70px; -webkit-flex-basis: 70px; )

Toate blocurile primesc o bază de cincizeci de pixeli, iar celui de-al treilea are o bază de nouăzeci de pixeli.