Ֆլեքս տարրի չափը գլխավոր առանցքի երկայնքով

width և height հատկությունները սահմանում են ֆլեքս տարրի լայնությունը և բարձրությունը՝ անկախ առանցքների ուղղությունից: Այսինքն, եթե առանցքը հորիզոնական է, ապա width կսահմանի լայնությունը, բայց եթե առանցքը ուղղահայաց է, ապա width կշարունակի սահմանել լայնությունը: Երբեմն այդպիսի վարքագիծը հարմար չէ:

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

Ենթադրենք, հիմա գլխավոր առանցքը հորիզոնական է, իսկ 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;
}

Результат: