flex-basis Özelliği

flex-basis özelliği, diğer flex özellikleri uygulanmadan önce belirli bir flex bloğunun boyutunu belirler. Genel olarak, özellik elemanın ana eksen boyunca boyutunu belirler. Bu şu anlama gelir: eğer ana eksen yatay ise - bu özellik elemanların genişliğini belirleyecek, eğer dikey ise - o zaman yüksekliği belirleyecektir.

Belirli bir flex bloğuna uygulanır.

Bu özellik, flex kısaltma özelliğinin bir bileşenidir.

Sözdizimi

cssseçici {
  flex-basis: herhangi bir CSS birimi (ve yüzdeler) | auto;
}

Varsayılan değer: auto.

Örnek

Ana eksenimizin yatay olduğunu ve flex-basis değerinin 50px olduğunu varsayalım. Bu durumda elemanların genişliği 50px olacaktır:

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; /* eksen yatay */
  width: 300px;
  height: 300px;
  border: 1px solid red;
}
.child {
  flex-basis: 50px; /* elemanın boyutu */
  border: 1px solid green;
}

Результат:

Örnek

Şimdi flex-basis özelliğinin değerini değiştirmeden ekseni çevirelim. Bu durumda artık elemanların yüksekliği 50px olacaktır:

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

Результат:

Ayrıca Bakınız