Dərslər
Başlamaq
Öyrənməyə başlayın
CodeGym /Kurslar /Frontend SELF AZ /Cavabverici şəbəkələr

Cavabverici şəbəkələr

Frontend SELF AZ
Səviyyə , Dərs
Mövcuddur

3.1 Flexbox

Flexbox və Grid istifadə edərək esnek layoutlar yaratmaq müasir cavab verən veb-saytların hazırlanmasında əsas texnikadır. Bu texnologiyalar elementlərin səhifədə yerləşdirilməsini asanlıqla idarə etməyə imkan verir, onları müxtəlif ekran ölçülərinə və cihazlara uyğunlaşdırır.

Flexbox (Flexible Box Layout Module) elementlərin tək bir ölçüdə yerləşdirilməsi üçün nəzərdə tutulmuşdur (ya sıra üzrə, ya da sütun üzrə). Flexbox esnek və cavab verən layoutlar yaratmağı asanlaşdırır.

Flexbox əsas anlayışları:

  • Flex-container: display: flex xüsusiyyəti tətbiq olunan element
  • Flex-elementlər: flex-containerin içində yerləşən uşaq elementlər

Flexbox xüsusiyyətləri

Flex-container:

  • display: flex: elementi flex-container kimi müəyyən edir
  • flex-direction: flex-elementlərin istiqamətini təyin edir (row, column, row-reverse, column-reverse)
  • justify-content: əsas ox boyunca flex-elementlərin hizalanmasını idarə edir (flex-start, flex-end, center, space-between, space-around)
  • align-items: köndələn ox boyunca flex-elementlərin hizalanmasını idarə edir (stretch, flex-start, flex-end, center, baseline)

Flex-elementlər:

  • flex-grow: elementin boş yer olduqda böyümə qabiliyyətini müəyyən edir
  • flex-shrink: yer çatışmadıqda elementin kiçilmə qabiliyyətini müəyyən edir
  • flex-basis: boş yer paylanmadan əvvəl elementin ilkin ölçüsünü təyin edir
  • align-self: align-items ilə təyin olunmuş köndələn ox boyunca hizalanmanı yenidən müəyyən edir

Flexbox istifadə nümunəsi

Üç sütunlu layout yaradaq, hansı ki, müxtəlif ekran ölçülərinə uyğunlaşacaq:

HTML 
    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Flexbox nümunəsi</title>
          <style>
            .flex-container {
              display: flex;
              justify-content: space-between;
              align-items: stretch;
              flex-wrap: wrap;
            }

            .flex-item {
              flex: 1 1 200px;
              margin: 10px;
              padding: 20px;
              background-color: #f4f4f4;
              text-align: center;
            }
          </style>
        </head>
        <body>
          <div class="flex-container">
            <div class="flex-item">Sütun 1</div>
            <div class="flex-item">Sütun 2</div>
            <div class="flex-item">Sütun 3</div>
          </div>
        </body>
      </html>

Kodun izahı:

  • .flex-container: containeri flex-container kimi müəyyən edir, elementlər arasında bərabər məsafələr yaradır və yer çatışmadıqda elementlərin növbəti sətrə keçməsinə imkan verir
  • .flex-item: flex-elementlər, hansılar ki, bərabər yer tutur, minimum eni 200px-dir və containerin daxilində bərabər paylanır

3.2 CSS Grid

CSS Grid Layout — bu ikiölçülü yığma sistemi, hansı ki sətirlər və sütunlardan istifadə edərək kompleks maketlər yaratmağa imkan verir.

CSS Grid əsas anlayışları:

  • Grid-konteyner: display: grid xüsusiyyəti tətbiq edilmiş element
  • Grid-elementlər: grid-konteynerin alt elementləri, hansı ki şəbəkədə yerləşirlər

CSS Grid xüsusiyyətləri

Grid-konteyner:

  • display: grid: elementi grid-konteyner kimi müəyyən edir
  • grid-template-columns: şəbəkədəki sütunların sayını və ölçüsünü təyin edir
  • grid-template-rows: şəbəkədəki sətirlərin sayını və ölçüsünü təyin edir
  • gap: sətirlər və sütunlar arasındakı boşluqları idarə edir
  • justify-items: grid-elementlərin üfüqi düzülüşünü idarə edir
  • align-items: grid-elementlərin şaquli düzülüşünü idarə edir

    Grid-elementlər:

  • grid-column: elementin neçə sütun üzərində yayılacağını müəyyən edir
  • grid-row: elementin neçə sətir üzərində yayılacağını müəyyən edir
  • justify-self: elementin üfüqi düzülüşünü yenidən təyin edir
  • align-self: elementin şaquli düzülüşünü yenidən təyin edir

CSS Grid istifadə nümunəsi

Üç sütunlu və iki sətirli maket yaradaq, hansı ki müxtəlif ekran ölçülərinə uyğunlaşır.

HTML 
    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>CSS Grid nümunəsi</title>
          <style>
            .grid-container {
              display: grid;
              grid-template-columns: repeat(3, 1fr);
              grid-template-rows: repeat(2, 1fr);
              gap: 10px;
            }

            .grid-item {
              padding: 20px;
              background-color: #e4e4e4;
              text-align: center;
            }
          </style>
        </head>
        <body>
          <div class="grid-container">
            <div class="grid-item">Element 1</div>
            <div class="grid-item">Element 2</div>
            <div class="grid-item">Element 3</div>
            <div class="grid-item">Element 4</div>
            <div class="grid-item">Element 5</div>
            <div class="grid-item">Element 6</div>
          </div>
        </body>
      </html>

Kod izahı:

  • .grid-container: üç sütunlu və iki sətirli grid-konteyneri müəyyən edir, hər bir element bərabər sahə tutur
  • .grid-item: bərabər boşluqlarla və fonla grid-elementlər
Şərhlər
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION