Krijoni Paraqitjet Perfekte të Flexbox

Vizualizoni, personalizoni dhe gjeneroni kod flexbox CSS me ndërfaqen tonë intuitive të funksionit "drag-and-drop".

Vetitë e Kontejnerit

Vetitë e artikullit

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; }
Kod CSS i gjeneruar

Paracaktimet popullore Flexbox

Qendërzo horizontalisht dhe vertikalisht

Content

Perfekt për të centruar një logo, buton ose çdo element si horizontalisht ashtu edhe vertikalisht.

Hapësirë ​​e barabartë

Item 1
Item 2
Item 3

Krijo hapësirë ​​të barabartë midis elementeve me hapësirë ​​​​midis ose hapësirë ​​​​përreth.

Menuja Vertikale

Home
About
Contact

Ndërtoni një menu navigimi vertikal me hapësira dhe rreshtim të qëndrueshëm.

Rrjet i Përgjegjshëm

Box 1
Box 2
Box 3
Box 4
Box 5

Krijo një paraqitje rrjete responsive që mbështjell artikujt bazuar në hapësirën e disponueshme.

Flamuri i Heroit

Titulli Kryesor

Seksioni i heronjve me thirrje për veprim

Dizenjoni një banderolë hero me titull, nëntitull dhe një buton thirrjeje për veprim.

Paraqitja e fundfaqes

Company

About Us

Careers

Support

Qendra e Ndihmës

Na Kontaktoni

© 2023 Gjeneratori Flexbox

Ndërtoni një fundfaqe që i përshtatet ekraneve më të vogla me kolona që grumbullohen.

Shembuj nga Bota Reale

Shiriti i navigimit

Logo
Home
Products
About
Contact

Një paraqitje e zakonshme e shiritit të navigimit me logon në të majtë, artikujt e menusë në qendër dhe një ikonë të shportës në të djathtë.

Card Grid

Titulli i Kartës

Teksti i përshkrimit të kartës këtu

Titulli i Kartës

Teksti i përshkrimit të kartës këtu

Titulli i Kartës

Teksti i përshkrimit të kartës këtu

Një rrjet kartash që i përshtatet madhësive të ndryshme të ekranit duke përdorur vetitë flexbox.

Paraqitja e Artikullit

Titulli i Artikullit

Postuar më 1 janar 2023 · Lexim 5 minuta

Përmbajtja e artikullit këtu. Kjo mund të jetë një përmbledhje e shkurtër ose teksti i plotë i artikullit. Flexbox ndihmon në përshtatjen e imazhit dhe tekstit në një mënyrë tërheqëse vizualisht.

Një paraqitje e zakonshme e artikullit me një imazh në të majtë dhe përmbajtje teksti në të djathtë, e grumbulluar në pajisjet mobile.

Paraqitja e Panelit të Kontrollit

Header
Sidebar
Përmbajtja kryesore
Footer

Një paraqitje e panelit të kontrollit me kokë, shirit anësor, zonë kryesore të përmbajtjes dhe fundfaqe duke përdorur flexbox për shtrirje horizontale dhe vertikale.

Bazat e Flexbox

Çfarë është Flexbox?

Flexible Box Layout, i njohur zakonisht si Flexbox, është një model paraqitjeje CSS3 që ofron një mënyrë efikase për të shpërndarë dhe rreshtuar hapësirën midis artikujve në një enë, edhe kur madhësia e tyre është e panjohur ose dinamike.

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).

Koncepte kryesore:Flexbox prezanton dy koncepte kryesore:enë fleksibile and the artikuj fleksibëlKontejneri është elementi prind, dhe artikujt janë fëmijët e tij të drejtpërdrejtë.

Boshti kryesor kundrejt boshtit tërthor

Paraqitjet e Flexbox bazohen në dy akse:main axis and the bosht tërthor.

  • Boshti kryesor:Boshti kryesor përgjatë të cilit vendosen artikujt fleksibël. Përcaktohet ngaflex-direction.
  • Boshti Kryqëzues:Aksi pingul me boshtin kryesor. Drejtimi i tij varet nga drejtimi i boshtit kryesor.
Boshti Kryesor →
← Boshti Kryqëzues
Start
Main
End

Vetitë e Kontejnerit

Property Description
display Përcakton një kontejner fleksibël; në linjë ose në bllok, varësisht nga vlera e dhënë.
flex-direction Përcakton boshtin kryesor, duke përcaktuar kështu drejtimin në të cilin vendosen artikujt fleksibël në enën fleksibël.
flex-wrap Si parazgjedhje, artikujt fleksibël do të përpiqen të vendosen në një rresht. Mund ta ndryshoni këtë dhe t'i lejoni artikujt të mbështillen sipas nevojës me këtë veti.
justify-content Rreshton artikujt fleksibël përgjatë boshtit kryesor të vijës aktuale të kontejnerit fleksibël.
align-items Rreshton artikujt fleksibël përgjatë boshtit tërthor të vijës aktuale të kontejnerit fleksibël.
align-content Rreshton vijat e një kontejneri fleksibël brenda kur ka hapësirë ​​shtesë në boshtin tërthor.

Vetitë e artikullit

Property Description
order Si parazgjedhje, artikujt fleksibël vendosen sipas renditjes burimore. Megjithatë,ordervetia kontrollon rendin në të cilin ato shfaqen në kontejnerin fleksibël.
flex-grow Përcakton aftësinë e një artikulli fleksibël për t'u rritur nëse është e nevojshme. Pranon një vlerë pa njësi që shërben si proporcion.
flex-shrink Përcakton aftësinë e një artikulli fleksibël për t'u tkurrur nëse është e nevojshme.
flex-basis Përcakton madhësinë fillestare të një artikulli fleksibël përpara se të shpërndahet çdo hapësirë ​​e disponueshme sipas faktorëve fleksibël.
align-self Lejon shtrirjen e parazgjedhur (ose atë të specifikuar ngaalign-items) të mbivendoset për artikuj individualë fleksibël.

Related Tools

Gjeneratori i Tranzicionit CSS3

Kalim i butë i tejdukshmërisë

Konvertuesi më pak në CSS

Transformoni kodin tuaj Less në CSS. Shpejt, lehtë dhe sigurt.

Konvertuesi i stilolapsit në CSS

Transformoni kodin tuaj SCSS në CSS. Shpejt, lehtë dhe sigurt.

ASCII në Tekst

Konvertoni kodin ASCII në tekst pa mundim

JSON Minify

JSON i minimizuar zvogëlon madhësinë e të dhënave tuaja, që do të thotë se ato mund të transferohen në rrjet më shpejt.

Nga Pantone në RGB

Konvertoni ngjyrat Pantone në vlera RGB për dizajn dixhital