CSS Flexbox

[codex]

CSS Flexbox (Flexible Box Layout) veb səhifələrdə elementlərin elastik və səmərəli şəkildə yerləşdirilməsi üçün istifadə olunan güclü bir layout modelidir. Flexbox xüsusilə kompleks tərtibatlarda (naviqasiya panelləri, kart düzülüşləri, məzmun bölgüləri və s.) dizaynerlərə və proqramçılara böyük rahatlıq təmin edir. Bu məqalədə Flexbox-un əsas anlayışları, xüsusiyyətləri və istifadəsi ətraflı şəkildə izah olunacaq.

Flexbox-un əsas anlayışları

Flex Container və Flex Item

Flexbox istifadəsi üçün ilk öncə bir konteyner yaradılır. Bu konteyner display: flex; və ya display: inline-flex; ilə aktivləşdirilir:

.container {
  display: flex;
}

Bu konteyner daxilində olan bütün child elementlər (flex item-lar) artıq flexbox qaydalarına uyğun şəkildə davranacaq.

Əsas istiqamət (Main Axis) və Çarpaz istiqamət (Cross Axis)

Flexbox-da iki əsas ox anlayışı var:

• Main Axis – elementlərin düzüləcəyi əsas istiqamət.
• Cross Axis – əsas oxun əksi istiqamət.

flex-direction xüsusiyyəti main axis-in istiqamətini təyin edir:

.container {
  flex-direction: row;        /* Default - soldan sağa */
  flex-direction: row-reverse;
  flex-direction: column;
  flex-direction: column-reverse;
}

Elementlərin əsas oxa görə yerləşdirilməsi: justify-content

Flex item-ları əsas ox üzrə necə yerləşdirmək istədiyinizi təyin edir:

.container {
  justify-content: flex-start;   /* Sol tərəfə düzülür */
  justify-content: flex-end;     /* Sağ tərəfə düzülür */
  justify-content: center;       /* Ortaya düzülür */
  justify-content: space-between;/* Aralarında boşluq, kənarlar sıx */
  justify-content: space-around; /* Ətrafında bərabər boşluq */
  justify-content: space-evenly; /* Bütün boşluqlar bərabər */
}

Elementlərin çarpaz oxa görə yerləşdirilməsi: align-items

Cross axis üzrə yerləşdirməni təyin edir:

.container {
  align-items: stretch;     /* Default - boyu uyğunlaşdırır */
  align-items: flex-start;  /* Yuxarıya düzülür */
  align-items: flex-end;    /* Aşağıya düzülür */
  align-items: center;      /* Ortaya düzülür */
  align-items: baseline;    /* Mətnin xəttinə görə düzülür */
}

Çox sətirli flex yerləşdirmə: flex-wrap

Elementlər bir sətrə sığmadıqda, yeni sətrə keçməsini istəyirsinizsə:

.container {
  flex-wrap: nowrap;     /* Default - sarılmır */
  flex-wrap: wrap;       /* Sarılır */
  flex-wrap: wrap-reverse;
}

Kombinasiya üçün:

.container {
  flex-flow: row wrap;   /* flex-direction və flex-wrap birlikdə */
}

Çoxlu sətirlərin çarpaz oxa görə yerləşdirilməsi: align-content

Çoxlu sətirlər olduqda bütün sətirlərin cross axis üzrə yerləşməsini təyin edir:

.container {
  align-content: flex-start;
  align-content: flex-end;
  align-content: center;
  align-content: space-between;
  align-content: space-around;
  align-content: stretch;
}

Flex item xüsusiyyətləri

order: Elementlərin sırasını dəyişmək

Elementlərin sırasını dəyişmək üçün:

.item {
  order: 2; /* Default 0-dır, daha kiçik olan daha əvvəl gəlir */
}

flex-grow: Elementin böyümə qabiliyyəti

Elementin böyümə qabiliyyəti:

.item {
  flex-grow: 1;
}

Əgər bir neçə element flex-grow: 1; olarsa, boşluq bərabər paylaşılır.

flex-shrink: Elementin kiçilmə qabiliyyəti

Elementin kiçilmə qabiliyyəti:

.item {
  flex-shrink: 1;
}

flex-basis: Başlanğıc ölçü

Başlanğıc ölçünü təyin edir:

.item {
  flex-basis: 100px;
}

flex: Qısa yazılış

.item {
  flex: 1 0 100px; /* grow shrink basis */
}

align-self: Tək element üçün yerləşmə

Xüsusi bir item üçün fərdi yerləşdirmə:

.item {
  align-self: flex-start;
  align-self: center;
  align-self: flex-end;
  align-self: stretch;
}

Nümunə

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

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.item {
  background: #6c5ce7;
  color: white;
  padding: 20px;
  margin: 10px;
}

---

Flexbox, CSS-də çox güclü və geniş istifadə olunan layout texnologiyasıdır. Əgər dizaynınız dinamik və cavab verən olmalıdırsa, Flexbox sizin üçün ideal seçimdir. Tətbiqatlarda daha çevik, daha sadə və daha təmiz kod üçün Flexbox istifadə etməyi öyrənmək böyük üstünlükdür.

---

Flexbox haqqında hazırlanmış bəlkə də ən yaxşı tutorial:

https://www.youtube.com/watch?v=wsTv9y931o8