CSSте flex эмне үчүн колдонулат?

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

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

• Flex Container: display: flex же display: inline-flex берилген ата-элемент.
• Flex Items: Flex Containerдин балдары.
• Main Axis: Flex Containerдин негизги ою. flex-direction мүнөздөмөсү менен аныкталат. Деп аталган боюнча горизонтал (row).
• Cross Axis: Main Axisке перпендикуляр, жанама ою.

Ключевые свойства для Flex Container:

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

Ключевые свойства для Flex Items:

• order: Визуалдык тартибин белгилейт (баштапкы мааниси 0).
• flex-grow: Элемент башка элементтерге салыштырмалуу канчалык чоңоюшу мүмкүн экенин аныктайт (баштапкы 0).
• flex-shrink: Элемент башка элементтерге салыштырмалуу канчалык кыскаша алат экенин аныктайт (баштапкы 1).
• flex-basis: Эркин кеңдикти бөлүштүрүүдөн мурун баштапкы өлчөмүн белгилейт (баштапкы auto).
• align-self: жеке элемент үчүн жанама ою боюнча жайгаштырууну кайра аныктайт.

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

.container {
  display: flex;
  justify-content: center; /* Негизги ою боюнча борборлоо */
  align-items: center; /* Жанама ою боюнча борборлоо */
  height: 200px;
  border: 1px solid black;
}

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

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

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