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ň:

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

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

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

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

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

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

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

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

Amaly işler