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

flexWrap Style HTML DOM dan Fungsinya

Dipublikasikan Oleh: elfanmauludi 5 komentar
\ Properti flexGrow Style DOM pada HTML digunakan untuk menentukan apakah item fleksibel harus melakukan wrap atau tidak.

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

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:

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>


Artikel ini didedikasikan kepada: Safira Arbella Aurell Urrofik, Salsabila Ade Putri, Sara Louise Immanuella Malino, Satria Yoga Prastama, dan Sekarwangi Zalita.
Location: Kota Semarang, Jawa Tengah, Indonesia

5 komentar untuk "flexWrap Style HTML DOM dan Fungsinya"

  1. AnonimJumat, 08 Juli 2022 pukul 13.21.00 WIB

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

    BalasHapus
    Balasan
    1. AnonimJumat, 08 Juli 2022 pukul 13.22.00 WIB

      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. AnonimSelasa, 09 Agustus 2022 pukul 20.47.00 WIB

    Apa yang dimaksud dengan properti flexWrap Style DOM pada HTML?

    BalasHapus
    Balasan
    1. AnonimSelasa, 09 Agustus 2022 pukul 20.48.00 WIB

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

      Hapus
    2. AnonimSelasa, 09 Agustus 2022 pukul 20.50.00 WIB

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

      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 -