Sifat flex-basis

Sifat flex-basis menetapkan saiz blok flex khusus sebelum sifat-sifat flex lain diterapkan ke atasnya. Secara umum, sifat ini menetapkan saiz elemen sepanjang paksi utama. Ini bermakna jika paksi utama mengufuk - sifat ini akan menetapkan lebar elemen, dan jika menegak - maka ketinggian.

Digunakan pada blok flex khusus.

Sifat ini merupakan sebahagian daripada sifat singkatan flex.

Sintaks

cssselector {
  flex-basis: sebarang unit CSS (dan peratusan) | auto;
}

Nilai lalai: auto.

Contoh

Katakan paksi utama kita mengufuk, dan flex-basis mempunyai nilai 50px. Dalam kes ini lebar elemen akan menjadi 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; /* paksi mengufuk */
  width: 300px;
  height: 300px;
  border: 1px solid red;
}
.child {
  flex-basis: 50px; /* saiz elemen */
  border: 1px solid green;
}

Результат:

Contoh

Sekarang mari kita balikkan paksi, tanpa menukar nilai sifat flex-basis. Dalam kes ini tinggi elemen akan menjadi 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; /* paksi menegak */
  width: 300px;
  height: 300px;
  border: 1px solid red;
}
.child {
  flex-basis: 50px;
  border: 1px solid green;
}

Результат:

Lihat juga