Lompat ke konten Lompat ke sidebar Lompat ke footer

flexShrink Style HTML DOM dan Fungsinya

Properti flexShrink Style DOM pada HTML digunakan untuk mengatur bagaimana item spesifik dalam suatu relasi terhadap sisa item fleksibel pada container.

3 Value Properti flexShrink Style DOM pada HTML
Properti flexShrink Style DOM

Sebelum memahami lebih dalam materi tentang flexShrink Style HTML DOM dan Fungsinya, terlebih dahulu pelajari materi tentang: flexGrow Style HTML DOM dan Fungsinya [klik], flexFlow Style HTML DOM dan Fungsinya [klik], dan flexDirection Style HTML DOM dan Fungsinya [klik].

Sintak:
  • digunakan untuk mengembalikan nilai properti flexShrink: object.style.flexShrink
  • digunakan untuk mengatur nilai properti flexShrink: object.style.flexShrink = "number|initial|inherit"

Property Values:
  • number: digunakan untuk mengatur sebuah angka yang digunakan untuk menentukan seberapa banyak item yang akan melakukan shrink dalam suatu relasi item fleksibel. Nilai properti ini memiliki nilai default 0.
  • initial: digunakan untuk mengatur nilai properti flexShrink ke nilai default-nya.
  • inherit: digunakan untuk menerima nilai turunan dari elemen parent.

Baca Juga:

Contoh:

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti Style flexShrink DOM 

HTML

</title>

 

<style>

#Bons1s 

{

width: 350px;

height: 100px;

border: 1px solid #c3c3c3;

display: flex;

}

 

#Bons1s div 

{

flex-grow: 1;

flex-shrink: 1;

flex-basis: 300px;

}

</style>

 

</head>

 

<body>

 

<h4>

Klik Tombol

</h4>

 

<button 

onclick="MM1()">

Click Here!

<br>

</button>

 

<p></p>

 

<div id="Bons1s">

 

<div 

style="background-color:#64c962;

color:white;">

Blog Elfan

</div>

 

<div 

style="background-color:#2c932a;

color:white;"

id="Bons1s2">

Blog TIK

</div>

 

</div>

 

<script>

function MM1() 

{

// Safari 6.1+

document.getElementById(

"Bons1s2").style.WebkitFlexShrink = "5";

 

document.getElementById(

"Bons1s2").style.flexShrink = "5";

}

</script>

 

</body>

 

</html>

Output:

Klik Tombol

Blog Elfan
Blog TIK


Contoh:

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti Style flexShrink DOM 

HTML

</title>

 

<style>

#MK2s 

{

width: 350px;

height: 100px;

border: 1px solid #c3c3c3;

display: flex;

}

 

#MK2s div 

{

flex-grow: 1;

flex-shrink: 1;

flex-basis: 300px;

}

</style>

 

</head>

 

<body>

 

<h3>

Properti flex-shrink DOM

</h3>

 

<div id="MK2s">

 

<div 

style="background-color:#44cc3f;">

</div>

 

<div 

style="background-color:#34a030;">

</div>

 

<div 

style="background-color:#2c932a;">

</div>

 

<div 

style="background-color:#267023;">

</div>

 

<div 

style="background-color:#175415;">

</div>

 

</div>

 

</body>

 

</html>

Output:

Properti flex-shrink DOM


Artikel ini didedikasikan kepada: Sabrina Nur Yusrina, Safira Arbella Aurell Urrofik, Salsabila Ade Putri, Sara Louise Immanuella Malino, dan Satria Yoga Prastama.

5 komentar untuk "flexShrink Style HTML DOM dan Fungsinya"

  1. Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti flexShrink Style DOM pada HTML?

    BalasHapus
    Balasan
    1. Berikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti flexShrink Style DOM pada HTML:
      1. Google Chrome 5.0
      2. Internet Explorer 8.0
      3. Firefox 3.6
      4. Opera 10.6
      5. Safari 5.0

      Hapus
  2. Apa yang dimaksud dengan properti flexShrink Style DOM pada HTML?

    BalasHapus
    Balasan
    1. Properti flexShrink Style DOM pada HTML merupakan properti yang digunakan untuk menentukan bagaimana suatu item dapat menyusut relatif terhadap nilai item fleksibel lainnya yang berada dalam satu container yang sama.

      Hapus
    2. Properti HTML DOM Style flexShrink digunakan untuk mengatur proporsi dimana suatu elemen akan mengecilkan ukurannya yang berkaitan dengan nilai sibling yang terdapat di dalam elemen flex.

      Hapus

Hubungi admin melalui Wa : +62-896-2414-6106

Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.

Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.

- Ikatlah Ilmu dengan Memostingkannya -
- Big things start from small things -