Flexbox — CSS-də elementlərin səhifə daxilində çevik şəkildə yerləşdirilməsi, hizalanması və aralarındakı boşluqların idarə olunması üçün istifadə olunan layout sistemidir. Flexbox sözünün tam adı Flexible Box Layout-dur. Sadə dillə desək, bir neçə elementi yan-yana, alt-alta, mərkəzdə və ya aralarında bərabər məsafə olmaqla yerləşdirmək istəyirsinizsə, Flexbox bu prosesi xeyli asanlaşdırır. Məsələn, veb saytın yuxarı hissəsində loqo solda, menyu isə sağda yerləşməlidir. Yaxud üç məhsul kartını bir sətirdə göstərmək və onların arasındakı məsafəni bərabər etmək istəyirsiniz. Bu tip layout-lar Flexbox vasitəsilə rahat şəkildə hazırlana bilər. Flexbox xüsusilə Front-End proqramlaşdırmada naviqasiya menyuları, düymə qrupları, kartlar, formalar, header-lər və responsive interfeyslərin hazırlanmasında geniş istifadə olunur.

Flexbox nə üçün istifadə olunur?

Əvvəllər veb səhifədə elementləri düzgün yerləşdirmək üçün float, inline-block və müxtəlif manual margin hesablamalarından istifadə edilirdi. Flexbox isə elementlərin yerləşdirilməsi və hizalanması üçün daha sistemli yanaşma təqdim edir.

Flexbox vasitəsilə:

• elementləri üfüqi və ya şaquli yerləşdirmək;
• elementləri mərkəzləşdirmək;
• aralarında bərabər boşluq yaratmaq;
• mövcud sahəni elementlər arasında bölüşdürmək;
• elementlərin ölçüsünü boş sahəyə uyğun dəyişmək;
• lazım olduqda elementləri növbəti sətrə keçirmək;
• responsive layout-lar yaratmaq mümkündür.

Flexbox-un əsas üstünlüklərindən biri odur ki, parent və child elementlərin yerləşdirilməsini ayrıca böyük həcmdə CSS yazmadan idarə etmək mümkündür.

Flexbox necə işləyir?

Flexbox istifadə etmək üçün ilk növbədə parent elementə:

display: flex;

yazılır.

Məsələn:

<div class="container">

<div class="item">1</div>

<div class="item">2</div>

<div class="item">3</div>

</div>

CSS:

.container {

display: flex;

}

display: flex yazıldıqdan sonra .container flex container, onun birbaşa child elementləri isə flex items olur.

Bu nümunədə:

container → Flex Container

item → Flex Items

Flexbox-un əsas xüsusiyyətləri bundan sonra container və item-lərə tətbiq olunur.

Flex Container nədir?

Flex Container Flexbox layout-un tətbiq edildiyi parent elementdir.

Məsələn:

.container {

display: flex;

}

Bu elementin daxilində yerləşən birbaşa child elementlər flex item olur.

Flex Container üzərində əsasən aşağıdakı xüsusiyyətlər istifadə edilir:

flex-direction

justify-content

align-items

flex-wrap

align-content

gap

Bu xüsusiyyətlər container daxilindəki elementlərin necə yerləşəcəyini müəyyən edir.

Flex Item nədir?

Flex Item — Flex Container daxilində yerləşən birbaşa child elementdir.

Məsələn:

<div class="container">

<div class="card">Kart 1</div>

<div class="card">Kart 2</div>

<div class="card">Kart 3</div>

</div>

Burada .container Flex Container, üç .card elementi isə Flex Item-dır. Flex Item üzərində flex-grow, flex-shrink, flex-basis, flex, align-self və order kimi xüsusiyyətlərdən istifadə edilə bilər.

Main Axis və Cross Axis nədir?

Flexbox-u düzgün başa düşmək üçün Main Axis və Cross Axis anlayışlarını bilmək vacibdir. Main Axis flex elementlərin əsas yerləşmə istiqamətidir. Cross Axis isə Main Axis-ə perpendikulyar olan istiqamətdir.

