Flexbox деген эмне?

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

Flexboxтин негизги концепциялары:

• Негизги ось (main axis): Элементтер жайгашкан ось. Аны по умолчанию горизонталдуу (солдон оңго).
• Көбүрөөк ось (cross axis): Негизги оськө перпендикуляр ось. Аны по умолчанию вертикалдуу (жогорудан төмөнгө).
• Контейнер (flex container): display: flex же display: inline-flex колдонулган элемент.
• Элементтер (flex items): Контейнердин балдары.

Flex-контейнер үчүн өзгөчөлүктөр:

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

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

• order: Элементтин тартиби
• flex-grow: Элементтин кеңейүү коэффициенти
• flex-shrink: Элементтин кысуу коэффициенти
• flex-basis: Баштапкы өлчөм
• flex: flex-grow, flex-shrink жана flex-basis кыскача жазылышы
• align-self: Элементтин өзүнчө туураланышы (flex-start, flex-end, center, baseline, stretch, auto)

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

/* Контейнер */
.container {
  display: flex; /* Flexbox колдонуу */
  flex-direction: row; /* Элементтер сапта жайгашат */
  justify-content: center; /* Горизонталдуу борборлоо */
  align-items: center; /* Вертикалдуу борборлоо */
  height: 200px; /* Контейнердин бийиктиги */
  border: 1px solid black;
}

/* Элементтер */
.item {
  width: 50px;
  height: 50px;
  background-color: lightblue;
  margin: 5px;
}

Flexbox адаптивдүү түзүмдөрдү түзүүдө классикалык ыкмаларга салыштырмалуу кыйла жеңилдик берет (float, inline-block, table).