Puterea incredibilă a Flexbox

Sep 11, 2025
să

Flexbox sau Flexible Box Layout-ul este un modul puternic de aspect CSS, care oferă designerilor web și dezvoltatorilor o modalitate eficientă și simplă de a stabili, alinia și distribui elemente într-un recipient. Rezolvă multe probleme de aspect pe care le-am luptat pentru a rezolva o lungă perioadă de timp.

Bazele FlexBox

În forma sa cea mai de bază, Flexbox este alcătuită din două elemente: un container Flex (sau Flex Parent) și elemente flexibile (copii Flex). Un recipient flexibil este un element care conține (ca a div ) Având în vedere proprietatea afișată contracta . Elementele flexibile sunt elemente copil ale unui container Flex, care pot fi manipulate prin diferite proprietăți de afișare.

Flex containere și elemente flexibile fiecare au o gamă proprie de proprietăți care pot fi combinate în moduri diferite de a crea o serie de aspecte complexe. Elementele din interiorul unui recipient flexic pot fi stabilite orizontal sau vertical, aliniate și distribuite în diferite moduri și întinse sau scăzute pentru a se potrivi spațiului disponibil. Toate aceste opțiuni vă permit să creați cu ușurință layout-uri receptive.

Cum se utilizează Flexbox

Pentru a începe să utilizați Flexbox, trebuie să creați mai întâi recipientul Flex (elementul părinte care va conține elementele dvs. Flex). În acest exemplu, vom folosi a div bloc. Înainte de a modela elementul, să adăugăm încă trei div blochează în interiorul containerului nostru flexibil pentru a acționa ca elemente flexibile. În acest moment, elementele vor fi stivuite.

Cu copilul nostru Divs în loc, putem seta proprietatea de afișare a containerului părinte contracta . 

 Flex container {
Afișaj: Flex;
}

Direcții de layout

Direcția Layout este pur și simplu direcția pe care elementele voastre le vor distribui. Direcția implicită a unui container Flex este rând , care va afișa elementele copilului orizontal. Puteți comuta aspectul la verticală prin setarea direcției la coloană . 

 Flex container {
Afișaj: Flex;
Direcția Flex: rând;
}

Flex container {
Afișaj: Flex;
Flex-direcție: coloană;
}

Indiferent de direcția pe care ați stabilit-o pe recipientul dvs. Flex este denumită direcție "principală", în timp ce cealaltă direcție pe care nu ați ales-o devine direcția "încrucișată". Astfel, în mod implicit, direcția principală va fi orizontală, iar direcția încrucișată va fi verticală.

Flexbox vă permite, de asemenea, să inversați aspectul. Când sunt inversați, copiii unui container Flex vor fi așezați la dreapta la stânga (dacă direcția este rând ) sau de jos în sus (dacă direcția este coloană ). 

 Flex container {
Afișaj: Flex;
Direcția Flex: Row-Reverse;
}

Flex container {
Afișaj: Flex;
Direcția Flex: Înversarea coloanei;
}

Acest lucru poate veni la îndemână dacă doriți să inversați aspectul pe ecrane mai mici.

De exemplu, să spunem pe ecranele desktop pe care doriți să le afișați textul din partea stângă a ecranului și o imagine din dreapta (consultați imaginea de surfboard de mai sus). Pe Mobile, acest lucru ar muta imaginea sub text. Prin inversarea direcției, puteți să vă asigurați că imaginea apare deasupra textului.

Ajustați alinierea

Setările Flexbox vă oferă, de asemenea, două metode diferite pentru alinierea conținutului: vertical și orizontal. Iată opțiunile de aliniere orizontale pentru elementele din interiorul unui container Flex:

Flex-start. : Elemente stabilite spre începutul rândului (stânga, dacă nu ați inversat aspectul)

centru : Elementele centrate în rând

Flex-end. : Elemente stabilite spre sfârșitul rândului (dreapta, dacă nu ați inversat aspectul)

spațiu - între : Elementele distribuite uniform de-a lungul rândului

spațiu-în jurul valorii de : Elementele distribuite uniform de-a lungul rândului, cu spațiu egal pe ambele părți ale fiecărui element

Deci, codul ar putea arăta astfel: 

 Flex container {
Afișaj: Flex;
Direcția Flex: rând;
Align-Content: Flex-Start | Flex-end | Centrul | spațiu-între | spațiu-în jurul întinde;
}

Iată opțiunile de aliniere verticală pentru elementele dintr-un container Flex:

Flex-start. : Elemente aliniate la partea de sus a rândului

centru : Elementele sunt centrate în rândul rândului

Flex-end. : Elemente aliniate la partea de jos a rândului

întinde : Elemente întinse peste înălțimea rândului

de bază : Elemente aliniate la liniile lor de bază (linia imaginară pe care o stabilește textul)

Codul ar putea arăta astfel: 

 Flex container {
Afișaj: Flex;
Direcția Flex: rând;
Align-elemente: Flex-Start | Flex-end | Centrul | Linia de bază | întinde;
}

În mod implicit, un copil Flex Container vor încerca întotdeauna să se potrivească pe o singură linie. Dacă doriți să modificați acest lucru, puteți adăuga Wrap. atribut. Acest lucru permite copiilor să se înfășoare la o linie nouă dacă vor ieși din spațiu. 

 Flex container {
Afișaj: Flex;
Flex-Wrap: Înfășurați;
}

