DAFTAR LABEL POPULER PENELITIAN.ID

Jangan Buka Artikel Ini!

Properti Flex Style DOM HTML dan Fungsinya

Properti flex Style DOM pada HTML digunakan untuk mengatur atau mengembalikan nilai length dari item, yang sifatnya relatif terhadap sisa item fleksibel yang berada di dalam container yang sama. Properti flexGrow, flexShrink, dan flexBasis merupakan bagian dari properti Flex.

Sintak:
  • digunakan untuk mengembalikan nilai properti flex style: object.style.flex
  • digunakan untuk mengatur nilai properti flex: object.style.flex = "flex-grow flex-shrink flex-basis|auto|initial|inherit"

Return Values: berfungsi untuk mengembalikan sebuah nilai string, yang merepresentasikan nilai properti flex dari suatu elemen pada dokumen HTML.

Baca Juga:


4 Value Properti Flex Style DOM pada HTML
Properti Flex Style DOM

Property Values:
  • flex-grow: berfungsi untuk menentukan seberapa banyak item yang akan berkembang terhadap sisa item fleksibel.
  • flex-shrink: berfungsi untuk menentukan seberapa banyak item yang akan shrink terhadap sisa item fleksibel.
  • flex-basis: berfungsi untuk menentukan nilai length dari item.
  • inherit: berfungsi untuk menerima nilai turunan dari elemen parent.

Contoh: memiliki nilai length yang sama dari semua elemen div.

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti Style flex DOM HTML

</title>

 

<style>

#nnn1 

{

width: 220px;

height: 60px;

border: 1px solid black;

display: -webkit-flex;

/* Safari */

display: flex;

}

</style>

 

</head>

 

<body>

<center>

 

<h1 

style="color: green;">

Blog Elfan

</h1>

 

<h2 

style="color: black;">

Properti Style flex DOM

</h2>

 

<div id="nnn1">

<div style="background-color:green;">Bons

<div style="background-color:lightblue;">For

<div style="background-color:green;">Bons

</div>

</div>

</div>

</div>

 

<br>

 

<button 

onclick="BonS()">

CLICK

</button>

 

<script>

function BonS() 

{

var x = document.getElementById("nnn1");

var y = x.getElementsByTagName("DIV");

var i = 0;

 

for (i; i < y.length; i++

{

// IE10

y[i].style.msFlex = "1";

// Safari 6.1+

y[i].style.WebkitFlex = "1";

y[i].style.flex = "1";

}

 

}

</script>

 

</center>

</body>

 

</html>

Output:

Blog Elfan

Properti Style flex DOM

Bons
For
Bons



Contoh: item flex.

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti Style flex DOM HTML

</title>

 

<style>

#nn2n 

{

width: 220px;

height: 300px;

border: 1px solid black;

display: -webkit-flex;

/* Safari */

display: flex;

}

</style>

 

</head>

 

<body>

<center>

 

<h1 

style="color: green;">

Blog Elfan

</h1>

 

<h2 

style="color: black;">

Properti Style flex DOM

</h2>

 

<div id="nn2n">

<div style="background-color:green;">

BONS2

</div>

<div style="background-color:lightblue;">

For1

</div>

<div style="background-color:green;">

BONS2

</div>

</div>

 

<br>

 

<button 

onclick="KongS()">

CLICK

</button>

 

<script>

function KongS() 

{

var x =

document.getElementById("nn2n");

var y =

x.getElementsByTagName("DIV");

var i = 0;

 

for (i; i < y.length; i++

{

// IE10

y[i].style.msFlex = "0";

// Safari 6.1+

y[i].style.WebkitFlex = "0";

y[i].style.flex = "1 125px";

}

 

}

</script>

 

</center>

</body>

 

</html>

Output:

Blog Elfan

Properti Style flex DOM

BONS2
For1
BONS2


Komentar

  1. Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti flex style dom pada HTML?

    BalasHapus
    Balasan
    1. Berikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti Flex Style DOM pada HTML:
      1. Google Chrome 1.2
      2. Internet Explorer 4.0
      3. Firefox 1.0
      4. Opera 4.0
      5. Apple Safari 1.0

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

    BalasHapus
    Balasan
    1. Properti flex Style DOM pada HTML merupakan properti yang digunakan untuk menetapkan atau mengembalikan nilai panjang item yang relatif terhadap nilai item fleksibel lainnya pada satu container yang sama.

      Hapus
    2. Properti flex adalah singaktan untuk properti flexGrow, flexShrink, dan flexBasis. Catatan: jika elemen yang terdapat pada properti flex bukanlah item yang sifatnya fleksibel, maka nilai properti flex tidak akan dapat memengaruhi elemen tersebut.

      Hapus

Posting Komentar

Hubungi admin melalui Wa : +62-896-2514-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 ~

Postingan populer dari blog ini (30 Hari)

Enkapsulasi Java dan Fungsinya

Specifier %d dan %i Bahasa C dan Fungsinya

4 Kesalahan Umum yang Sering Terjadi pada PTK

7 Paradigma Penelitian pada Statistika Penelitian

Cara Membuat Drag and Drop pada HTML

Postingan populer dari blog ini (All Time)

Enkapsulasi Java dan Fungsinya

Komunitas