Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / html

Properti Flex Style DOM HTML dan Fungsinya

Dipublikasikan Oleh: elfanmauludi 5 komentar
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.

Sebelum memahami lebih dalam materi tentang Properti Flex Style DOM HTML dan Fungsinya, terlebih dahulu pelajari materi tentang: Properti Filter Style DOM HTML dan Fungsinya, Mengatur Sel Kosong HTML Menggunakan emptyCells Style DOM, dan Properti Display Style DOM HTML dan Fungsinya.

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:

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


Artikel ini didedikasikan kepada: Riska Setiani, Risma Nur Mazida, Risna Kurniasari, Rizal Rafly Mardiansyah, dan Rizky Permatasari.
Location: Kota Semarang, Jawa Tengah, Indonesia

5 komentar untuk "Properti Flex Style DOM HTML dan Fungsinya"

  1. AnonimRabu, 06 Juli 2022 pukul 14.25.00 WIB

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

    BalasHapus
    Balasan
    1. AnonimRabu, 06 Juli 2022 pukul 14.25.00 WIB

      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. AnonimMinggu, 07 Agustus 2022 pukul 21.56.00 WIB

    Apa yang dimaksud dengan properti flex Style DOM pada HTML?

    BalasHapus
    Balasan
    1. AnonimMinggu, 07 Agustus 2022 pukul 21.56.00 WIB

      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. AnonimMinggu, 07 Agustus 2022 pukul 21.57.00 WIB

      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

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 -