Creați machete Flexbox perfecte

Vizualizați, personalizați și generați cod CSS flexbox cu interfața noastră intuitivă drag-and-drop.

Proprietățile containerului

Proprietățile articolului

3 items

Preview

Item 1
Item 2
Item 3
.flex-container { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; align-content: stretch; }  .flex-item { /* Default item styles */ flex: 0 1 auto; order: 0; align-self: auto; }
Cod CSS generat

Presetări populare Flexbox

Centrați pe orizontală și pe verticală

Content

Perfect pentru centrarea unui logo, buton sau orice element atât pe orizontală, cât și pe verticală.

Distanțare egală

Item 1
Item 2
Item 3

Creați o distanță egală între elemente cu spațiu între sau în jur.

Meniu vertical

Home
About
Contact

Construiți un meniu de navigare verticală cu spațiere și aliniere consecvente.

Grilă receptivă

Box 1
Box 2
Box 3
Box 4
Box 5

Creați un aspect de grilă receptiv care încadrează elementele în funcție de spațiul disponibil.

Steagul eroului

Titlul principal

Secțiunea Hero cu îndemn la acțiune

Proiectează un banner de erou cu titlu, subtitrare și un buton de apel la acțiune.

Aspect subsol

Company

About Us

Careers

Support

Centrul de ajutor

Contactați-ne

© Generator Flexbox 2023

Construiți un subsol receptiv cu coloane care se stivuiesc pe ecrane mai mici.

Exemple din lumea reală

Bara de navigare

Logo
Home
Products
About
Contact

Un aspect comun al barei de navigare cu logo în stânga, elemente de meniu în centru și o pictogramă de cărucior în dreapta.

Card Grid

Titlul cardului

Textul descrierii cărții aici

Titlul cardului

Textul descrierii cărții aici

Titlul cardului

Textul descrierii cărții aici

O grilă de carduri receptivă care se adaptează la diferite dimensiuni de ecran folosind proprietățile flexbox.

Aspectul articolului

Titlul articolului

Postat pe ianuarie 1, 2023 · Timp de citire: 5 minute

Conținutul articolului aici. Acesta ar putea fi un scurt rezumat sau textul complet al articolului. Flexbox ajută la alinierea imaginii și textului într-un mod atrăgător din punct de vedere vizual.

Un aspect comun al articolului cu o imagine în stânga și conținut text în dreapta, stivuit pe dispozitive mobile.

Aspectul tabloului de bord

Header
Sidebar
Conținut principal
Footer

Un aspect de tablou de bord cu antet, bară laterală, zonă de conținut principal și subsol folosind flexbox atât pentru alinierea orizontală, cât și verticală.

Fundamentele Flexbox

Ce este Flexbox?

Flexible Box Layout, cunoscut în mod obișnuit sub numele de Flexbox, este un model de aspect CSS3 care oferă o modalitate eficientă de a distribui și alinia spațiul între articolele dintr-un container, chiar și atunci când dimensiunea lor este necunoscută sau dinamică.

The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes).

Concepte cheie:Flexbox introduce două concepte principale:Container flexibil and the Articole flexibile. Containerul este elementul părinte, iar elementele sunt copiii săi direcți.

Axa principală vs axa transversală

Aspectele Flexbox se bazează pe două axe:main axis and the axa transversală.

  • Axa principală:Axa principală de-a lungul căreia sunt așezate elementele flexibile. Definit deflex-direction.
  • Axa transversală:Axa perpendiculară pe axa principală. Direcția sa depinde de direcția axei principale.
Axa principală →
← Axa transversală
Start
Main
End

Proprietățile containerului

Property Description
display Definește un container flexibil; în linie sau bloc în funcție de valoarea dată.
flex-direction Stabilește axa principală, definind astfel direcția în care sunt plasate articolele flexibile în containerul flexibil.
flex-wrap În mod implicit, elementele flexibile vor încerca să se potrivească pe o singură linie. Puteți schimba acest lucru și puteți permite elementelor să se împacheteze după cum este necesar cu această proprietate.
justify-content Aliniază elementele flexibile de-a lungul axei principale a liniei curente a containerului flexibil.
align-items Aliniază elementele flexibile de-a lungul axei transversale a liniei curente a containerului flexibil.
align-content Aliniază liniile unui container flexibil în interior atunci când există spațiu suplimentar în axa transversală.

Proprietățile articolului

Property Description
order În mod implicit, elementele flexibile sunt aranjate în ordinea sursă. Cu toate acestea,orderControlează ordinea în care apar în containerul Flex.
flex-grow Definește capacitatea unui obiect flexibil de a crește dacă este necesar. Acceptă o valoare fără unități care servește ca proporție.
flex-shrink Definește capacitatea unui element flexibil de a se micșora, dacă este necesar.
flex-basis Definește dimensiunea inițială a unui element flexibil înainte ca orice spațiu disponibil să fie distribuit în funcție de factorii flexibili.
align-self Permite alinierea implicită (sau cea specificată dealign-items) pentru a fi suprascris pentru elemente flexibile individuale.

Related Tools

Creați machete Flexbox perfecte

Vizualizați, personalizați și generați cod CSS flexbox cu interfața noastră intuitivă drag-and-drop.

Convertor Stylus în CSS

Transformați-vă codul SCSS în CSS. Rapid, ușor și sigur.

Convertor SCSS în CSS

Transformați-vă codul SCSS în CSS. Rapid, ușor și sigur.

Calculator de marjă

Calculați marja de profit, marja brută și adaosul cu calculatorul nostru cuprinzător de marjă.

Convertor de unități de densitate de stocare

Convertiți între diferite unități de densitate de stocare a datelor cu precizie

Convertiți JSON în Excel fără efort

Transformați-vă datele JSON în format Excel cu un singur clic. Rapid, sigur și complet bazat pe browser.