Flexbox (Flexible Box Layout) — CSS-də istifadə olunan bir layout modelidir və veb səhifələrdə elementlərin çevik və rahat şəkildə düzülməsini təmin edir. Əsas məqsədi, müxtəlif ekran ölçülərində və məzmun uzunluğunda belə dizaynın adaptiv və səliqəli qalmasını təmin etməkdir.

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

📏 İstiqamət seçimi: Elementləri yatay (row) və ya şaquli (column) istiqamətdə düzə bilərsiz.

🔄 Avtomatik uyğunlaşma: Məzmun dəyişdikcə elementlər avtomatik yerləşir, dizayn pozulmur.

🎯 Boşluq və hizalama idarəsi: Elementlər arasında məsafə, hizalanma və boşluqlar asanlıqla təyin olunur (justify-content, align-items və s.).

📱 Responsive dizayn: Müxtəlif cihaz və ekran ölçülərinə uyğun struktur yaradır.

🧱 Kompleks layout-ları sadə kodla yazmaq: Əvvəllər mürəkkəb olan dizaynlar indi daha az kodla mümkün olur.

Əsas anlayışlar:

• Flex konteyner: Flex xüsusiyyəti tətbiq edilən element (valideyn).
• Flex elementlər: Flex konteynerin içindəki uşaq elementlər.

.container {

display: flex; /* Flex konteyner */

justify-content: space-between;

align-items: center;

}

Sadə nümunə:

<div class="container">

<div>Bir</div>

<div>İki</div>

<div>Üç</div>

</div>

.container {

display: flex;

justify-content: space-around;

}

Flexbox-un real istifadəsi:

• Navigasiya menyuları
• Kart düzülüşləri
• Mobil uyğun dizaynlar
• Dashboard interfeysləri və s.