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

Flexbox эмне?

sobes.tech AI

AIден жооп

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

Flexboxтун негизги түшүнүктөрү:

  • Flex-контейнер: display: flex же display: inline-flex коюлган элемент. Бул контейнерде анын түздөн-түз балдар элементтерине эрежелер белгиленет.
  • Flex-элементтер: Flex-контейнердин түздөн-түз балдар элементтери. Аларга Flexbox өзгөчөлүктөрү колдонулат жана алардын жүрүм-турумун аныктайт.
  • Негизги ось (main axis): Flex-элементтер жайгашкан ось. Ал алдын ала горизонталдуу (солдон оңго), бирок flex-direction менен өзгөртүлүшү мүмкүн.
  • Кросс ось (cross axis): Негизги осько перпендикуляр ось.
  • Негизги башталыш (main start) / Негизги аягы (main end): Негизги ось боюнча башталыш жана аягы.
  • Кросс башталыш (cross start) / Кросс аягы (cross end): Кросс ось боюнча башталыш жана аягы.

Flexboxтун негизги өзгөчөлүктөрү:

  • display: Элементти flex-контейнер кылат (flex же inline-flex).
  • flex-direction: Негизги остьун багытын аныктайт (row, row-reverse, column, column-reverse).
  • flex-wrap: Эгер орун жетпесе, flex-элементтер жаңы сапка/бағанага өтөбү же жокпу (nowrap, wrap, wrap-reverse).
  • justify-content: Негизги ось боюнча flex-элементтерди тууралоо (flex-start, flex-end, center, space-between, space-around, space-evenly).
  • align-items: Кросс ось боюнча тууралоо (flex-start, flex-end, center, baseline, stretch).
  • align-content: Flex-элементтердин катарларын тууралоо (эгер алардын саны көп болсо, flex-wrap себептүү) кросс ось боюнча.

Flex-элементтер үчүн негизги өзгөчөлүктөр:

  • order: Flex-элементтин көрсөтүү тартибин аныктайт (өзүнчө 0).
  • flex-grow: Flex-элементтин өсүү коэффициенти, ал жеткиликтүү орунду толтуруу үчүн канчалык көбөйө алат экенин аныктайт.
  • flex-shrink: Flex-элементтин кысуу коэффициенти, ал канчалык кыскара алат экенин аныктайт, ашып кетүүнү алдын алуу үчүн.
  • flex-basis: Бос орун бөлүштүрүүдөн мурун баштапкы өлчөм.
  • flex: flex-grow, flex-shrink жана flex-basis үчүн кыскача түрү.
  • align-self: Конкреттүү flex-элемент үчүн align-items-ти кайра аныктайт.

Колдонуу мисалы:

HTML:

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

CSS:

.flex-container {
  display: flex; /* Контейнерди flex-контейнер кылат */
  justify-content: center; /* Элементтерди негизги ось боюнча борборго жайгаштырат */
  align-items: center; /* Элементтерди кросс ось боюнча борборго жайгаштырат */
  height: 200px; /* Демонстрация үчүн */
  border: 1px solid black;
}

.flex-item {
  width: 50px;
  height: 50px;
  background-color: lightblue;
  margin: 10px;
}

Flexboxтун негизги артыкчылыктары:

  • Элементтерди горизонталдык жана вертикалдык тууралоо оңой.
  • Пространствонын ийкемдүү бөлүштүрүлүшү.
  • Элементтердин тартибин оңой өзгөртүү.
  • Float жана position колдонбостон адаптивдүү дизайн.
  • Заманауи браузерлерде жакшы колдоо.
МурункуКийинки