Properti flex-basis

Properti flex-basis mengatur ukuran blok flex spesifik sebelum properti flex lainnya diterapkan padanya. Secara umum, properti ini mengatur ukuran elemen sepanjang sumbu utama. Ini berarti bahwa jika sumbu utama horizontal - properti ini akan mengatur lebar elemen, dan jika vertikal - maka tinggi.

Diterapkan pada blok flex spesifik.

Properti ini merupakan bagian dari properti singkatan flex.

Sintaksis

cssselektor {
  flex-basis: satuan CSS apa pun (dan persentase) | auto;
}

Nilai default: auto.

Contoh

Misalkan sumbu utama kita horizontal, dan flex-basis memiliki nilai 50px. Dalam hal 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; /* sumbu horizontal */
  width: 300px;
  height: 300px;
  border: 1px solid red;
}
.child {
  flex-basis: 50px; /* ukuran elemen */
  border: 1px solid green;
}

Результат:

Contoh

Sekarang mari kita balik sumbunya, tanpa mengubah nilai properti flex-basis. Dalam hal 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; /* sumbu vertikal */
  width: 300px;
  height: 300px;
  border: 1px solid red;
}
.child {
  flex-basis: 50px;
  border: 1px solid green;
}

Результат:

Lihat juga