CSS-də Flexbox ilə Responsiv Dizayn

Mar 17, 2026 OP

Thread Starter #0

Salam, vebmasterlər və kodlaşdırma həvəskarları! Bu gün sizə veb-saytlarınız üçün responsiv dizayn yaratmağı xeyli asanlaşdıran güclü bir CSS modulu olan Flexbox haqqında danışmaq istəyirəm. Flexbox, konteyner içərisindəki elementlərin yerləşməsini və ölçülərini idarə etmək üçün nəzərdə tutulmuş bir ölçülü layout sistemidir. Bu, xüsusilə müxtəlif ekran ölçülərinə uyğunlaşan çevik və dinamik interfeyslər qurmaq üçün idealdır.

Niyə Flexbox?
Ənənəvi float əsaslı layout metodları ilə müqayisədə, Flexbox daha intuitiv və daha az kodla daha mürəkkəb dizaynları həyata keçirməyə imkan verir. Onun əsas üstünlükləri bunlardır:

Asan Mərkəzləşdirmə: Elementləri şaquli və üfüqi olaraq mərkəzləşdirmək çox sadədir.
Çevik Ölçüləndirmə: Elementlər mövcud məkanı doldurmaq və ya kiçilmək üçün avtomatik olaraq ölçülərini dəyişə bilər.
Sifarişin Dəyişdirilməsi: HTML-dəki mənbə sırasını dəyişdirmədən elementlərin vizual sırasını dəyişə bilərsiniz.
Responsivlik: Müxtəlif cihazlar və ekran ölçüləri üçün asanlıqla uyğunlaşan layoutlar yaratmaq mümkündür.

Əsas Flexbox Xüsusiyyətləri:
Flexbox-u istifadə etmək üçün, ilk növbədə, valideyn elementə

CODE

1display: flex;

xüsusiyyətini tətbiq etməlisiniz. Bu, onu flex konteynerinə çevirir və daxilindəki bütün birbaşa uşaq elementlərini flex item-lərinə çevirir.

display: flex;
Valideyn elementini flex konteyneri edir.
flex-direction: row | row-reverse | column | column-reverse;
Flex item-lərinin əsas ox boyunca hansı istiqamətdə yerləşəcəyini təyin edir.
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
Əsas ox boyunca item-lərin necə paylanacağını təyin edir.
align-items: flex-start | flex-end | center | baseline | stretch;
Çapraz ox boyunca item-lərin necə paylanacağını təyin edir.
flex-wrap: nowrap | wrap | wrap-reverse;
Item-lərin tək bir sətirdə qalacağını, yoxsa birdən çox sətrə keçəcəyini təyin edir.

Praktik Nümunə: Üç Sütunlu Responsiv Layout
Aşağıdakı nümunədə, Flexbox-dan istifadə edərək necə sadə bir üç sütunlu layout yarada biləcəyinizi göstərirəm. Ekran ölçüsü kiçildikdə, sütunlar avtomatik olaraq bir-birinin altına keçəcək.

HTML (index.html):

CODE

1234567891011121314151617
<!DOCTYPE html>
<html lang="az">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Nümunəsi</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="item">Sütun 1</div>
        <div class="item">Sütun 2</div>
        <div class="item">Sütun 3</div>
    </div>
</body>
</html>

CSS (style.css):

CODE

123456789101112131415161718192021222324252627282930313233343536
body {
    font-family: Arial, sans-serif;
    margin: 0;
    background-color: #f4f4f4;
}

.container {
    display: flex; /* Flex konteyneri edirik */
    flex-wrap: wrap; /* Elementlərin növbəti sətrə keçməsinə icazə veririk */
    justify-content: space-around; /* Elementləri bərabər şəkildə paylayırıq */
    padding: 20px;
    max-width: 1200px;
    margin: 30px auto;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.item {
    background-color: #007bff;
    color: white;
    padding: 20px;
    margin: 10px;
    border-radius: 5px;
    text-align: center;
    flex: 1 1 300px; /* Çeviklik: böyü, kiçil, əsas ölçü */
    min-width: 280px; /* Minimum eni təyin edirik ki, çox kiçilməsin */
}

/* Kiçik ekranlar üçün media sorğusu */
@media (max-width: 768px) {
    .item {
        flex: 1 1 100%; /* Kiçik ekranlarda hər sütun tam eni tutur */
    }
}

Bu nümunədə,

CODE

1flex: 1 1 300px;

xüsusiyyəti hər bir item-in necə davranacağını müəyyən edir:

1: flex-grow dəyəri – elementin mövcud məkanı nə qədər tutacağını göstərir (burada bütün item-lər bərabər böyüyür).
1: flex-shrink dəyəri – elementin lazım olduqda nə qədər kiçiləcəyini göstərir (burada bütün item-lər bərabər kiçilir).
300px: flex-basis dəyəri – elementin əsas ölçüsü (müəyyən edilmiş eni).

Media sorğusu ilə 768px-dən kiçik ekranlarda hər bir sütun tam eni (100%) tutur, beləliklə bir-birinin altına düşərək responsiv bir görünüş təmin edir.

Flexbox, müasir veb inkişafında əvəzolunmaz bir vasitədir. Onu öyrənmək və tətbiq etmək, kodunuzu daha təmiz, daha idarəolunan və daha responsiv etməyə kömək edəcək. Ümid edirəm ki, bu məlumatlar sizə faydalı oldu! Hər hansı bir sualınız olarsa, çəkinməyin.

CSS-də Flexbox ilə Responsiv Dizayn

Similar threads

Report Content

CSS-də Flexbox ilə Responsiv Dizayn

Leave a rating: CSS-də Flexbox ilə Responsiv Dizayn

Raters: CSS-də Flexbox ilə Responsiv Dizayn

Similar threads

Report Content