Flexbox nə üçün istifadə olunur?

Flexbox CSS-də çevik və uyğunlaşa bilən düzənlər yaratmaq üçün istifadə olunur. Bu, konteyner içindəki elementləri asanlıqla hizalamağa və bölüşdürməyə imkan verir, onların ölçülərini və mövqelərini mövcud boşluğa görə avtomatik tənzimləyir.

Flexbox-un əsas anlayışları:

• Flex konteyner: display: flex; və ya display: inline-flex; tətbiq olunan element. Bu, flex elementlərini ehtiva edir.
• Flex elementlər: Flex konteynerinin birbaşa uşaqları.

Flexbox aşağıdakıları idarə etməyə imkan verir:

• Elementlərin yerləşdirilmə istiqaməti (flex-direction).
• Elementlərin növbəti sətir/kolonaya keçməsi (flex-wrap).
• Elementlərin əsas ox boyunca hizalanması (justify-content).
• Elementlərin transverse ox boyunca hizalanması (align-items və align-content).
• Elementlərin göstərilmə ardıcıllığı (order).
• Elementlər arasında sərbəst boşluğun bölüşdürülməsi (flex-grow, flex-shrink, flex-basis).

Əsas istifadə nümunəsi:

.konteyner {
  display: flex;
  justify-content: center; /* Üfüqi mərkəzləşdirmə */
  align-items: center; /* Şaquli mərkəzləşdirmə */
}

.element {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  margin: 10px;
}

<div class="konteyner">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>