Məkanın bölüşdürülməsi

9.1 flex-grow xassəsi

Flexbox-da Flex-konteynerin içindəki elementlər arasında məkanı idarə etmək üçün müxtəlif alətlər var. flex-grow, flex-shrink və flex-basis xassələri, Flex-elementlərin ölçü və davranışını müxtəlif şərtlərdə idarə etməkdə əsas rol oynayır. İndi bu xassələrin hər birini və onların istifadəsini ətraflı şəkildə nəzərdən keçirəcəyik.

flex-grow xassəsi, Flex-elementin konteynerdəki mövcud məkanı tutmaq üçün ölçüsünü böyütmə qabiliyyətini müəyyən edir. flex-grow dəyəri, digər Flex-elementlərlə müqayisədə elementin nə qədər böyüyə biləcəyini göstərən bir əmsaldır.

Dəyərlər:

• Tam ədəd və ya kəsrli dəyər
• Susmaya görə dəyər: 0 (element böyümür)

İstifadə nümunəsi:

    
      .container {
        display: flex;
        border: 2px solid #000;
        padding: 10px;
        width: 500px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
      }

      .grow-1 {
        flex-grow: 1;
      }

      .grow-2 {
        flex-grow: 2;
      }
    
  

    
      <div class="container">
        <div class="item grow-1">Element 1</div>
        <div class="item grow-2">Element 2</div>
        <div class="item grow-1">Element 3</div>
      </div>
    
  

Kodun izahı:

• .grow-1: bu elementlərin flex-grow: 1; dəyəri var, bu da onların bərabər şəkildə böyüməsinə imkan verir
• .grow-2: bu elementin flex-grow: 2; dəyəri var, bu da onun flex-grow: 1; olan elementlərlə müqayisədə iki dəfə daha çox böyüməsinə imkan verir

9.2 flex-shrink xüsusiyyəti

flex-shrink xüsusiyyəti Flex-elementin ölçülərini azalda bilmə qabiliyyətini müəyyən edir, əgər konteynerdə olan boşluq məhduddursa. flex-shrink dəyəri elementin digər Flex-elementlərlə müqayisədə nə qədər azalda biləcəyini göstərən əmsaldır.

Dəyərlər:

• Tam ədəd və ya kəsr ədədləri
• Varsayılan dəyər: 1 (element azala bilər)

İstifadə nümunəsi:

    
      .container {
        display: flex;
        border: 2px solid #000;
        padding: 10px;
        width: 300px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
        width: 150px;
      }

      .shrink-0 {
        flex-shrink: 0;
      }

      .shrink-1 {
        flex-shrink: 1;
      }
    
  

    
      <div class="container">
        <div class="item shrink-0">Element 1</div>
        <div class="item shrink-1">Element 2</div>
        <div class="item shrink-1">Element 3</div>
      </div>
    
  

Kodun izahı:

• .shrink-0: bu elementin flex-shrink: 0; dəyəri var, bu da onun ölçüsünü azaltmasına imkan vermir
• .shrink-1: bu elementlərin flex-shrink: 1; dəyəri var, bu da tələb olunduğu zaman onların ölçüsünü azaltmasına imkan verir

9.3 flex-basis xüsusiyyəti

flex-basis xüsusiyyəti, sərbəst məkanın paylanmasından əvvəl Flex-elementin ilkin ölçüsünü təyin edir. Bu, piksel, faiz və digər ölçü vahidlərində təyin edilə bilər.

Dəyərlər:

• Müxtəlif ölçü vahidlərində uzunluq (px, %, em və s.)
• Default dəyər: auto (ölçü məzmuna əsasən təyin olunur)

İstifadə nümunəsi:

    
      .container {
        display: flex;
        border: 2px solid #000;
        padding: 10px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
      }

      .basis-auto {
        flex-basis: auto;
      }

      .basis-100px {
        flex-basis: 100px;
      }

      .basis-50percent {
        flex-basis: 50%;
      }
    
  

    
      <div class="container">
        <div class="item basis-auto">Element 1</div>
        <div class="item basis-100px">Element 2</div>
        <div class="item basis-50percent">Element 3</div>
      </div>
    
  

Kodun izahı:

• .basis-auto: bu elementdə flex-basis: auto; dəyəri var, yəni ölçü məzmuna əsasən təyin olunur
• .basis-100px: bu elementin ilkin ölçüsü 100 piksel olaraq təyin olunub
• .basis-50percent: bu elementin ilkin ölçüsü konteynerin eninin 50%-dir

9.4 Xüsusiyyətlərin istifadəsi

flex xüsusiyyəti flex-grow, flex-shrink və flex-basis-i təyin etmək üçün qısaldılmış yazıdır. Bu, bir xüsusiyyətlə məkanın paylanmasının hər üç aspektini idarə etməyə imkan verir.

Sintaksis:

    
      .container {
        flex: [flex-grow] [flex-shrink] [flex-basis];
      }
    
  

İstifadə nümunəsi:

    
      .container {
        display: flex;
        border: 2px solid #000;
        padding: 10px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
      }

      .flex-1 {
        flex: 1 1 auto;
      }

      .flex-2 {
        flex: 2 1 100px;
      }

      .flex-3 {
        flex: 1 0 50%;
      }
    
  

    
      <div class="container">
        <div class="item flex-1">Element 1</div>
        <div class="item flex-2">Element 2</div>
        <div class="item flex-3">Element 3</div>
      </div>
    
  

Kodun izahı:

• .flex-1: bu element flex: 1 1 auto; xüsusiyyətinə malikdir, bu isə o deməkdir ki, o böyüyə və digər elementlərlə bərabər nisbətdə kiçilə bilər və onun ilkin ölçüsü məzmunla təyin olunur
• .flex-2: bu element flex: 2 1 100px; xüsusiyyətinə malikdir, bu isə o deməkdir ki, o böyüyə bilər flex-grow: 1; olan elementlərlə müqayisədə iki dəfə artar, kiçilə bilər və ilkin ölçüsü 100 pikseldir
• .flex-3: bu element flex: 1 0 50%; xüsusiyyətinə malikdir, bu isə o deməkdir ki, o böyüyə bilər, amma kiçilə bilməz və onun ilkin ölçüsü konteynerin eninin 50%-dir