Əgər:

flex-direction: row;

istifadə olunursa, əsas istiqamət üfüqidir.

Bu zaman:

Main Axis → üfüqi

Cross Axis → şaquli

Əgər:

flex-direction: column;

istifadə olunursa:

Main Axis → şaquli

Cross Axis → üfüqi

Bu anlayış xüsusilə justify-content və align-items arasındakı fərqi başa düşmək üçün vacibdir.

flex-direction nədir?

flex-direction flex item-lərin hansı istiqamətdə yerləşəcəyini müəyyən edir.

Əsas dəyərlər bunlardır:

flex-direction: row;

flex-direction: row-reverse;

flex-direction: column;

flex-direction: column-reverse;

Default dəyər:

flex-direction: row;

olduğu üçün elementlər adətən soldan sağa bir sətirdə yerləşir.

Məsələn:

.container {

display: flex;

flex-direction: column;

}

yazıldıqda elementlər alt-alta yerləşəcək.

justify-content nədir?

justify-content flex item-lərin Main Axis üzrə necə yerləşəcəyini müəyyən edir.

Ən çox istifadə olunan dəyərlər bunlardır:

justify-content: flex-start;

justify-content: flex-end;

justify-content: center;

justify-content: space-between;

justify-content: space-around;

justify-content: space-evenly;

Məsələn:

.container {

display: flex;

justify-content: center;

}

elementləri Main Axis üzrə mərkəzləşdirir.

Əgər:

justify-content: space-between;

istifadə olunarsa, ilk və son element kənarlarda yerləşir, qalan boş sahə isə elementlərin arasında bölüşdürülür. Bu xüsusiyyət naviqasiya menyuları və kart sıralarında tez-tez istifadə olunur.

align-items nədir?

align-items Flex Container daxilindəki elementlərin Cross Axis üzrə necə hizalanacağını müəyyən edir.

Əsas dəyərlər:

align-items: stretch;

align-items: flex-start;

align-items: flex-end;

align-items: center;

align-items: baseline;

Məsələn:

.container {

display: flex;

align-items: center;

}

elementləri Cross Axis üzrə mərkəzləşdirir. justify-content və align-items arasındakı əsas fərq onların fərqli axis-lərdə işləməsidir.

Flexbox ilə elementi necə mərkəzləşdirmək olar?

Flexbox-un ən çox istifadə olunan nümunələrindən biri elementi həm üfüqi, həm də şaquli mərkəzləşdirməkdir.

Məsələn:

.container {

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

}

Burada:

justify-content: center — Main Axis üzrə;

align-items: center — Cross Axis üzrə

mərkəzləşdirmə aparır. Bu yanaşma login formaları, modal pəncərələr və müxtəlif UI bloklarının mərkəzləşdirilməsində istifadə edilə bilər.

gap nədir?

gap Flex Item-lər arasındakı məsafəni müəyyən etmək üçün istifadə olunur.

Məsələn:

.container {

display: flex;

gap: 20px;

}

Bu halda bütün Flex Item-lər arasında 20px məsafə yaranır. Əvvəllər eyni nəticə üçün child elementlərə ayrıca margin yazmaq lazım gəlirdi. gap isə məsafəni container səviyyəsində idarə etməyə imkan verir.

Məsələn, üç məhsul kartı üçün:

.products {

display: flex;

gap: 24px;

}

yazmaq kifayət edə bilər.

flex-wrap nədir?

Flexbox default olaraq elementləri bir sətirdə saxlamağa çalışır. Elementlərin container daxilinə sığmadıqda yeni sətirə keçməsi üçün flex-wrap istifadə olunur.

Məsələn:

.container {

display: flex;

flex-wrap: wrap;

}

Bu xüsusiyyət kart layout-larında xüsusilə faydalıdır. Məsələn, geniş ekranda dörd kart bir sətirdə görünə, ekran daraldıqda isə bəzi kartlar avtomatik növbəti sətirə keçə bilər.

Əsas dəyərlər:

flex-wrap: nowrap;

flex-wrap: wrap;

flex-wrap: wrap-reverse;

Default dəyər nowrap-dır.

flex-grow nədir?

flex-grow Flex Item-in container daxilində qalan boş sahədən nə qədər pay alacağını müəyyən edir.

Məsələn:

.item {

flex-grow: 1;

}

bütün elementlərdə tətbiq olunarsa, mövcud boş sahə onların arasında bölüşdürülə bilər.

Məsələn:

.item-1 {

flex-grow: 1;

}

.item-2 {

flex-grow: 2;

}

Bu halda ikinci element mövcud boş sahədən birinci elementə nisbətən daha böyük pay ala bilər.

flex-shrink nədir?

flex-shrink container daxilində yer çatmadıqda Flex Item-in nə qədər kiçilə biləcəyini müəyyən edir.

Məsələn:

.item {

flex-shrink: 1;

}

elementə ehtiyac olduqda kiçilməyə imkan verir.

Əgər:

.item {

flex-shrink: 0;

}

yazılarsa, həmin element boş sahə azaldıqda flex mexanizminə əsasən kiçilməməyə çalışacaq. Bu xüsusiyyət müəyyən elementlərin minimum vizual ölçüsünü qorumaq lazım gəldikdə faydalı ola bilər.

flex-basis nədir?

flex-basis Flex Item-in boş sahə bölüşdürülməzdən əvvəl əsas istiqamətdə başlanğıc ölçüsünü müəyyən edir.

Məsələn:

.card {

flex-basis: 300px;

}

Bu halda kartın ilkin main-size ölçüsü 300px kimi nəzərə alınır. flex-basis xüsusilə flex-grow və flex-shrink ilə birlikdə istifadə olunduqda daha güclü olur.

flex nədir?

flex flex-grow, flex-shrink və flex-basis xüsusiyyətlərini bir sətrdə yazmağa imkan verən shorthand property-dir.

Məsələn:

.item {

flex: 1 1 300px;

}

burada dəyərlər müvafiq olaraq:

flex-grow

flex-shrink

flex-basis

üçün istifadə olunur.

Praktik layihələrdə tez-tez:

.item {

flex: 1;

}

kimi daha qısa formaya da rast gəlinir.

align-self nədir?

align-items bütün Flex Item-lərə birlikdə təsir etdiyi halda, align-self yalnız konkret bir Flex Item-in Cross Axis üzrə hizalanmasını dəyişməyə imkan verir.

Məsələn:

.item-2 {

align-self: flex-end;

}

Bu halda yalnız ikinci element digər item-lərdən fərqli mövqedə yerləşdirilə bilər.

order nədir?

order Flex Item-lərin vizual yerləşmə ardıcıllığını dəyişməyə imkan verir.

Məsələn:

.item-1 {

order: 2;

}

.item-2 {

order: 1;

}

Bu halda ikinci item vizual olaraq birinci görünə bilər. Lakin order yalnız vizual düzülüşü dəyişdirmək üçün düşünülməlidir. HTML strukturunun məntiqi ardıcıllığını sırf vizual məqsədlə pozmaq accessibility və klaviatura naviqasiyası baxımından problemlər yarada bilər. Bu səbəbdən düzgün HTML ardıcıllığını saxlamaq və order xüsusiyyətindən ehtiyac olduqda istifadə etmək daha məqsədəuyğundur.

Flexbox və CSS Grid arasında fərq nədir?

Flexbox və CSS Grid hər ikisi veb səhifədə layout yaratmaq üçün istifadə olunur, lakin fərqli problemləri həll etmək üçün daha uyğun ola bilirlər. Flexbox əsasən bir istiqamətdə işləyir.

Yəni elementləri əsasən:

• bir sətir;
• və ya bir sütun

üzrə idarə etmək üçün uyğundur.

