Flexbox nədir?

Flexbox (Flexible Box Layout) — CSS-də tək ölçülü bir modeldir və konteynerdəki elementlər arasında yer bölüşdürmək və güclü hizalama imkanları üçün nəzərdə tutulmuşdur. Bu, uşaqlıq elementlərinin (flex-elementlərin) ölçülərini, sırasını və hizalanmasını asanlıqla idarə etməyə imkan verir (flex-elementlər), onların ilkin sırasından və ya ölçülərindən asılı olmayaraq.

Flexbox-un əsas anlayışları:

• Flex-konteyner: display: flex və ya display: inline-flex təyin edilmiş element. Bu konteynerdə onun birbaşa uşaqları üçün layout qaydaları müəyyən edilir.
• Flex-elementlər: Flex-konteynerin birbaşa uşaqları. Bu elementlərə Flexbox xüsusiyyətləri tətbiq edilir və onların konteyner daxilində davranışını müəyyən edir.
• Əsas ox (main axis): Flex-elementlərin yerləşdirildiyi ox. Əsasən üfüqi (soldan sağa), lakin flex-direction ilə dəyişdirilə bilər.
• Kross ox (cross axis): Əsas oxa perpendikulyar olan ox.
• Əsas başlanğıc (main start) / Əsas son (main end): Əsas ox boyunca başlanğıc və son.
• Kross başlanğıc (cross start) / Kross son (cross end): Kross ox boyunca başlanğıc və son.

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 müəyyən edir (row, row-reverse, column, column-reverse).
• flex-wrap: Flex-elementlərin yeni sətirə/ sütuna keçib-keçməyəcəyini müəyyən edir (nowrap, wrap, wrap-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).
• align-content: Flex elementlərinin xətlərini (əgər flex-wrap ilə çoxdursa) kross ox boyunca hizalayır.

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

• order: Flex elementin göstərilmə sırasını müəyyən edir (əvvəlcə 0).
• flex-grow: Flex elementin böyümə koeffisienti, onun sərbəst yerə nə qədər genişlənə biləcəyini göstərir.
• flex-shrink: Flex elementin sıxılma koeffisienti, onun nə qədər kiçilə biləcəyini göstərir.
• flex-basis: Flex elementin sərbəst yer bölüşdürülmədən əvvəl ilkin ölçüsü.
• flex: flex-grow, flex-shrink və flex-basis üçün qısaldılmış form.
• align-self: Xüsusi flex element üçün align-items-i yenidən təyin edir.

İstifadə nümunəsi:

HTML:

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

CSS:

.flex-container {
  display: flex; /* Konteyneri flex-konteyner edir */
  justify-content: center; /* Elementləri əsas ox boyunca mərkəzləşdirir */
  align-items: center; /* Elementləri kross ox boyunca mərkəzləşdirir */
  height: 200px; /* Hizalama üçün nümunə */
  border: 1px solid black;
}

.flex-item {
  width: 50px;
  height: 50px;
  background-color: lightblue;
  margin: 10px;
}

Flexbox-un əsas üstünlükləri:

• Elementləri üfüqi və şaquli istiqamətdə asanlıqla hizalamaq.
• Elementlər arasında sərbəst yer bölüşdürmək.
• Elementlərin sırasını asanlıqla dəyişmək.
• Float və position istifadə etmədən adaptiv dizayn.
• Müasir brauzerlərdə yaxşı dəstək.