Radhitja e blloqeve fleks përgjatë boshtit kryq në CSS
Tani le të radhisim blloqet edhe
përgjatë boshtit kryq. Radhitja përgjatë këtij boshti
përcaktohet nga vetia align-items. Vlera
flex-start i afron elementet në fillim
të boshtit, ndërsa vlera flex-end - në fund.
Le të provojmë me shembuj.
Shembull
Le ta drejtojmë boshtin kryesor nga e majta në të djathtë. Në këtë rast boshti kryq do të drejtohet nga lart poshtë. Le të rregullojmë vendosjen e blloqeve tona si përgjatë boshtit kryesor, ashtu edhe përgjatë boshtit kryq.
Përgjatë boshtit kryesor, le t'i afrojmë blloqet në fillimin e tij,
domethënë në anën e majtë. Për këtë justify-content
do ta vendosim në vlerën flex-start. Përgjatë
boshtit kryq, gjithashtu do t'i afrojmë blloqet në fillimin e tij,
domethënë në skajin e sipërm. Për këtë align-items
do ta vendosim gjithashtu në vlerën flex-start.
Le të shohim se çfarë marrim:
.parent {
display: flex;
flex-direction: row; /* boshti kryesor djathtas, boshti kryq poshtë */
justify-content: flex-start; /* blloqet në fillim të boshtit kryesor */
align-items: flex-start; /* blloqet në fillim të boshtit kryq */
}
Rezultati i ekzekutimit të kodit:
Shembull
Tani le t'i afrojmë blloqet në fund të boshtit kryq,
domethënë në fund. Për këtë align-items
do ta vendosim në vlerën flex-end:
.parent {
display: flex;
flex-direction: row; /* boshti kryesor djathtas, boshti kryq poshtë */
justify-content: flex-start; /* blloqet në fillim të boshtit kryesor */
align-items: flex-end; /* blloqet në fund të boshtit kryq */
}
Rezultati i ekzekutimit të kodit:
Shembull
Tani le ta drejtojmë boshtin kryesor nga lart poshtë. Meqë boshti kryesor është vertikal, boshti kryq do të drejtohet nga e djathta në të majtë. Le t'i afrojmë blloqet përgjatë të dy boshteve në fillimin e tyre:
.parent {
display: flex;
flex-direction: column; /* boshti kryesor poshtë, boshti kryq djathtas */
justify-content: flex-start; /* blloqet në fillim të boshtit kryesor */
align-items: flex-start; /* blloqet në fillim të boshtit kryq */
}
Rezultati i ekzekutimit të kodit:
Shembull
Tani përgjatë boshtit kryq le t'i afrojmë blloqet në fund të tij:
.parent {
display: flex;
flex-direction: column; /* boshti kryesor poshtë, boshti kryq djathtas */
justify-content: flex-start; /* blloqet në fillim të boshtit kryesor */
align-items: flex-end; /* blloqet në fund të boshtit kryq */
}
Rezultati i ekzekutimit të kodit:
Shembull
Le t'i afrojmë blloqet në fund të të dy boshteve:
.parent {
display: flex;
flex-direction: column; /* boshti kryesor poshtë, boshti kryq djathtas */
justify-content: flex-end; /* blloqet në fund të boshtit kryesor */
align-items: flex-end; /* blloqet në fund të boshtit kryq */
}
Rezultati i ekzekutimit të kodit:
Shembull
Le të ndryshojmë drejtimin e boshtit kryesor - ta drejtojmë nga poshtë lart. Në këtë rast boshti kryq nuk do të ndryshojë drejtimin e tij, pasi boshti kryesor mbetet vertikal.
Le t'i afrojmë blloqet në fillim të të dy boshteve:
.parent {
display: flex;
flex-direction: column-reverse; /* boshti kryesor lart, boshti kryq djathtas */
justify-content: flex-start; /* blloqet në fillim të boshtit kryesor */
align-items: flex-start; /* blloqet në fillim të boshtit kryq */
}
Rezultati i ekzekutimit të kodit:
