Aspect folosind CSS Flexbox. Aspect folosind CSS Flexbox Fragment al aspectului secțiunii cu un formular

Pe scurt, aspectul cu Flexbox ne oferă solutii simple cândva sarcini 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 cel mai mult elegant parametri diferiți elementele din interiorul containerului: direcția, ordinea, lățimea, înălțimea, alinierea de-a lungul și transversal, distribuția spațiului liber, întinderea și comprimarea elementelor.

Cunostinte de baza

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

Pentru a activa flexbox, oricine element HTML doar atribuiți 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 ar trebui să ne gândim 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ă, există 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 regulile css pentru a controla întregul design flexibil. 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 se întinde pe toată lățimea și are întregul său spațiu 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 ajuta la scrierea mai puțin de 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: coloana , atunci rândurile se mișcă orizontal → iar 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-in jur, doar distanta dintre elementele exterioare si 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ă se umple loc liberîntr-un recipient.

Creștere flexibilă implicită: 0

Dacă specificați flex-grow:1 pentru toate elementele, atunci toate se vor întinde în mod egal și se 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 finală 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: content */ 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ția, poziția) 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 absolute ale containerului nu participă la construcția flexibilă... Aceasta înseamnă că flex-basis nu afectează elementele flexibile ale unui container dacă acestea 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 asta pentru o citire ușoară a css. Prin urmare, vezi exemple în ultimele versiuni Chrome sau Firefox.

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

Să începem de la bun început exemplu simplu- aliniere verticală și orizontală simultan și la orice înălțime de bloc, chiar și cauciuc.

Text în mijloc

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

Text în mijloc

#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ă.

Acasă Despre noi Produse Contacte

# 3 Adaptive 3 coloane

Acest exemplu arată cum să faceți 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 necesită încă 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; -webkit-box-direction:normal; -ms-flex-direction:coloană; flex-direction:coloană; -ms-flex-wrap:wrap; flex-wrap:wrap; -ms -flex-flow:column wrap; flex-flow:coloan wrap; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; -ms-flex-line-pack: distribuie; align-content:space-around; ) /* Elemente */ .flex-item ( -webkit-box-flex:1; -ms-flex-positive:1; flex-grow:1; -ms-flex- negativ:2; flex-shrink:2; -ms-flex-preferred-size:100px; flex-basis:100px; -ms-flex:1 2 100px; flex:1 2 100px; -ms-flex-item-align :center; align-self:center; -webkit-box-ordinal-group:3; -ms-flex-order:2; ordine: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) - vechea sintaxă 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 constructor vizual de cod flexibil.

Aș dori să vorbesc despre FlexBox. Modul Flexbox-layout (cutie flexibilă - „bloc flexibil”, activat acest moment Recomandarea candidaților W3C își propune să ofere mai mult metoda eficienta aspectul, alinierea și distribuția spațiului liber între elementele dintr-un container, chiar și atunci când dimensiunea acestora este necunoscută și/sau dinamică (de unde și cuvântul „flexibil”).

Ideea principală a aspectului flexibil este de a oferi containerului capacitatea de a modifica lățimea/înălțimea (și ordinea) elementelor sale pentru a umple mai bine spațiul (în majoritatea cazurilor, pentru a suporta toate tipurile de afișaje și dimensiuni de ecran).Un container flexibil întinde elementele pentru a umple spațiul sau le comprimă pentru a preveni revărsarea acestora.

Cel mai important, aspectul flexbox nu depinde de direcție, spre deosebire de layout-urile convenționale (blocuri dispuse vertical și elemente inline dispuse orizontal).În timp ce aspectul obișnuit este excelent pentru paginile web, îi lipsește flexibilitatea de a suporta aplicații mari sau complexe (mai ales când vine vorba de schimbarea orientării ecranului, redimensionare, întindere, micșorare etc.).

Deoarece flexbox este un modul întreg, nu doar o singură proprietate, ci combină multe proprietăți.Unele dintre ele trebuie aplicate containerului (elementul părinte, numit container flexibil), în timp ce alte proprietăți sunt aplicate elementelor copil sau elementelor flexibile.

În timp ce un aspect obișnuit se bazează pe direcțiile de curgere ale elementelor bloc și inline, un aspect flexibil se bazează pe „direcțiile fluxului flexibil”.

Flexbox

Practic, elementele vor fi distribuite fie de-a lungul axei principale (de la începutul principal la capătul principal), fie de-a lungul axei transversale (de la începutul transversal la capătul transversal).

main-axis — axa principală de-a lungul căreia sunt amplasate elementele flexibile.Vă rugăm să rețineți că trebuie să fie orizontal, totul depinde de calitatea conținutului justificat.
main-start | capătul principal - elementele flexibile sunt plasate în container de la poziția de pornire principală la poziția de sfârșit principal.
dimensiunea principală — lățimea sau înălțimea elementului flexibil în funcție de dimensiunea principală selectată.Cantitatea de bază poate fi fie lățimea, fie înălțimea elementului.
axa transversală - axa transversală perpendiculară pe cea principală.Direcția sa depinde de direcția axei principale.
pornire încrucișată | cross-end - liniile flexibile sunt umplute cu elemente și plasate în container din poziția de pornire transversală și poziția de capăt transversal.
dimensiune cruce — lățimea sau înălțimea elementului flexibil, în funcție de dimensiunea selectată, este egală cu această valoare.Această proprietate este aceeași cu lățimea sau înălțimea elementului in functie de dimensiunea selectata.

Proprietăți
afișaj: flex | inline-flex;

Definește un container flexibil (inline sau bloc în funcție de valoarea selectată), conectează un context flexibil pentru toți descendenții săi imediati.

afișare: alte valori | flex | inline-flex;

Ține minte:

Coloanele CSS nu funcționează cu containerul flexibilfloat, clear și vertical-align nu funcționează cu articolele flexibile

flex-direcție