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:

css.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:

css.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:

css.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:

css.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:

css.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:

css.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: