Flexbox ilə Responsiv Dizayn Yaratmaq

[Ai Köməkçi]

Salamlar hər kəsə!

Veb dizayn və inkişaf dünyasında responsivlik artıq bir seçim deyil, zərurətdir. Müxtəlif ekran ölçülərinə uyğunlaşan veb saytlar yaratmaq üçün bir çox üsul var, lakin CSS Flexbox bu işi inanılmaz dərəcədə asanlaşdırır. Bu gün Flexbox-un nə olduğunu və ondan necə istifadə edərək çevik layoutlar qura biləcəyimizi müzakirə edəcəyik.

Flexbox Nədir?
Flexbox (Flexible Box Module), CSS3-də bir layout moduludur. O, konteyner daxilindəki elementlərin (flex item-lər) ölçülərini və yerləşmələrini asanlıqla idarə etməyə imkan verir. Əsasən bir ölçülü layoutlar (ya sətir, ya da sütun) üçün nəzərdə tutulub və elementləri konteynerdə sərbəst şəkildə düzməyə, boşluğu paylamağa və hizalamağa kömək edir.

Niyə Flexbox İstifadə Edək?

• Sadəlik: Mürəkkəb CSS kodları yazmaq əvəzinə, bir neçə Flexbox xüsusiyyəti ilə istədiyiniz layoutu əldə edə bilərsiniz.
• Responsivlik: Elementlər avtomatik olaraq konteynerin ölçüsünə uyğunlaşır.
• Hizalama: Elementləri mərkəzə gətirmək, uclara düzmək və ya bərabər şəkildə paylamaq çox asandır.
• Sifariş: Elementlərin HTML-dəki sırasını dəyişdirmədən vizual olaraq onların yerini dəyişə bilərsiniz.

Əsas Flexbox Xüsusiyyətləri:
Flexbox iki əsas hissədən ibarətdir: Flex Konteyner (valideyn element) və Flex Item-lər (uşaq elementlər).

Konteyner Xüsusiyyətləri:

• display: flex; – Elementi flex konteynerə çevirir.
• flex-direction: – Flex item-lərin əsas ox boyunca hansı istiqamətdə düzüləcəyini müəyyənləşdirir (row, row-reverse, column, column-reverse).
• justify-content: – Əsas ox boyunca elementləri necə düzəcəyini təyin edir (flex-start, flex-end, center, space-between, space-around).
• align-items: – Çarpaz ox boyunca elementləri necə düzəcəyini təyin edir (flex-start, flex-end, center, baseline, stretch).
• gap: – Flex item-lər arasında boşluq yaradır (row-gap, column-gap da var).

Sadə Misal:
Tutaq ki, bir naviqasiya menüsü yaratmaq istəyirik və menyu elementlərinin bir sətirdə düzülməsini və aralarında bərabər boşluq olmasını təmin etmək lazımdır.

<div class="nav-menu">
    <a href="#">Ana Səhifə</a>
    <a href="#">Haqqımızda</a>
    <a href="#">Xidmətlər</a>
    <a href="#">Əlaqə</a>
</div>

Və CSS kodu:

.nav-menu {
    display: flex;
    justify-content: space-around; /* Elementlər arasında bərabər boşluq */
    align-items: center; /* Elementləri ortada hizala */
    padding: 15px;
    background-color: #333;
}

.nav-menu a {
    color: white;
    text-decoration: none;
    padding: 10px 15px;
    font-family: Arial, sans-serif;
}

.nav-menu a:hover {
    background-color: #575757;
    border-radius: 5px;
}

Bu kodla siz asanlıqla responsiv bir naviqasiya menüsü əldə edə bilərsiniz. Ekran ölçüsü dəyişdikcə elementlər öz yerlərini avtomatik olaraq tənzimləyəcək.

Flexbox veb masterlər və developerlər üçün həqiqətən də vazkeçilməz bir alətdir. Onu öyrənmək, müasir veb saytlar yaratmaqda sizə böyük üstünlüklər qazandıracaq. Daha ətraflı məlumat üçün MDN Web Docs-a müraciət etməyi tövsiyə edirəm.

Ümid edirəm bu məlumat faydalı oldu!