flex-shrink | Codingku

Properti CSS flex-shrink merupakan sub-properti dari modul layout kotak Flexbox.

Properti ini menentukan seberapa banyak item flex akan menyusut relatif terhadap sisa item flex dalam wadah fleksibel ketika tidak ada cukup ruang di baris.

Ketika dihilangkan, nilai “flex-shrink” diatur ke 1 dan faktor penyusut item flex dikalikan dengan basis flex ketika mendistribusikan ruang negatif.

Item flex ditempatkan dalam flex container, yaitu elemen dengan display: flex atau display: inline-flex.

Dalam model layout flex, elemen anak dari wadah fleksibel (flex container) dapat diletakkan di segala arah, dan dapat “melenturkan” ukurannya, baik melebar untuk mengisi ruang yang tersisa atau menyusut untuk menghindari meluapnya elemen induk.

CSS Syntax

flex-shrink: number | initial | inherit;

JavaScript Syntax

object.style.flexShrink="5"

Attribute Value

default flex-shrink: 1;

Jika tidak ada ruang yang cukup di sumbu utama flex container, elemen akan menyusut dengan faktor 1, dan akan membungkus isinya.

flex-shrink: 0;

Elemen tidak akan menyusut: ia akan mempertahankan lebar yang dibutuhkan, dan tidak membungkus isinya. Elemen sibling (saudara kandung elemen) akan menyusut untuk memberi ruang pada elemen target.

Karena elemen target tidak akan membungkus isinya, ada kemungkinan konten flex container meluap (overflow).

flex-shrink: 2;

Karena nilai flex-shrink relatif, perilakunya tergantung pada nilai saudara item flex.

Dalam contoh ini, item hijau ingin mengisi 100% dari lebar. Ruang yang dibutuhkan diambil dari dua saudara kandungnya, dan dibagi menjadi 4.

3 perempat diambil dari item merah
seperempat diambil dari item kuning