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

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

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

• Flex контейнер: display: flex; же display: inline-flex; колдонулган элемент. Ал flex элементтерин камтыйт.
• Flex элементтер: Flex контейнеринин түздөн-түз балдары.

Flexbox төмөнкүлөрдү көзөмөлдөйт:

• Элементтердин жайгашуу багыты (flex-direction).
• Элементтердин кийинки сапка/бағанага өтүшү (flex-wrap).
• Элементтердин негизги оюна тууралануусу (justify-content).
• Элементтердин өтө турган оюна тууралануусу (align-items жана align-content).
• Элементтердин көрсөтүү тартиби (order).
• Эркин кеңдикти бөлүштүрүү (flex-grow, flex-shrink, flex-basis).

Негизги колдонуу мисалы:

.контейнер {
  display: flex;
  justify-content: center; /* Горизонталдык борборлоо */
  align-items: center; /* Вертикалдык борборлоо */
}

.элемент {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  margin: 10px;
}

<div class="контейнер">
  <div class="элемент"></div>
  <div class="элемент"></div>
  <div class="элемент"></div>
</div>