Elementele flexibile primesc propriile proprietăți bazate pe flexibile. Atunci când un element este plasat în interiorul unui recipient Flex, acesta devine automat un copil Flex și i se acordă propriul set de stiluri CSS bazate pe Flex. Aceste stiluri controlează dimensionarea, alinierea și ordinea afișării.

Flex de dimensionare

Copiii Flex pot modifica lățimea sau înălțimea (în funcție de direcția aspectului containerului) pentru a umple spațiul disponibil.

Webflow vă oferă trei opțiuni presetate pentru dimensionarea flexibilă: reduceți, dacă este necesar, umpleți spațiul gol și nu vă micșorați. Rețineți că fiecare element copil poate avea propriile sale setări, ceea ce permite o multitudine de opțiuni de proiectare. 

 Flex item {
Flex-Shrink: & Lt; număr & gt;
Flex-cresc:

Să aruncăm o privire la ceea ce face fiecare dintre aceste opțiuni:

  • Scade dacă este necesar: Dimensionează elementul bazat pe lățimea / înălțimea sau conținutul său. Elementul nu va crește mai mare decât trebuie, dar poate să se micșoreze la dimensiunea minimă pentru a preveni depășirea
  • Umpleți spațiul gol: Permite elementului să se extindă pentru a umple întregul spațiu disponibil în interiorul părintelui său. Dacă setați acest lucru pe toate elementele într-un recipient Flex, se vor extinde pentru a prelua cantități egale de spațiu gol
  • Nu vă micșorați: Dimensionează elementul bazat pe lățimea / înălțimea sau conținutul său, dar nu le permite să se micsoreze, chiar dacă aceasta va provoca overflow

Elementele Flex pot avea, de asemenea, propriile lor setări de aliniere, care depășesc alinierea implicită stabilită de containerul lor de flexibil al părintelui. Aceste alinieri se comportă așa cum s-a explicat anterior. 

 Flex item {
Afișaj: Flex;
Direcția Flex: rând;
Align-elemente: Flex-Start | Flex-end | Centrul | Linia de bază | întinde;
}

În mod prestabilit, se afișează elementele Flex în aceeași ordine în care apar în codul sursă. Cu Flexbox, puteți suprascrie acest comportament pentru a vă asigura afișarea elementelor exact în ordinea dorită.

Sunt patru opțiuni principale pe care le puteți utiliza aici:

  • Auto : Valoarea implicită, care comentează elemente așa cum sunt în sursă
  • Primul : Postul apare mai întâi în recipientul său Flex
  • Ultimul : Elementul apare ultima în containerul său flexibil
  • Personalizat : Puteți personaliza comanda pe care elementul dvs. va fi afișat în

Comanda personalizată poate fi definită ca număr, care specifică ordinea în care elementul Flex apare în interiorul unui container Flex. 

 Flex item {
Comandă: & Lt; Integer & Gt;
}

De ce ar trebui să o folosesc?

Mă bucur că ați întrebat! Utilizarea Flexbox vă permite să creați cu ușurință layout-uri receptive care au fost o dată foarte dificile (sau imposibile) de a crea cu module mai vechi de aspect CSS.

Aruncați o privire la exemplele din imaginea de mai jos - multe dintre care probabil ați văzut deja pe web. Aproape toate acestea ar lua o cantitate considerabilă de CSS (în special pe diferite dimensiuni ale ecranului), dar luați doar câteva linii simple pentru a obține cu Flexbox. Pentru a vedea aceste exemple în acțiune, vizitați Flexbox.Webflow.com. .

să - Cele mai populare articole

Cum să obțineți scară în picturile dvs.

să Sep 11, 2025

În acest tutorial vom trece peste câteva principii de bază care vor ajuta la comunicarea ideii de scară largă în piesele voastre. Folosesc creioane și uleiuri pentru acest tutorial, da..

10 Reguli pentru realizarea formularelor web prietenoase

să Sep 11, 2025

În ciuda evoluției interacțiunii cinematografice umane, formele rămân încă una dintre cele mai importante tipuri de intera..

Creați o perie de plasă de deplasare vectorială

să Sep 11, 2025

Nu ratați Vertex 2018. , evenimentul nostru de debut pentru comunitatea CG. Ambalat cu d..

Creați mișcare dinamică într-o compoziție

să Sep 11, 2025

Înainte de a începe desenul, este important să decideți ce tip de mișcare doriți să capturați. Încercați să o păstra�..

Începeți cu HTML Canvas

să Sep 11, 2025

HTML & LT; CANVAS & GT; Elementul este o soluție puternică pentru crearea grafică bazată pe pixeli pe web utilizând ..

Tutorial text 3D pentru designeri grafici

să Sep 11, 2025

Pagina 1 din 2: Noțiuni de bază cu Cinema 4D Noțiuni de bază cu Cinem..

Creați un efect de apă de turnare în Realflow

să Sep 11, 2025

Acest tutorial vă arată cum să simulați un efect de turnare lichid. Există diverse software și pluginuri pe care le puteți..

Cum se creează părul în stil de manga în mișcare

să Sep 11, 2025

Învăţare Cum de a desena manga nu este o fetiță ușoară. Deci, pentru a ușura ușor posibil, urmărim un simplu proces pas cu pas care utilizează mișcarea, forma, culo..

Categorii