Dərslər
Başlamaq
Öyrənməyə başlayın
CodeGym /Kurslar /Frontend SELF AZ /Oxların istiqaməti

Oxların istiqaməti

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

6.1 flex-direction xüsusiyyəti

Flexbox adaptiv layoutlar yaratmaq üçün çevik və güclü vasitələr təqdim edir. Bu sistemin mühüm bir hissəsi, Flex-elementlərin Flex-container daxilində necə yerləşəcəyini müəyyən edən layout oxlarıdır. Aşağıda biz xüsusi olaraq flex-direction və flex-wrap xüsusiyyətlərini nəzərdən keçirəcəyik, hansılar ki, oxların istiqamətini və Flex-elementlərin overload zamanı davranışını idarə edir.

flex-direction xüsusiyyəti əsas oxun istiqamətini müəyyən edir, hansı ki, Flex-elementlər boyunca yerləşdiriləcək. Bu istiqamət üfüqi və ya şaquli, həmçinin düz və ya tərs ola bilər.

Əhəmiyyətlər:

  • row: əsas ox soldan sağa üfüqi olaraq gedir (default dəyər)
  • row-reverse: əsas ox sağdan sola üfüqi olaraq gedir
  • column: əsas ox yuxarıdan aşağıya şaquli olaraq gedir
  • column-reverse: əsas ox aşağıdan yuxarıya şaquli olaraq gedir

İstifadə nümunəsi

1. Elementlər üfüqi olaraq yerləşir:

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

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

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
      }
HTML 
    
      <div class="container-row">
        <div class="item">Element 1</div>
        <div class="item">Element 2</div>
        <div class="item">Element 3</div>
      </div>
      <div class="container-row-reverse">
        <div class="item">Element 1</div>
        <div class="item">Element 2</div>
        <div class="item">Element 3</div>
      </div>

2. Elementlər şaquli olaraq yerləşir:

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

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

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
      }
HTML 
    
      <div class="container-column">
        <div class="item">Element 1</div>
        <div class="item">Element 2</div>
        <div class="item">Element 3</div>
      </div>

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

Kodun izahı:

  • .container-row: elementlər soldan sağa üfüqi olaraq yerləşir
  • .container-row-reverse: elementlər sağdan sola üfüqi olaraq yerləşir
  • .container-column: elementlər yuxarıdan aşağıya şaquli olaraq yerləşir
  • .container-column-reverse: elementlər aşağıdan yuxarıya şaquli olaraq yerləşir

6.2 flex-wrap xüsusiyyəti

flex-wrap xüsusiyyəti Flex-elementlərin bir cərgə/sütuna sığmadıqda yeni cərgəyə/sütuna keçirilib-keçirilməyəcəyini müəyyən edir. Bu xüsusiyyət, xüsusilə adaptiv dizayn yaratmaq üçün faydalıdır, çünki burada konteynerin ölçüsü cihazdan və ya ekrandan asılı olaraq dəyişə bilər.

Dəyərlər

  • nowrap: elementlər keçmir və bir cərgə/sütunda yerləşdirilir (default dəyər)
  • wrap: elementlər lazım olduqda yeni cərgə/sütuna keçir
  • wrap-reverse: elementlər tərsinə yeni cərgə/sütuna keçir

İstifadə nümunələri

nowrap dəyəri:

Elementlər keçmir və bir cərgə/sütunda yerləşdirilir (default dəyər).

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

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
        width: 100px;
      }
HTML 
    
      <div class="container-nowrap">
        <div class="item">Element 1</div>
        <div class="item">Element 2</div>
        <div class="item">Element 3</div>
        <div class="item">Element 4</div>
      </div>

wrap dəyəri:

Elementlər lazım olduqda yeni cərgə/sütuna keçir.

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

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
        width: 100px;
      }
HTML 
    
      <div class="container-wrap">
        <div class="item">Element 1</div>
        <div class="item">Element 2</div>
        <div class="item">Element 3</div>
        <div class="item">Element 4</div>
      </div>

wrap-reverse dəyəri:

Elementlər tərsinə yeni cərgə/sütuna keçir.

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

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
        width: 100px;
      }
HTML 
    
      <div class="container-wrap-reverse">
        <div class="item">Element 1</div>
        <div class="item">Element 2</div>
        <div class="item">Element 3</div>
        <div class="item">Element 4</div>
      </div>

Kodun izahı:

  • .container-nowrap: Flex-elementlər cərgədə qalır, konteynerin ölçüsünü aşsalar belə
  • .container-wrap: Flex-elementlər bir cərgəyə sığmazsa yeni cərgəyə keçir
  • .container-wrap-reverse: Flex-elementlər yeni cərgəyə tərsinə şəkildə keçir

6.3 flex-direction və flex-wrap istifadəsi

flex-direction və flex-wrap xüsusiyyətlərini qısa flex-flow xüsusiyyəti vasitəsilə birləşdirmək olar. Bu xüsusiyyət eyni anda həm oxun istiqamətini, həm də elementlərin keçidini təyin etməyə imkan verir.

Syntax:

    
      .container {
        flex-flow: [flex-direction] [flex-wrap];
      }

İstifadə nümunəsi:

CSS 
    
      .container {
        display: flex;
        flex-flow: row wrap;
        border: 2px solid #000;
        padding: 10px;
        width: 300px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
        width: 100px;
      }
HTML 
    
      <div class="container">
        <div class="item">Element 1</div>
        <div class="item">Element 2</div>
        <div class="item">Element 3</div>
        <div class="item">Element 4</div>
        <div class="item">Element 5</div>
      </div>

Kodun izahı:

  • .container: flex-direction: row; və flex-wrap: wrap; birləşdirilmiş istifadə olunan Flex-konteynerdir, bu o deməkdir ki, elementlər üfüqi yerləşdirilir və lazım olduqda yeni sətirə keçir.
Şərhlər
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION