Gjenerator i Flexbox

Hyrje në CSS Flexbox

CSS Flexbox është një sistem i fuqishëm për rregullimin e strukturës së faqeve të internetit, i cili mundëson shpërndarjen e hapësirës dhe rreshtimin e elementeve brenda një kontejneri. Ky sistem përdoret gjerësisht për të krijuar struktura fleksibile dhe të adaptueshme, ku elementet mund të ndryshojnë përmasat e tyre për t'u përshtatur me madhësinë e ekranit. Përdorimi i Flexbox lehtëson ndërtimin e strukturave të ndryshme pa pasur nevojë për llogaritje të ndërlikuara të pozicionimit.

Gjenerator i Flexbox ndihmon në ndërtimin vizual të këtyre strukturave. Përdoruesi mund të ndryshojë parametrat e kontejnerit dhe të elementeve përmes kontrolleve vizuale, të shikojë ndryshimet në kohë reale në një pamje paraprake dhe të kopjojë kodin CSS të gjeneruar për projektin e tij.

Pronësitë e Kontejnerit Flex

Kontejneri është elementi prind që përcakton mjedisin flex për elementet brenda tij. Kontrollet e kontejnerit në këtë vegël përfshijnë:

• Drejtimi (flex-direction): Përcakton aksin kryesor përgjatë të cilit vendosen elementet. Mundësitë e zgjedhjes janë Rresht, Rresht i përmbysur, Kolonë dhe Kolonë e përmbysur.
• Wrap (flex-wrap): Përcakton nëse elementet duhet të qëndrojnë në një rresht të vetëm apo të kalojnë në rreshta të rinj. Mundësitë janë No wrap, Wrap dhe Wrap reverse.
• Justify content: Rregullon shpërndarjen e elementeve përgjatë aksit kryesor. Mundësitë përfshijnë Start, End, Center, Space between, Space around dhe Space evenly.
• Align items: Përcakton rreshtimin e elementeve përgjatë aksit tërthor. Mundësitë janë Start, End, Center, Stretch dhe Baseline.
• Align content: Rregullon hapësirën midis rreshtave të kontejnerit kur ka shumë rreshta. Mundësitë janë Start, End, Center, Stretch, Space between, Space around dhe Space evenly.
• Gap: Përcakton një vlerë numerike për hapësirën midis elementeve dhe midis rreshtave.

Pronësitë e Elementeve Flex

Çdo element brenda kontejnerit mund të konfigurohet individualisht për të ndryshuar sjelljen e tij specifike. Pronësitë që mund të ndryshohen për çdo element janë:

• Order: Një vlerë numerike që përcakton renditjen vizuale të elementit në raport me të tjerët.
• Grow: Një vlerë numerike që përcakton se sa do të rritet elementi për të mbushur hapësirën e mbetur të lirë.
• Shrink: Një vlerë numerike që përcakton aftësinë e elementit për t'u zvogëluar kur hapësira është e kufizuar.
• Basis: Madhësia fillestare e elementit përpara se të aplikohet rritja ose zvogëlimi. Mund të vendoset si një vlerë numerike ose si "Auto".
• Align self: Lejon tejkalimin e rregullit të përgjithshëm të rreshtimit (align-items) vetëm për këtë element. Mundësitë janë Auto, Start, End, Center, Stretch dhe Baseline.

Kur klikohet butoni "Shto element", në pamjen paraprake shtohet një element i ri, si për shembull "Item 5". Vetëm elementet që kanë pësuar ndryshime në pronësitë e tyre do të kenë rregulla specifike të gjeneruara në kodin CSS.

Ndërveprimi midis Akseve dhe Mbështjelljes

Kuptimi i akseve është thelbësor gjatë punës me Flexbox. Kur ndryshoni drejtimin nga rresht (row) në kolonë (column), aksi kryesor dhe ai tërthor ndërrojnë vendet me njëri-tjetrin. Kjo ndikon drejtpërdrejt në mënyrën se si funksionojnë justify-content dhe align-items.

Mbështjellja po ashtu luan një rol të rëndësishëm. Kur opsioni i mbështjelljes është i çaktivizuar (No wrap), të gjitha elementet detyrohen të qëndrojnë në një rresht të vetëm, gjë që mund të shkaktojë ngjeshjen e tyre. Kur aktivizohet mbështjellja (Wrap), elementet që nuk nxënë më në rresht kalojnë automatikisht në rreshtin tjetër. Në këtë moment, pronësia align-content merr kontrollin për të rregulluar hapësirën midis këtyre rreshtave si një grup i vetëm. Parametri Gap përcakton distancën e saktë midis elementeve dhe rreshtave pa pasur nevojë për margjina të jashtme.

Modele të Zakonshme të Strukturave

Me anë të këtij gjeneratori mund të ndërtohen lehtësisht disa nga strukturat më të përdorura në dizajnin e uebit:

• Element i qendruar: Një strukturë ku një element pozicionohet saktësisht në qendër të kontejnerit, duke përdorur vlerat Center për justify-content dhe align-items.
• Shiriti i navigimit: Elementet shpërndahen horizontalisht, shpesh duke përdorur Space between për të mbajtur logon në njërin skaj dhe menunë në skajin tjetër.
• Stivë: Elementet rreshtohen vertikalisht njëri pas tjetrit duke përdorur drejtimin Kolonë.
• Karta: Një rrjet elementesh që mbështillen kur hapësira ngushtohet, duke ruajtur përmasa të barabarta.
• Shiriti anësor: Një strukturë ku njëri element ka një gjerësi të caktuar (përmes basis), ndërsa elementi kryesor rritet (grow) për të mbushur pjesën tjetër të ekranit.

Përpunimi i të Dhënave dhe Privatësia

Gjenerator i Flexbox funksionon tërësisht në anën e klientit. Struktura juaj ndërtohet drejtpërdrejt në shfletuesin tuaj. Asgjë që vendosni këtu nuk ngarkohet në BroBroGo. Kjo siguron që të gjitha ndryshimet dhe kodet e gjeneruara të mbeten lokale në pajisjen tuaj gjatë gjithë kohës së përdorimit.

Pasi të keni përfunduar konfigurimin vizual, mund të klikoni butonin "Kopjo CSS". Ky veprim do të kopjojë të gjithë kodin e gjeneruar në kujtesën e pajisjes suaj dhe gjendja e butonit do të ndryshojë përkohësisht në "Copied".

---

Pyetje të Shpeshta (FAQ)

Cili është ndryshimi midis justify-content dhe align-items?

Justify-content hapësiron elementet përgjatë aksit kryesor — drejtimi në të cilin rrjedh rreshti ose kolona — ndërsa align-items i pozicionon ato përgjatë aksit tjetër. Ndryshoni drejtimin nga rresht në kolonë dhe dy akset ndërrohen, kështu që justify-content fillon të funksionojë nga lart poshtë dhe align-items nga e majta në të djathtë.

Si funksionojnë kontrollet për çdo element?

Zgjidhni një element sipas numrit të tij, pastaj vendosni se sa rritet (grow) për të mbushur hapësirën e lirë, sa zvogëlohet (shrink) kur hapësira është e ngushtë, madhësinë e tij fillestare (basis) dhe rreshtimin e tij në aksin tërthor (align-self). Order e lëviz një element më herët ose më vonë në ekran pa prekur HTML-në. Vetëm elementet që ndryshoni marrin rregullin e tyre në CSS.

Kur kanë rëndësi wrap dhe align-content?

Me mbështjelljen (wrap) të çaktivizuar, çdo element detyrohet të qëndrojë në një rresht të vetëm dhe mund të ngushtohet. Aktivizojeni dhe elementet që nuk nxënë më bien në rreshtin tjetër — atëherë merr kontrollin align-content, duke hapësiruar rreshtat si grup. Gap përcakton hapësirën midis elementeve dhe midis rreshtave, pa përdorur margin.