CSS Grid isə ikiölçülü layout sistemidir və eyni anda həm sətirləri, həm də sütunları idarə etməyə imkan verir. Məsələn, naviqasiya menyusunu yerləşdirmək üçün Flexbox daha rahat ola bilər. Bir neçə sətir və sütundan ibarət kompleks dashboard layout-u üçün isə CSS Grid daha uyğun ola bilər. Real layihələrdə Flexbox və Grid çox vaxt bir-birinin alternativi kimi deyil, birlikdə istifadə olunur.

Flexbox responsive design üçün istifadə olunurmu?

Bəli. Flexbox-un elementləri böyütmək, kiçiltmək və yeni sətirlərə keçirmək imkanları responsive interfeyslərin hazırlanmasını asanlaşdırır.

Məsələn:

.cards {

display: flex;

flex-wrap: wrap;

gap: 20px;

}

.card {

flex: 1 1 280px;

}

Bu nümunədə kartlar boş sahəyə uyğun ölçülə və container daraldıqda növbəti sətirə keçə bilər. Lakin tam responsive dizayn üçün Flexbox-la yanaşı Media Queries, CSS Grid və çevik ölçü vahidlərindən də istifadə etmək mümkündür.

Flexbox harada istifadə olunur?

Flexbox bir çox Front-End layout probleminin həllində istifadə edilə bilər. Ən geniş yayılmış nümunələrə naviqasiya menyuları, header-lər, düymə qrupları, məhsul kartları, form elementləri, modal pəncərələr, sidebar strukturları və müxtəlif content blokları daxildir.

Məsələn, sadə navigation belə hazırlana bilər:

.navbar {

display: flex;

justify-content: space-between;

align-items: center;

}

Burada loqo və menyu eyni sətirdə yerləşdirilə və aralarındakı boş sahə avtomatik bölüşdürülə bilər.

Flexbox istifadə edərkən ən çox edilən səhvlər hansılardır?

Yeni başlayanların etdiyi ən geniş yayılmış səhvlərdən biri justify-content və align-items xüsusiyyətlərini qarışdırmaqdır. Bu xüsusiyyətlərin hansı istiqamətdə işləməsi flex-direction dəyərindən asılıdır. Digər problem flex-wrap istifadə etmədən çoxlu elementi bir sətirdə yerləşdirməyə çalışmaqdır. Bu halda kiçik ekranlarda elementlər həddindən artıq sıxıla və ya overflow yarana bilər. Həmçinin bütün layout-ları yalnız Flexbox ilə qurmağa çalışmaq düzgün yanaşma deyil. Bəzi ikiölçülü səhifə strukturlarında CSS Grid daha uyğun ola bilər. Flexbox-un məqsədi hər CSS layout problemini həll etmək deyil, uyğun hallarda elementlərin bir istiqamətdə çevik şəkildə idarə olunmasını asanlaşdırmaqdır.

Flexbox öyrənməyə haradan başlamaq lazımdır?

Flexbox öyrənməzdən əvvəl HTML və CSS-in əsaslarını bilmək faydalıdır. Xüsusilə HTML elementləri, class-lar, CSS selector-lar, Box Model, width, height, margin və padding anlayışları yaxşı baza yaradır.

Daha sonra bu ardıcıllıqla inkişaf etmək mümkündür:

display: flex → Main/Cross Axis → flex-direction → justify-content → align-items → gap → flex-wrap → flex-grow / flex-shrink / flex-basis

Bundan sonra CSS Grid, Media Queries və Responsive Design mövzularına keçmək olar. Flexbox-u yaxşı öyrənməyin ən yaxşı yollarından biri real komponentlər hazırlamaqdır. Naviqasiya menyusu, məhsul kartları, pricing bölməsi, login səhifəsi və responsive kart layout-u kimi kiçik layihələr mövzunu praktik şəkildə mənimsəməyə kömək edir.

Flexbox, CSS Grid, responsive dizayn, HTML, CSS, JavaScript, React.js və digər müasir veb texnologiyalarını praktiki layihələr üzərində öyrənmək istəyirsinizsə, JET Academy-nin Frontend Proqramlaşdırma Təlimi ilə tanış ola bilərsiniz.