Səhifədə elementlərin yerləşdirilməsi üçün flexbox…

Flexbox (və ya Flexible Box Layout) CSS moduludur, konteyner daxilində elementlərin çevik düzənini yaratmaq üçün nəzərdə tutulmuşdur, bu da boşluğu asanlıqla bölüşdürməyə və elementləri hizalamağa imkan verir, hətta onların ölçüləri məlum olmayan və ya dinamik olaraq dəyişən olsa belə.

Flexbox-ın əsas anlayışı flex-container və onun flex-elementləri dir.

Flex-container üçün xüsusiyyətlər (display: flex;):

flex-direction: flex-elementlərin yerləşdirilmə istiqamətini müəyyən edir (əsas ox).
- row (standart): üfüqi, soldan sağa.
- row-reverse: üfüqi, sağdan sola.
- column: şaquli, yuxarıdan aşağı.
- column-reverse: şaquli, aşağıdan yuxarı.
flex-wrap: flex-elementlərin yeni sətərə keçirilib-keçilməyəcəyini müəyyən edir.
- nowrap (standart): bütün elementlər bir sətirdə.
- wrap: yeni sətərə keçir.
- wrap-reverse: yeni sətərə keçir, amma tərs ardıcıllıqla.
justify-content: əsas ox boyunca flex-elementləri hizalayır.
- flex-start (standart): əsas oxun başlanğıcında.
- flex-end: əsas oxun sonunda.
- center: mərkəzində.
- space-between: elementlər arasında bərabər boşluq.
- space-around: elementlərin ətrafında bərabər boşluq.
- space-evenly: elementlər və onların ətrafında bərabər boşluq.
align-items: elementləri perpendicular (perpendikulyar) ox boyunca hizalayır.
- stretch (standart, elementlərin hündürlüyü/enliyi təyin olunmayıbsa): elementləri perpendicular ox boyunca uzadır.
- flex-start: başlanğıcda.
- flex-end: sonunda.
- center: mərkəzində.
- baseline: mətnin əsas xəttinə uyğun.
align-content: flex sətirlərini perpendicular ox boyunca hizalayır, sətirlər çox olarsa (flex-wrap: wrap). Bu justify-content-ə bənzəyir, amma sətirlər üçün.
- stretch (standart): sətirləri uzadır.
- flex-start: başlanğıcda.
- flex-end: sonunda.
- center: mərkəzində.
- space-between: bərabər paylanma, sətirlər arasında boşluq.
- space-around: bərabər paylanma, sətirlərin ətrafında boşluq.
gap, row-gap, column-gap: elementlər arasındakı boşluğu təyin edir.

.flex-container {
  display: flex; /* Flex konteyner edir */
  flex-direction: row; /* Üfüqi yerləşdirmə */
  flex-wrap: wrap; /* Yeni sətirə keçid */
  justify-content: center; /* Ortada hizalama */
  align-items: center; /* Vertikal hizalama */
  gap: 10px; /* 10px boşluq */
}

Flex-elementlər üçün xüsusiyyətlər (birbaşa flex-konteynerin övladları):

order: elementin konteynerdəki sırasını müəyyən edir (standart 0). Kiçik dəyərlər əvvəl çıxar.
flex-grow: elementin digər elementlərlə müqayisədə genişlənmə nisbətini göstərir, mövcud boşluğu tutaraq. Standart 0.
flex-shrink: boşluq azaldıqda elementin necə sıxılacağını göstərir. Standart 1.
flex-basis: boş yer paylanmadan əvvəl elementin əsas ölçüsü. Px, %, rem, auto və s. ola bilər. (standart auto).
flex: flex-grow, flex-shrink, flex-basis üçün qısaldılmış xüsusiyyət.
align-self: bu elementin perpendicular ox boyunca hizalanmasını dəyişir, align-items-i üstələyir. Eyni dəyərləri ala bilər.

.flex-item {
  order: 2; /* Bu element ikinci olacaq */
  flex-grow: 1; /* Qalan yeri tutacaq */
  flex-shrink: 0; /* Sıxılmayacaq */
  flex-basis: 100px; /* Əsas ölçü 100px */
  align-self: flex-start; /* Başlanğıcda hizalanma */
}

.another-item {
  flex: 1 1 auto; /* grow: 1, shrink: 1, basis: auto */
}

Flexbox müxtəlif düzənlər yaratmağa imkan verir, sadə hizalamalardan daha mürəkkəb və adaptiv strukturlara qədər, konteyner içindəki elementlərin bölüşdürülməsi və hizalanmasını idarə edir.

Səhifədə elementlərin yerləşdirilməsi üçün flexbox necə istifadə olunur?