Çapraz ox üzrə hizalama

8.1 align-items xassəsi

align-items və align-self xassələri Flex elementləri xətti ox üzrə hizalamağa imkan verir, layoutda rahatlıq və dəqiqliyi təmin edir.

align-items xassəsi Flex elementlərini xətti ox üzrə hizalamağı idarə edir (əsas oxdan perpendikulyar olaraq) Flex konteynerin daxilində. Xətti oxun istiqaməti flex-direction xassəsinin dəyərindən asılıdır:

• Əgər flex-direction dəyəri row və ya row-reverse olarsa, xətti ox vertikal olacaq
• Əgər flex-direction dəyəri column və ya column-reverse olarsa, xətti ox horizontal olacaq

Dəyərlər:

• stretch: elementlər konteyneri doldurmaq üçün genişlənir (default dəyər)
• flex-start: elementlər konteynerin başlanğıcına hizalanır
• flex-end: elementlər konteynerin sonuna hizalanır
• center: elementlər konteynerin mərkəzinə hizalanır
• baseline: elementlər mətnin bazis xəttinə hizalanır

İstifadə nümunəsi:

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

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

      .align-stretch {
        align-items: stretch;
      }

      .align-flex-start {
        align-items: flex-start;
      }
    
  

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

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

8.2 align-self Properti-si

align-self properti-si xüsusi bir Flex-element üçün align-items dəyərini yenidən təyin etməyə imkan verir. Bu properti birbaşa Flex-elementə tətbiq olunur və onun Flex-container daxilində eninə ox üzrə hizalanmasını idarə edir.

Dəyərlər:

• auto: dəyər valideyndən miras alınır (default olaraq)
• stretch: element konteyneri doldurmaq üçün uzanır
• flex-start: element konteynerin başlanğıcına hizalanır
• flex-end: element konteynerin sonuna hizalanır
• center: element konteynerin mərkəzinə hizalanır
• baseline: element mətnin əsas xəttinə hizalanır

İstifadə nümunəsi:

    
      .container {
        display: flex;
        height: 200px;
        border: 2px solid #000;
        padding: 10px;
        margin-bottom: 20px;
        align-items: flex-start;
      }

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

      .self-flex-end {
        align-self: flex-end;
      }

      .self-center {
        align-self: center;
      }

      .self-baseline {
        align-self: baseline;
      }
    
  

    
      <div class="container">
        <div class="item self-flex-end">Element 3</div>
        <div class="item self-center">Element 4</div>
        <div class="item self-baseline">Element 5</div>
      </div>
    
  

Kodun izahı:

• .self-flex-end: bu element konteynerin alt kənarına hizalanır
• .self-center: bu element şaquli olaraq mərkəzə hizalanır
• .self-baseline: bu element mətnin əsas xəttinə hizalanır

8.3 Elementlərin mərkəzləşdirilməsi

Flexbox elementləri şaquli və üfüqi olaraq mərkəzləşdirməyi justify-content və align-items və ya align-self kombinasiyasından istifadə etməklə asanlaşdırır.

İstifadə nümunəsi:

    
      .center-container {
        display: flex;
        justify-content: center; /* üfüqi mərkəzləşdirmə */
        align-items: center; /* şaquli mərkəzləşdirmə */
        height: 300px;
        border: 2px solid #000;
      }

      .center-item {
        background-color: #3498db;
        color: white;
        padding: 20px;
      }
    
  

    
      <div class="center-container">
        <div class="center-item">Mərkəzləşdirilmiş element</div>
      </div>
    
  

Kodun izahı:

• .center-container: Flex-konteyner, burada elementlər üfüqi olaraq justify-content: center; ilə və şaquli olaraq align-items: center; ilə mərkəzləşdirilir.
• .center-item: Flex-element, konteynerin mərkəzində hizalanır.