Elementlərin yerləşdirilməsi üçün flex və grid istifadə etmək nə vaxt məsləhətdir?

Flexbox və CSS Grid, düzənlər yaratmaq üçün nəzərdə tutulmuşdur.

Flexbox daha çox uyğundur:

• Bir ölçülü düzənlər: Elementlərin bir istiqamətdə (sətir və ya sütun) hizalanması və paylanması.
• Daxili hizalama: Elementlərin konteyner daxilində horizontal və ya vertical yerləşdirilməsi.
• Uyumlu komponentlərin yaradılması: Ekran ölçüsünə görə istiqamət və sıralamanı asanlıqla dəyişdirmək.
• Kiçik element qrupları: Naviqasiya menyuları, məhsul kartları, form elementləri.

.konteyner-flex {
  display: flex; /* Flex konteyner kimi təyin edir */
  justify-content: center; /* Elementləri üfüqi mərkəzə yerləşdirir */
  align-items: center; /* Elementləri şaquli mərkəzə yerləşdirir */
}

Grid daha çox uyğundur:

• İki ölçülü düzənlər: Satır və sütunların eyni zamanda idarə olunduğu mürəkkəb şəbəkələr yaratmaq.
• Makro düzən: Səhifənin əsas elementlərinin yerləşdirilməsi (başlıq, yan panel, məzmun, altbilgi).
• Mürəkkəb və cavab verən düzənlər yaratmaq: Fərqli ekran ölçüləri üçün sahələri və yerləşməsini təyin etmək.
• Elementlərin tam nəzarəti: Hər bir elementin mövqeyini dəqiq müəyyən etmək.

.konteyner-grid {
  display: grid; /* Grid kimi təyin edir */
  grid-template-columns: 1fr 2fr 1fr; /* Müxtəlif nisbətlərdə 3 sütun */
  grid-template-rows: auto 1fr auto; /* 3 sətir */
  gap: 10px; /* Şəbəkə elementləri arasında boşluq əlavə edir */
}

.element {
  grid-column: 2; /* Elementi ikinci sütuna yerləşdirir */
  grid-row: 1 / span 2; /* Elementi ilk sətirdə yerləşdirir və 2 sətir tutur */
}

Birlikdə nə zaman istifadə etmək:

• Grid əsas səhifə düzəni üçün (makro-düzən), və Flexbox elementlərin şəbəkə içində hizalanması üçün (mikro-düzən).
• Məsələn, grid yan panel və məzmunun yerləşdirilməsini müəyyən edir, və Flexbox yan panel içində elementlərin yerləşdirilməsi üçün istifadə olunur (naviqasiya menyusu).

Xülasə cədvəli:

Xüsusiyyətlər	Flexbox	Grid
Ölçmə	Bir ölçülü	İki ölçülü
Əsas istifadə	Daxili hizalama, komponentlər	Makro-düzən, mürəkkəb şəbəkələr
Nəzarət	Əsasən bir oxda	Hər iki oxda eyni zamanda
Digər texnologiyalarla inteqrasiya	Yaxşı	Yaxşı

Seçim, həll ediləcək vəzifə və tələb olunan düzənin mürəkkəbliyinə bağlıdır.