CSS-de esasy oky üçin fleks elementlerini düzmek
justify-content häsiýeti
elementleri esasy oky boýunça düzmäge mümkinçilik berýär. Öň
siz center,
space-between, space-around,
space-evenly bahalaryny öwrenipdiňiz.
Indi bolsa ýene birnäçe bahany öwreneliň.
flex-start bahasy elementleri esasy okyň
başyna, flex-end bahasy bolsa ahyryna ýakynlaşdyrýar.
Mysallara serediň.
Mysal
Esasy oky çepden saga ýöneltmek üçin
flex-direction häsiýetine row bahasyny bereliň.
Bloklary okyň başyna ýakynlaşdyrýarys. Munuň üçin justify-content
häsiýetine flex-start bahasyny bereliň:
.parent {
display: flex;
flex-direction: row; /* esasy oky çepden saga */
justify-content: flex-start; /* bloklar esasy okyň başyna */
}
Kodyň ýerine ýetirilişiniň netijesi:
Mysal
Indi bolsa bloklary okyň ahyryna ýakynlaşdyrýarys.
Munuň üçin justify-content häsiýetine
flex-end bahasyny bereliň:
.parent {
display: flex;
flex-direction: row; /* esasy oky çepden saga */
justify-content: flex-end; /* bloklar esasy okyň ahyryna */
}
Kodyň ýerine ýetirilişiniň netijesi:
Mysal
Indi esasy oky sagdan çepa ýöneltmek üçin,
flex-direction häsiýetine
row-reverse bahasyny bereliň. Bloklary okyň
başyna, ýagny sag gapdala ýakynlaşdyrýarys. Munuň üçin justify-content
häsiýetine flex-start bahasyny bereliň:
.parent {
display: flex;
flex-direction: row-reverse; /* esasy oky sagdan çepa */
justify-content: flex-start; /* bloklar esasy okyň başyna */
}
Kodyň ýerine ýetirilişiniň netijesi:
Mysal
Indi bolsa bloklary esasy okyň
ahyryna, ýagny çep gapdala ýakynlaşdyrýarys. Munuň üçin justify-content
häsiýetine flex-end bahasyny bereliň:
.parent {
display: flex;
flex-direction: row-reverse; /* esasy oky sagdan çepa */
justify-content: flex-end; /* bloklar esasy okyň ahyryna */
}
Kodyň ýerine ýetirilişiniň netijesi:
Mysal
Öňki mysallarda esasy oky göni bolup durdy. Indi bolsa oky tersine öwürmek üçin onuň ugruny dik ýöneltmelidiris.
Esasy oky aşak ýöneltmek üçin
flex-direction häsiýetine
column bahasyny bereliň.
Bloklary esasy okyň başyna, ýagny
ýokarky gapdala ýakynlaşdyrýarys. Munuň üçin justify-content
häsiýetine flex-start bahasyny bereliň:
.parent {
display: flex;
flex-direction: column; /* esasy oky ýokardan aşak */
justify-content: flex-start; /* bloklar esasy okyň başyna */
}
Kodyň ýerine ýetirilişiniň netijesi:
Mysal
Indi bolsa bloklary esasy okyň ahyryna,
ýagny aşaky gapdala ýakynlaşdyrýarys. Munuň üçin justify-content
häsiýetine flex-end bahasyny bereliň:
.parent {
display: flex;
flex-direction: column; /* esasy oky ýokardan aşak */
justify-content: flex-end; /* bloklar esasy okyň ahyryna */
}
Kodyň ýerine ýetirilişiniň netijesi:
Mysal
Esasy oky tersine öwürýäris, onuň ugruny aşakdan
ýokary ýöneltmek üçin. Munuň üçin flex-direction
häsiýetine column-reverse bahasyny bereliň. Bu
ýagdaýda bloklar tertibini üýtgederler -
okyň başynda HTML
kodundaky iň soňky blok durar.
Bloklary esasy okyň başyna,
ýagny aşaky gapdala ýakynlaşdyrýarys. Munuň üçin justify-content
häsiýetine flex-start bahasyny bereliň:
.parent {
display: flex;
flex-direction: column-reverse; /* esasy oky aşakdan ýokary */
justify-content: flex-start; /* bloklar esasy okyň başyna */
}
Kodyň ýerine ýetirilişiniň netijesi:
Mysal
Bloklary esasy okyň ahyryna,
ýagny ýokarky gapdala ýakynlaşdyrýarys. Munuň üçin justify-content
häsiýetine flex-end bahasyny bereliň:
.parent {
display: flex;
flex-direction: column-reverse; /* esasy oky aşakdan ýokary */
justify-content: flex-end; /* bloklar esasy okyň ahyryna */
}
Kodyň ýerine ýetirilişiniň netijesi:
