Rreshtimi i Elementeve Flex përgjatë Boshtit Kryesor në CSS
Vetia justify-content lejon
rreshtimin e elementeve përgjatë boshtit kryesor. Më parë
keni mësuar vlerat center,
space-between, space-around,
space-evenly. Tani le të studiojmë
disa vlera të tjera.
Vlera flex-start i shtyn elementet në fillim
të boshtit kryesor, ndërsa vlera flex-end - në fund.
Le t'i shikojmë me shembuj.
Shembull
Le ta drejtojmë boshtin kryesor nga e majta në të djathtë, duke i dhënë
vetisë flex-direction vlerën row.
Le t'i shtyjmë blloqet në fillim të boshtit. Për këtë justify-content
do ta vendosim në vlerën flex-start:
.parent {
display: flex;
flex-direction: row; /* boshti kryesor nga e majta në të djathtë */
justify-content: flex-start; /* blloqet në fillim të boshtit kryesor */
}
Rezultati i ekzekutimit të kodit:
Shembull
Tani le t'i shtyjmë blloqet në fund të boshtit.
Për këtë justify-content do ta vendosim
në vlerën flex-end:
.parent {
display: flex;
flex-direction: row; /* boshti kryesor nga e majta në të djathtë */
justify-content: flex-end; /* blloqet në fund të boshtit kryesor */
}
Rezultati i ekzekutimit të kodit:
Shembull
Tani le ta drejtojmë boshtin kryesor nga e djathta në të majtë,
duke i dhënë vetisë flex-direction vlerën
row-reverse. Le t'i shtyjmë blloqet në fillim
të boshtit, domethënë në skajin e djathtë. Për këtë justify-content
do ta vendosim në vlerën flex-start:
.parent {
display: flex;
flex-direction: row-reverse; /* boshti kryesor nga e djathta në të majtë */
justify-content: flex-start; /* blloqet në fillim të boshtit kryesor */
}
Rezultati i ekzekutimit të kodit:
Shembull
Tani le t'i shtyjmë blloqet në fund të boshtit kryesor,
domethënë në skajin e majtë. Për këtë justify-content
do ta vendosim në vlerën flex-end:
.parent {
display: flex;
flex-direction: row-reverse; /* boshti kryesor nga e djathta në të majtë */
justify-content: flex-end; /* blloqet në fund të boshtit kryesor */
}
Rezultati i ekzekutimit të kodit:
Shembull
Në shembujt e mëparshëm boshti kryesor ishte i drejtuar horizontalisht. Tani le ta kthejmë atë dhe ta drejtojmë vertikalisht.
Le ta drejtojmë boshtin kryesor poshtë, duke i dhënë
vetisë flex-direction vlerën
column.
Le t'i shtyjmë blloqet në fillim të boshtit kryesor, domethënë
në skajin e sipërm. Për këtë justify-content
do ta vendosim në vlerën flex-start:
.parent {
display: flex;
flex-direction: column; /* boshti kryesor nga lart poshtë */
justify-content: flex-start; /* blloqet në fillim të boshtit kryesor */
}
Rezultati i ekzekutimit të kodit:
Shembull
Tani le t'i shtyjmë blloqet në fund të boshtit kryesor,
domethënë në skajin e poshtëm. Për këtë justify-content
do ta vendosim në vlerën flex-end:
.parent {
display: flex;
flex-direction: column; /* boshti kryesor nga lart poshtë */
justify-content: flex-end; /* blloqet në fund të boshtit kryesor */
}
Rezultati i ekzekutimit të kodit:
Shembull
Le ta kthejmë boshtin kryesor, duke e drejtuar nga poshtë
lart. Për këtë vetisë flex-direction
do t'i japim vlerën column-reverse. Në
këtë rast blloqet do të ndryshojnë rendin e tyre -
në fillim të boshtit do të jetë blloku i fundit në HTML
kod.
Le t'i shtyjmë blloqet në fillim të boshtit kryesor,
domethënë në skajin e poshtëm. Për këtë justify-content
do ta vendosim në vlerën flex-start:
.parent {
display: flex;
flex-direction: column-reverse; /* boshti kryesor nga poshtë lart */
justify-content: flex-start; /* blloqet në fillim të boshtit kryesor */
}
Rezultati i ekzekutimit të kodit:
Shembull
Le t'i shtyjmë blloqet në fund të boshtit kryesor,
domethënë në skajin e sipërm. Për këtë justify-content
do ta vendosim në vlerën flex-end:
.parent {
display: flex;
flex-direction: column-reverse; /* boshti kryesor nga poshtë lart */
justify-content: flex-end; /* blloqet në fund të boshtit kryesor */
}
Rezultati i ekzekutimit të kodit:
