Flex-basis xususiyati

flex-basis xususiyati unga boshqa flex xususiyatlari qo‘llanilishidan oldin aniq flex-blokning o‘lchamini belgilaydi. Umuman olganda, xususiyat elementning asosiy o‘q bo‘ylab o‘lchamini belgilaydi. Bu shuni anglatadiki, agar asosiy o‘q gorizontal bo‘lsa - bu xususiyat elementlarning kengligini belgilaydi, agar vertikal bo‘lsa - balandlikni.

Aniq flex blokkka qo‘llaniladi.

Ushbu xususiyat flex qisqartirilgan xususiyatning tarkibiy qismidir.

Sintaksis

cssselector {
  flex-basis: har qanday CSS birliklari (va foizlar) | auto;
}

Standart qiymat: auto.

Misol

Faraz qilaylik, asosiy o‘qimiz gorizontal joylashgan va flex-basis ning qiymati 50px. Bunda elementlarning kengligi 50px bo‘ladi:

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; /* o‘q gorizontal */
  width: 300px;
  height: 300px;
  border: 1px solid red;
}
.child {
  flex-basis: 50px; /* element o‘lchami */
  border: 1px solid green;
}

Результат:

Misol

Keling, endi flex-basis xususiyatining qiymatini o‘zgartirmay, o‘qni aylantiramiz. Bunda elementlarning balandligi 50px bo‘ladi:

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; /* o‘q vertikal */
  width: 300px;
  height: 300px;
  border: 1px solid red;
}
.child {
  flex-basis: 50px;
  border: 1px solid green;
}

Результат:

Shuningdek qarang