Sobes.tech
Интервью Жардам
Ресурстар
Интервьюга даярдоо
Ресурстар
Жумуш издөө
Ресурстар
Юридикалык
Суроолорго кайтуу
Junior

Беттеги элементтерди жайгаштыруу үчүн flexbox кантип колдонулат?

sobes.tech AI

AIден жооп

Flexbox (же Flexible Box Layout) — бул CSS модул, ал гибки макет түзүү үчүн арналган, контейнер ичиндеги элементтердин кеңири жайылышын жана тууралашын жеңилдетет, алардын өлчөмдөрү белгисиз же динамикалык өзгөрүп жатканда да.

Flexboxтин негизги концепциясы — flex-контейнер жана анын flex-элементтери.

Flex-контейнер үчүн касиеттер (display: flex;):

  • flex-direction: flex-элементтердин жайгашуу багытын аныктайт (негизги ось).

    • row (өзүнчө): горизонталдуу, солдон оңго.
    • row-reverse: горизонталдуу, оңдон солго.
    • column: вертикалдуу, жогорудан төмөн.
    • column-reverse: вертикалдуу, төмөндөн жогору.

  • flex-wrap: flex-элементтер жаңы сапка өтөбү же жокпу, аныктайт.

    • nowrap (өзүнчө): бардык элементтер бир сапта.
    • wrap: жаңы сапка өтөт.
    • wrap-reverse: жаңы сапка өтөт, бирок тескери тартипте.

  • justify-content: негизги ось боюнча элементтерди жайгаштыруу.

    • flex-start (өзүнчө): башында.
    • flex-end: соңунда.
    • center: борборунда.
    • space-between: аралыгында бирдей аралык.
    • space-around: тегиз аралык менен бөлүнгөн.
    • space-evenly: бардык аралыктар бирдей.

  • align-items: көлөкө боюнча элементтерди тууралоо.

    • stretch (өзүнчө): көлөкө боюнча кеңейтүү.
    • flex-start: башында.
    • flex-end: соңунда.
    • center: борборунда.
    • baseline: тексттин негизги сызыгында.

  • align-content: көп саптуу болсо, саптарды тууралоо.

    • stretch (өзүнчө): саптарды кеңейтүү.
    • flex-start: башында.
    • flex-end: соңунда.
    • center: борборунда.
    • space-between: аралыктар менен бирдей бөлүштүрүү.
    • space-around: тегиз бөлүштүрүү.

  • gap, row-gap, column-gap: аралыктарды белгилөө.

.flex-container {
  display: flex; /* Элементти flex-контейнер кылат */
  flex-direction: row; /* Элементтер горизонтал жайгашат */
  flex-wrap: wrap; /* Жаңы сапка өтөт */
  justify-content: center; /* Борборго жайгаштырат */
  align-items: center; /* Борборго жайгаштырат */
  gap: 10px; /* 10px аралыктар */
}

Flex-элементтер үчүн касиеттер (түздөн-түз балдар):

  • order: Элементтин көрсөтүү тартибин аныктайт (өзүнчө 0). Кичүү маанилер биринчи көрсөтүлөт.

  • flex-grow: Элементтин кеңейүү коэффициенти, башка элементтерге салыштырмалуу.

  • flex-shrink: Элементтин кыскарашы, эгер кеңдик жетишпесе.

  • flex-basis: Баштапкы өлчөм, бөлүштүрүүдөн мурун.

  • flex: кыскача, flex-grow, flex-shrink, flex-basis.

  • align-self: Элементтин өзүнчө тууралашы, align-items менен алмаштырат.

.flex-item {
  order: 2; /* Экинчи көрсөтүлөт */
  flex-grow: 1; /* Калган орунду алат */
  flex-shrink: 0; /* Кыскабайт */
  flex-basis: 100px; /* 100px негизги өлчөм */
  align-self: flex-start; /* Башында */
}

.another-item {
  flex: 1 1 auto; /* өсүү: 1, кысуу: 1, негизги: auto */
}

Flexbox ар кандай макет түзүүгө мүмкүндүк берет, жөнөкөй тууралаудан баштап, көбүрөөк адаптивдүү структураларга чейин, бөлүштүрүү жана элементтердин тууралашын башкаруу менен.

МурункуКийинки