CSS-də flex nə üçün istifadə olunur?

Flexbox, elementlərin tək ölçülü düzülüşünü yaratmaq üçün istifadə olunur. Bu, elementlərin hizalanmasını, boşluğun bölüşdürülməsini və elementlərin sırasını idarə etməyə imkan verir.

Əsas anlayışlar:

• Flex konteyner: display: flex və ya display: inline-flex təyin olunan valideyn element.
• Flex elementlər: Flex konteynerin uşaqları.
• Əsas ox: Flex konteynerin əsas oxu. flex-direction xüsusiyyəti ilə təyin edilir. Standartda üfüqi (row).
• Kross ox: Əsas oxa perpendikulyar olan ox.

Flex konteyner üçün əsas xüsusiyyətlər:

• display: Elementin flex konteyner olduğunu müəyyən edir (flex və ya inline-flex).
• flex-direction: Əsas oxun istiqamətini təyin edir (row, row-reverse, column, column-reverse).
• justify-content: Flex elementləri əsas ox boyunca hizalayır (flex-start, flex-end, center, space-between, space-around, space-evenly).
• align-items: Flex elementləri kross ox boyunca hizalayır (flex-start, flex-end, center, baseline, stretch).
• flex-wrap: Əgər yer kifayət etməzsə, flex elementlərin yeni sətir və ya sütuna keçib-keçməyəcəyini müəyyən edir (nowrap, wrap, wrap-reverse).

Flex elementlər üçün əsas xüsusiyyətlər:

• order: Flex elementin vizual sırasını təyin edir (standart 0).
• flex-grow: Flex elementin digər elementlərə nisbətən nə qədər böyüyə biləcəyini müəyyən edir (standart 0).
• flex-shrink: Flex elementin digər elementlərə nisbətən nə qədər kiçilə biləcəyini müəyyən edir (standart 1).
• flex-basis: Boş yerin bölüşdürülməsindən əvvəl flex elementin başlanğıc ölçüsünü təyin edir (standart auto).
• align-self: Xüsusi element üçün kross ox boyunca hizalanmanı dəyişdirir.

İstifadə nümunəsi:

.container {
  display: flex;
  justify-content: center; /* Əsas ox boyunca mərkəzləşdirmə */
  align-items: center; /* Kross ox boyunca mərkəzləşdirmə */
  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>

Bu, elementləri asanlıqla mərkəzləşdirməyə, adaptiv şəbəkələr yaratmağa və elementlər arasındakı boşluğu idarə etməyə imkan verir.