Flexbox-un əsasları

5.1 Flexbox-un Əsas Konsepsiyaları

Flexbox (Flexible Box Layout) — CSS-in güclü layout sistemidir, hansı ki, elementləri konteyner daxilində effektiv və çevik şəkildə yerləşdirməyə və hizalamağa imkan verir. Flexbox komplekş layoutlar yaratmaq və adaptiv dizayn üçün xüsusilə faydalıdır. İndi biz Flexbox-un əsaslarını nəzərdən keçirəcəyik, Flex-konteynerlərin və elementlərin yaradılmasını, həmçinin display: flex; xüsusiyyətindən istifadəni müzakirə edəcəyik.

Flexbox-un Əsas Konsepsiyaları

Flexbox iki əsas komponentdən ibarətdir:

• Flex-konteyner: Flex-elementləri daxilində yerləşdirən valideyn elementi.
• Flex-elementlər: Flex-konteynerin içindəki övlad elementlər, hansılar ki, Flexbox qaydalarına uyğun şəkildə hizalanır və yerləşdirilir.

Flex-konteyner

Flex-konteyner display: flex; və ya display: inline-flex; xüsusiyyəti ilə yaradılır. Flex-konteyner öz övlad elementlərinin (Flex-elementlər) yerləşdirilməsi ilə idarə edilir və onları hizalamaq və yerləşdirmək üçün bir çox imkanlar təqdim edir.

    
      .container {
        display: flex; /* və ya inline-flex */
      }
    
  

İstifadə Nümunəsi:

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

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

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

Kodun İzahı:

• .container: Flex-konteyner, hansı ki, display: flex; vasitəsilə yaradılıb. Bu konteynerin içində olan elementlər Flexbox qaydalarına uyğun hizalanır və yerləşdirilir.
• .item: Flex-elementlər, hansı ki, Flex-konteynerin övlad elementləridir.

5.2 Flex-container-in xüsusiyyətləri

display: flex; xüsusiyyəti elementi Flex-konteyner kimi müəyyən edir. Bu konteynerin Uşaq elementləri avtomatik olaraq Flex-element olur və Flexbox qaydalarına riayət edir.

display: flex;

Blok tipli Flex-konteyner yaradır. Flex-konteyner blok elementi kimi davranır və valideyn elementin bütün əlçatan enini tutur.

    
      .container {
        display: flex;
      }
    
  

display: inline-flex;

Sətir tipli Flex-konteyner yaradır. Flex-konteyner sətir elementi kimi davranır, yalnız lazım olan enini tutur və digər sətir elementləri ilə yanaşı yerləşə bilər.

    
      .inline-container {
        display: inline-flex;
      }
    
  

İstifadə nümunəsi:

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

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

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

      <div class="inline-container">
        <div class="item">Element 4</div>
        <div class="item">Element 5</div>
      </div>
    
  

Kodun izahı:

• inline-container — bu, display: inline-flex; ilə yaradılmış Flex-konteynerdir. Bu konteynerin daxilində elementlər Flexbox qaydalarına uyğun olaraq düzülür və paylanır. Konteynerlər sətir elementləri kimi davranır və bir-birinin yanında yerləşir.

5.3 Flex elementlərinin xüsusiyyətləri

1. flex xüsusiyyəti - bu flex-grow, flex-shrink və flex-basis təyin etmək üçün qısa yazı metodudur. Bu, Flex elementlərinin mövcud boşluğu doldurmaq üçün necə uzandığını və ya daraldığını tənzimləməyə imkan verir.

Sintaksis:

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

İstifadə nümunəsi:

    
      .item {
        flex: 1;
      }
    
  

2. order xüsusiyyəti

order xüsusiyyəti Flex konteynerdəki Flex elementlərinin hansı ardıcıllıqla yerləşdirildiyini təyin edir. Susmaya görə bütün elementlərin order: 0; dəyəri olur.

Dəyərlər

Tam ədədlər. Kiçik dəyərə malik elementlər böyük dəyərə malik elementlərdən əvvəl yerləşəcək.

Sintaksis:

    
      .element {
        order: value;
      }
    
  

İstifadə nümunəsi:

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

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

      .item-2 {
        order: 1;
        background-color: #2ecc71;
        color: white;
        padding: 10px;
        margin: 5px;
      }

      .item-3 {
        order: 3;
        background-color: #e74c3c;
        color: white;
        padding: 10px;
        margin: 5px;
      }
    
  

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

Kodun izahı:

• .item-1: order: 2 dəyərinə malikdir, buna görə də order: 1 dəyərinə malik elementdən sonra yerləşəcək
• .item-2: order: 1 dəyərinə malikdir, buna görə də birinci olacaq
• .item-3: order: 3 dəyərinə malikdir, buna görə də axırıncı yerləşəcək