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; /* Гorizontal марказлаштириш */
  align-items: center; /* Вертикал марказлаштириш */
}

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

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