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

Konvertuesi i stilolapsit në CSS

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

Konvertuesi SCSS në CSS

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

Konvertuesi Sass në CSS

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

Konvertoni tekstin midis shkronjave të mëdha dhe të mëdha

Transformoni lehtësisht tekstin tuaj në stile të ndryshme të shkronjave dhe shkronjave me anë të mjetit tonë të gjithanshëm për konvertimin e shkronjave dhe shkronjave.

Konvertuesi i Numrave Romakë në Numra

Konvertoni numrat romakë në ekuivalentët e tyre numerikë me shpjegime hap pas hapi

Konvertuesi i Njësive të Sipërfaqes

Konvertoni midis njësive të ndryshme të sipërfaqes me saktësi dhe lehtësi