CSS-de fleks bloglaryny göni bolmadyk ok boýunça düzmek
Indi bloglary göni bolmadyk ok boýunça hem düzeliň. Bu ok boýunça düzmek align-items häsiýeti bilen berilýär. flex-start bahasy elementleri oküň başyna, flex-end bahasy bolsa oküň ahyryna ýerleşdirýär.
Mysallar bilen synanyşalyň.
Mysal
Esasy oküň ugruny çepden saga ýönelderis. Bu ýagdaýda göni bolmadyk ok ýokardan aşak ugrar. Geliň, bloglarymyzy esasy ok we göni bolmadyk ok boýunça düzeliň.
Esasy ok boýunça bloglary onuň başyna, ýagny çep çetige ýerleşdireris. Bunuň üçin justify-content häsiýetini flex-start bahasyna deňgerleriň. Göni bolmadyk ok boýunça hem bloglary onuň başyna, ýagny ýokarky çetige ýerleşdireris. Bunuň üçin align-items häsiýetini hem flex-start bahasyna deňgerleriň.
Näme netije alýandygymyza göz aýlanyň:
.parent {
display: flex;
flex-direction: row; /* esasy ok saga, göni bolmadyk ok aşak */
justify-content: flex-start; /* bloglar esasy oküň başyna */
align-items: flex-start; /* bloglar göni bolmadyk oküň başyna */
}
Kod ýerine ýetirilenden soňky netije:
Mysal
Indi bloglary göni bolmadyk oküň ahyryna, ýagny aşak çetige ýerleşdereliň. Bunuň üçin align-items häsiýetini flex-end bahasyna deňgerleriň:
.parent {
display: flex;
flex-direction: row; /* esasy ok saga, göni bolmadyk ok aşak */
justify-content: flex-start; /* bloglar esasy oküň başyna */
align-items: flex-end; /* bloglar göni bolmadyk oküň ahyryna */
}
Kod ýerine ýetirilenden soňky netije:
Mysal
Indi esasy oküň ugruny ýokardan aşak ýönelderis. Esasy ok dikeý bolany üçin, göni bolmadyk ok sagdan çapa ugrar. Geliň, bloglary her iki ok boýunça hem olaryň başyna ýerleşdereliň:
.parent {
display: flex;
flex-direction: column; /* esasy ok aşak, göni bolmadyk ok saga */
justify-content: flex-start; /* bloglar esasy oküň başyna */
align-items: flex-start; /* bloglar göni bolmadyk oküň başyna */
}
Kod ýerine ýetirilenden soňky netije:
Mysal
Indi bolsa bloglary göni bolmadyk ok boýunça onuň ahyryna ýerleşdereliň:
.parent {
display: flex;
flex-direction: column; /* esasy ok aşak, göni bolmadyk ok saga */
justify-content: flex-start; /* bloglar esasy oküň başyna */
align-items: flex-end; /* bloglar göni bolmadyk oküň ahyryna */
}
Kod ýerine ýetirilenden soňky netije:
Mysal
Bloglary her iki oküň hem ahyryna ýerleşdereliň:
.parent {
display: flex;
flex-direction: column; /* esasy ok aşak, göni bolmadyk ok saga */
justify-content: flex-end; /* bloglar esasy oküň ahyryna */
align-items: flex-end; /* bloglar göni bolmadyk oküň ahyryna */
}
Kod ýerine ýetirilenden soňky netije:
Mysal
Geliň, esasy oküň ugruny üýtşdereliň – ony aşakdan ýokara ugratalyň. Bu ýagda göni bolmadyk ok öz ugruny üýtgetmez, sebäbi esasy ok heniz dikeý bolup galýar.
Bloglary her iki oküň hem başyna ýerleşdereliň:
.parent {
display: flex;
flex-direction: column-reverse; /* esasy ok ýokar, göni bolmadyk ok saga */
justify-content: flex-start; /* bloglar esasy oküň başyna */
align-items: flex-start; /* bloglar göni bolmadyk oküň başyna */
}
Kod ýerine ýetirilenden soňky netije:
