Flex-basis հատկությունը

flex-basis հատկությունը սահմանում է կոնկրետ flex-բլոկի չափը նախքան դրան մնացած flex հատկությունների կիրառումը: Ընդհանուր առմամբ, հատկությունը սահմանում է տարրի չափը հիմնական առանցքի երկայնքով: Սա նշանակում է, որ եթե հիմնական առանցքը հորիզոնական է - այս հատկությունը կսահմանի տարրերի լայնությունը, իսկ եթե ուղղահայաց է - ապա բարձրությունը:

Կիրառվում է կոնկրետ flex բլոկի նկատմամբ:

Այս հատկությունը կազմում է flex հապավում հատկության բաղկացուցիչ մասը:

Շարահյուսություն

cssընտրիչ {
  flex-basis: ցանկացած CSS միավոր (և տոկոսներ) | auto;
}

Լռելյայն արժեքը՝ auto:

Օրինակ

Ենթադրենք, հիմնական առանցքը մեզ մոտ հորիզոնական է, իսկ flex-basis-ն ունի 50px արժեք: Այս դեպքում տարրերի լայնությունը կլինի 50px:

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; /* առանցքը հորիզոնական է */
  width: 300px;
  height: 300px;
  border: 1px solid red;
}
.child {
  flex-basis: 50px; /* տարրի չափը */
  border: 1px solid green;
}

Результат:

Օրինակ

Այժմ եկեք շրջենք առանցքը՝ չփոխելով flex-basis հատկության արժեքը: Այս դեպքում արդեն տարրերի բարձրությունը կլինի 50px:

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; /* առանցքը ուղղահայաց է */
  width: 300px;
  height: 300px;
  border: 1px solid red;
}
.child {
  flex-basis: 50px;
  border: 1px solid green;
}

Результат:

Տես նաև