DAFTAR LABEL POPULER PENELITIAN.ID

Jangan Buka Artikel Ini!

flexWrap Style HTML DOM dan Fungsinya

\ Properti flexGrow Style DOM pada HTML digunakan untuk menentukan apakah item fleksibel harus melakukan wrap atau tidak.

Sintak:
  • digunakan untuk mengembalikan nilai properti flexWrap: object.style.flexWrap
  • digunakan untuk mengatur nilai properti flexWrap: object.style.flexWrap = "nowrap|wrap|wrap-reverse|initial|inherit"

Property Values:
  • nowrap: digunakan untuk menentukan apakah item fleksibel akan melakukan wrap atau tidak.
  • wrap: digunakan untuk menentukan apakah item fleksibel akan melakukan wrap, dan seperlunya.
  • wrap-reverse: digunakan untuk menentukan apakah item fleksibel akan melakukan wrap secara berkebalikan atau tidak.
  • initial: digunakan untuk mengatur nilai properti ke nilai default-nya.
  • inherit: digunakan untuk menerima nilai turunan properti dari elemen parent.

Return Values: berfungsi untuk mengembalikan sebuah string, yang merepresentasikan properti flex-wrap dari suatu elemen.

Baca Juga:


5 Value Properti flexWrap Style DOM pada HTML
Properti flexWrap Style DOM

Contoh: memperlihatkan properti nowrap.

<!DOCTYPE html>

<html>

 

<head>

<title>

Properti Style flexWrap DOM 

pada HTML

</title>

</head>

 

<body>

 

<center>

<h1>

Lets 

<button 

onclick="wrap()">

Press

</button>

</h1>

</center>

 

<h4>

Klik tombol 'Press' untuk 

mengatur nilai properti 

flexWrap ke "nowrap".

</h4>

 

<style>

#main 

{

width: 150px;

height: 150px;

border: 1px solid #c3c3c3;

display: -webkit-flex;

-webkit-flex-wrap: wrap;

display: flex;

flex-wrap: wrap;

}

 

#main div 

{

width: 50px;

height: 50px;

}

</style>

 

<div id="main">

<div 

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

 

<div 

style="background-color:white;">A</div>

 

<div 

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

 

<div 

style="background-color:white;">A</div>

 

<div 

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

 

</div>

 

<script>

function wrap() 

{

// SAFARI

document.getElementById(

"main").style.WebkitFlexWrap =

"nowrap";

 

// Browser Lainnya

document.getElementById(

"main").style.flexWrap =

"nowrap";

}

</script>

 

</body>

 

</html>


Contoh: memperlihatkan properti wrap-reverse.

<!DOCTYPE html>

<html>

 

<body>

 

<h1>

<center>

Bon 

<button 

onclick="wrap()">

Press

</button>

</center>

</h1>

 

<h4>

Klik tombol 'Press' untuk 

mengatur nilai properti 

flexWrap ke "wrap-reverse".

</h4>

 

<style>

#main 

{

width: 150px;

height: 150px;

border: 1px solid #c3c3c3;

display: -webkit-flex;

-webkit-flex-wrap: wrap;

display: flex;

flex-wrap: wrap;

}

 

#main div 

{

width: 50px;

height: 50px;

}

</style>

 

<div id="main">

 

<div 

style="background-color:green;">

M</div>

 

<div 

style="background-color:white;">

A</div>

 

<div 

style="background-color:green;">

K</div>

 

<div 

style="background-color:white;">

A</div>

 

<div 

style="background-color:green;">

N</div>

 

</div>

 

<script>

function wrap() 

{

// SAFARI

document.getElementById(

"main").style.WebkitFlexWrap =

"nowrap";

 

// Browser Lainnya

document.getElementById(

"main").style.flexWrap =

"wrap-reverse";

}

</script>

 

</body>

 

</html>


Contoh:
memperlihatkan properti initial.

<!DOCTYPE html>

<html>

 

<head>

<title>

Properti Style flexWrap DOM 

pada HTML

</title>

</head>

 

<body>

 

<center>

<h1>

Bons 

<button 

onclick="wrap()">Press

</button>

</h1>

</center>

 

<h4>

Klik tombol 'Press' untuk 

mengatur nilai properti 

flexWrap ke "initial".

</h4>

 

<style>

#main 

{

width: 150px;

height: 150px;

border: 1px solid #c3c3c3;

display: -webkit-flex;

-webkit-flex-wrap: wrap;

display: flex;

flex-wrap: wrap;

}

 

#main div 

{

width: 50px;

height: 50px;

}

</style>

 

<div id="main">

 

<div 

style="background-color:green;">

M</div>

 

<div 

style="background-color:white;">

A</div>

 

<div 

style="background-color:green;">

K</div>

 

<div 

style="background-color:white;">

A</div>

 

<div 

style="background-color:green;">

N</div>

 

</div>

 

<script>

function wrap() 

{

// SAFARI

document.getElementById(

"main").style.WebkitFlexWrap =

"nowrap";

 

// Browser Lainnya

document.getElementById(

"main").style.flexWrap =

"initial";

}

</script>

 

</body>

 

</html>


Contoh:
memperlihatkan properti inherit.

<!DOCTYPE html>

<html>

 

<body>

 

<h1>

<center>

Bon 

<button 

onclick="wrap()">

Press

</button>

</center>

</h1>

 

<h4>

Klik tombol 'Press' untuk 

mengatur nilai dari properti 

flexWrap ke "inherit".

</h4>

 

<style>

#main 

{

width: 150px;

height: 150px;

border: 1px solid #c3c3c3;

display: -webkit-flex;

-webkit-flex-wrap: wrap;

display: flex;

flex-wrap: wrap;

}

 

#main div {

width: 50px;

height: 50px;

}

</style>

 

<div id="main">

 

<div 

style="background-color:green;">

M</div>

 

<div 

style="background-color:white;">

A</div>

 

<div 

style="background-color:green;">

K</div>

 

<div 

style="background-color:white;">

A</div>

 

<div 

style="background-color:green;">

N</div>

 

</div>

 

<script>

function wrap() 

{

// SAFARI

document.getElementById(

"main").style.WebkitFlexWrap =

"nowrap";

 

// Browser Lainnya

document.getElementById(

"main").style.flexWrap =

"inherit";

}

</script>

 

</body>

 

</html>


Komentar

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

    BalasHapus
    Balasan
    1. Berikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti flexWrap Style DOM pada HTML:
      1. Google Chrome
      2. Firefox
      3. Internet Explorer 11.0
      4. Opera
      5. Safari 6.1

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

    BalasHapus
    Balasan
    1. Properti flexWrap Style DOM pada HTML merupakan properti yang digunakan untuk menentukan apakah item fleksibel harus di wrap atau tidak.

      Hapus
    2. Properti HTML DOM Style flexWrap digunakan untuk menentukan bagaimana elemen di dalam elemen flex Wrap atau Tidak.

      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