Flex-basis xassəsi

flex-basis xassəsi konkret flex blokuna digər flex xassələri tətbiq edilməzdən əvvəl onun ölçüsünü təyin edir. Ümumiyyətlə, xassə elementin əsas ox boyunca ölçüsünü təyin edir. Bu o deməkdir ki, əgər əsas ox üfüqi olarsa - bu xassə elementlərin enini təyin edəcək, əgər şaquli olarsa - onda hündürlüyü.

Konkret flex blokuna tətbiq edilir.

Bu xassə flex qısaldılmış xassəsinin tərkib hissəsidir.

Sintaksis

cssselektor {
  flex-basis: istənilən CSS vahidləri (və faizlər) | auto;
}

Susmaya görə qiymət: auto.

Nümunə

Tutaq ki, əsas oxumuz üfüqi yerləşir və flex-basis xassəsinin qiyməti 50px olur. Bu halda elementlərin eni 50px olacaq:

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>

css.parent  {
  display: flex;
  flex-direction: row; /* ox üfüqi */
  width: 300px;
  height: 300px;
  border: 1px solid red;
}
.child {
  flex-basis: 50px; /* elementin ölçüsü */
  border: 1px solid green;
}

Результат:

Nümunə

Gəlin indi oxu çevirək, flex-basis xassəsinin qiymətini dəyişmədən. Bu halda artıq elementlərin hündürlüyü 50px olacaq:

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>

css.parent {
  display: flex;
  flex-direction: column; /* ox şaquli */
  width: 300px;
  height: 300px;
  border: 1px solid red;
}
.child {
  flex-basis: 50px;
  border: 1px solid green;
}

Результат:

Həmçinin bax