Dərslər
Başlamaq
Öyrənməyə başlayın
CodeGym /Kurslar /Frontend SELF AZ /Əsas ox üzrə hizalama

Əsas ox üzrə hizalama

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

7.1 justify-content xassəsi

Flexbox, Flex-konteynerin içindəki elementləri uyğunlaşdırmaq və boşluğu idarə etmək üçün əla alətlər təqdim edir. Bu iş üçün əsas xassələrdən biri justify-content-dir, hansı ki, Flex-elementlərin əsas ox boyunca necə düzüləcəyini idarə edir.

justify-content xassəsi Flex-elementlərin Flex-konteynerin əsas oxu boyunca necə paylanacağını müəyyən edir. Əsas ox flex-direction: xassəsinin dəyərindən asılıdır:

  • Əgər flex-direction row və ya row-reverse dəyərinə malikdirsə, əsas ox üfüqi olacaq
  • Əgər flex-direction column və ya column-reverse dəyərinə malikdirsə, əsas ox şaquli olacaq

Dəyərlər:

  • flex-start: elementlər konteynerin başlanğıcına uyğunlaşdırılır (susmaya görə dəyər)
  • flex-end: elementlər konteynerin sonuna uyğunlaşdırılır
  • center: elementlər konteynerin mərkəzinə uyğunlaşdırılır
  • space-between: elementlər arasında bərabər aralıqlar olmaqla bərabər paylanır
  • space-around: elementlər həm kənarlarında, həm də aralarında bərabər aralıqlarla paylanır
  • space-evenly: elementlər konteynerin kənarlarında və aralarındakı aralıqlar bərabər olmaqla paylanır

İstifadə nümunəsi:

CSS 
    
      .container {
        display: flex;
        border: 2px solid #000;
        padding: 10px;
        margin-bottom: 20px;
      }

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

      .flex-start {
        justify-content: flex-start;
      }
HTML 
    
      <div class="container flex-start">
        <div class="item">Element 1</div>
        <div class="item">Element 2</div>
        <div class="item">Element 3</div>
      </div>

7.2 justify-content üçün dəyərlər

1. flex-start

flex-start dəyərində elementlər Flex-konteynerin başlanğıc hissəsində hizalanır, yəni əsas oxun istiqaməti horizontal olduqda (row) solda, əsas oxun istiqaməti vertikal olduqda (column) isə yuxarıda yerləşir.

İstifadə nümunəsi:

CSS 
    
      .container {
        display: flex;
        justify-content: flex-start;
      }
HTML 
    
      <div class="container">
        <div class="item">Element 1</div>
        <div class="item">Element 2</div>
        <div class="item">Element 3</div>
      </div>

2. flex-end

flex-end dəyərində elementlər Flex-konteynerin son hissəsində hizalanır, yəni əsas oxun istiqaməti horizontal olduqda (row) sağ tərəfdə, əsas oxun istiqaməti vertikal olduqda (column) isə aşağıda yerləşir.

İstifadə nümunəsi:

CSS 
    
      .container {
        display: flex;
        justify-content: flex-end;
      }
HTML 
    
      <div class="container">
        <div class="item">Element 1</div>
        <div class="item">Element 2</div>
        <div class="item">Element 3</div>
      </div>

3. center

center dəyərində elementlər Flex-konteynerin mərkəzində hizalanır. Bu dəyər mərkəzləşdirilmiş layoutlar yaratmaq üçün faydalıdır.

İstifadə nümunəsi:

CSS 
    
      .container {
        display: flex;
        justify-content: center;
      }
HTML 
    
      <div class="container">
        <div class="item">Element 1</div>
        <div class="item">Element 2</div>
        <div class="item">Element 3</div>
      </div>

4. space-between

space-between dəyərində elementlər əsas ox boyunca bərabər aralıqlarla yerləşdirilir. Birinci element konteynerin başında, sonuncu element isə konteynerin sonunda hizalanır.

İstifadə nümunəsi:

CSS 
    
      .container {
        display: flex;
        justify-content: space-between;
      }
HTML 
    
      <div class="container">
        <div class="item">Element 1</div>
        <div class="item">Element 2</div>
        <div class="item">Element 3</div>
      </div>

5. space-around

space-around dəyərində elementlər ətraflı bərabər intervallarla yerləşdirilir. Elementlər arasındakı intervallar konteynerin kənarındakı intervallardan iki dəfə böyük olur.

İstifadə nümunəsi:

CSS 
    
      .container {
        display: flex;
        justify-content: space-around;
      }
HTML 
    
      <div class="container">
        <div class="item">Element 1</div>
        <div class="item">Element 2</div>
        <div class="item">Element 3</div>
      </div>

6. space-evenly

space-evenly dəyərində elementlər həm konteynerin kənarlarında, həm də elementlər arasında bərabər interval ilə yerləşdirilir. Bu dəyər konteyner boyunca bərabər intervallar yaradır.

İstifadə nümunəsi:

CSS 
    
      .container {
        display: flex;
        justify-content: space-evenly;
      }
HTML 
    
      <div class="container">
        <div class="item">Element 1</div>
        <div class="item">Element 2</div>
        <div class="item">Element 3</div>
      </div>

7.3 Menyunun mərkəzləşdirilməsi

Həqiqi layihələrdə istifadənin nümunəsi — naviqasiya menyusunun mərkəzləşdirilməsi:

CSS 
    
      .nav {
        display: flex;
        justify-content: center;
        background-color: #333;
        padding: 10px;
      }

      .nav-item {
        color: white;
        padding: 10px 20px;
        text-decoration: none;
      }

      .nav-item:hover {
        background-color: #575757;
      }
HTML 
    
      <nav class="nav">
        <a href="#" class="nav-item">Ana səhifə</a>
        <a href="#" class="nav-item">Haqqımızda</a>
        <a href="#" class="nav-item">Xidmətlər</a>
        <a href="#" class="nav-item">Əlaqə</a>
      </nav>

Kod izahı:

  • .nav: Naviqasiya menyusu üçün Flex-container, elementlərin mərkəzləşdirilməsi üçün istifadə olunur
  • .nav-item: Əsas stillərə malik olan Flex-elementlər (linklər)
Şərhlər
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION