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

flexFlow Style HTML DOM dan Fungsinya

Dipublikasikan Oleh: elfanmauludi 5 komentar
Properti flexFlow Style DOM pada HTML digunakan untuk menentukan nilai untuk dua properti berbeda, properti flexDirection dan properti flexWrap. Properti flexDirection digunakan untuk menentukan arah dari item fleksibel dan properti flexWrap digunakan untuk menentukan apakah item fleksibel harus melakukan wrap atau tidak.

Sebelum memahami lebih dalam materi tentang flexFlow Style HTML DOM dan Fungsinya, terlebih dahulu pelajari materi tentang: flexDirection Style HTML DOM dan Fungsinya, Mengatur Panjang Awal HTML Menggunakan flexBasis Style DOM, dan Properti Flex Style DOM HTML dan Fungsinya.

Sintak:
  • digunakan untuk mengembalikan nilai string yang merepresentasikan properti flexFlow dari suatu elemen: object.style.flexFlow
  • digunakan untuk mengatur nilai properti flexFlow: object.style.flexFlow = "flex-direction flex-wrap|initial|inherit"

Return Values: berfungsi untuk mengembalikan sebuah string yang merepresentasikan properti flexFlow dari suatu elemen.

Baca Juga:

Property Values:
  • flex-direction dan flex-wrap: Properti flewFlow merupakan kombinasi dari properti flexDirection dan properti flexWrap, dengan nilai default dari properti flex-direction dan flex-wrap adalah baris yang saat ini melakukan wrap.
  • initial: berfungsi untuk mengatur nilai properti flexFlow ke nilai default-nya.
  • inherit: berfungsi untuk menerima nilai turunan dari elemen parent.

Berikut adalah daftar nilai yang mungkin dari properti flexDirection dan flexWrap.
  • flex-direction = "row|row-reverse|column|column-reverse|initial|inherit";
  • flex-wrap = "nowrap|wrap|wrap-reverse|initial|inherit";

Contoh: digunakan untuk mengubah properti flexFlow dari "row wrap" ke "column wrap".

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti Style flexFlow DOM 

pada HTML

</title>

 

<style>

#MHN 

{

width: 220px;

height: 150px;

border: 2px solid black;

/* Untuk Browser Safari */

display: -webkit-flex;

/* Untuk Browser Safari 6.1+ 

*/

-webkit-flex-flow: row wrap;

display: flex;

flex-flow: row wrap;

}

 

#MHN div 

{

width: 50px;

height: 70px;

}

</style>

 

</head>

 

<body>

 

<div id="MHN">

 

<div 

style="background-color:lightgreen;">

M</div>

 

<div 

style="background-color:green;">

A</div>

 

<div 

style="background-color:lightgreen;">

K</div>

 

<div 

style="background-color:green;">

A</div>

 

<div 

style="background-color:lightgreen;">

N</div>

 

</div>

 

<button 

onclick="myBons()">

Click Here

</button>

 

<script>

function myBons() 

{

/* Untuk Safari */

document.getElementById("MHN").style.WebkitFlexFlow

= "column wrap";

 

document.getElementById("MHN").style.FlexFlow

= "column wrap";

}

</script>

 

</body>

 

</html>

Output:
M
A
K
A
N


Contoh: digunakan untuk mengubah nilai properti flexFlow dari "row wrap" ke "row-reverse wrap-reverse".

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti Style flexFlow DOM 

pada HTML

</title>

 

<style>

#MKK2 

{

width: 220px;

height: 150px;

border: 2px solid black;

/* Untuk Browser Safari */

display: -webkit-flex;

/* Untuk Browser Safari 6.1+*/

-webkit-flex-flow: row wrap;

display: flex;

flex-flow: row wrap;

}

 

#MKK2 div 

{

width: 50px;

height: 70px;

}

</style>

 

</head>

 

<body>

 

<div id="MKK2">

 

<div 

style="background-color:lightgreen;">

M</div>

 

<div 

style="background-color:green;">

A</div>

 

<div 

style="background-color:lightgreen;">

K</div>

 

<div 

style="background-color:green;">

A</div>

 

<div 

style="background-color:lightgreen;">

N</div>

 

</div>

 

<button 

onclick="myJins()">

Click Here

</button>

 

<script>

function myJins() 

{

/* Browser Safari */

document.getElementById("MKK2").style.WebkitFlexFlow

= "row-reverse wrap-reverse";

 

document.getElementById("MKK2").style.FlexFlow

= "row-reverse wrap-reverse";

}

</script>

 

</body>

 

</html>

Output:
M
A
K
A
N


Contoh:

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti Style flexFlow DOM 

pada HTML

</title>

 

<style>

#MJJ3 

{

width: 220px;

height: 150px;

border: 2px solid black;

/* Untuk Browser Safari */

display: -webkit-flex;

/* Untuk Browser Safari 6.1+ 

*/

-webkit-flex-flow: row wrap;

display: flex;

flex-flow: row wrap;

}

 

#MJJ3 div 

{

width: 50px;

height: 70px;

}

</style>

 

</head>

 

<body>

 

<div id="MJJ3">

 

<div 

style="background-color:lightgreen;">

M</div>

 

<div 

style="background-color:green;">

A</div>

 

<div 

style="background-color:lightgreen;">

K</div>

 

<div 

style="background-color:green;">

A</div>

 

<div 

style="background-color:lightgreen;">

N</div>

 

</div>

 

<button 

onclick="myDons()">

Click Here

</button>

 

<script>

function myDons() {

/* Browser Safari */

document.getElementById("MJJ3").style.WebkitFlexFlow

= "initial";

 

document.getElementById("MJJ3").style.FlexFlow

= "initial";

}

</script>

 

</body>

 

</html>

Output:
M
A
K
A
N


Contoh:

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti Style flexFlow DOM 

HTML

</title>

 

<style>

#KKK4 

{

width: 220px;

height: 150px;

border: 2px solid black;

/* Untuk Browser Safari */

display: -webkit-flex;

/* Untuk Browser Safari 6.1+ 

*/

-webkit-flex-flow: row wrap;

display: flex;

flex-flow: row wrap;

}

 

#KKK4 div 

{

width: 50px;

height: 70px;

}

</style>

 

</head>

 

<body>

 

<div id="KKK4">

 

<div 

style="background-color:lightgreen;">

M</div>

 

<div 

style="background-color:green;">

A</div>

 

<div 

style="background-color:lightgreen;">

K</div>

 

<div 

style="background-color:green;">

A</div>

 

<div 

style="background-color:lightgreen;">

N</div>

 

</div>

 

<button 

onclick="myBon4()">

Click Here

</button>

 

<script>

function myBon4() 

{

/* Untuk Browser Safari */

document.getElementById("KKK4").style.WebkitFlexFlow

= "inherit";

 

document.getElementById("KKK4").style.FlexFlow

= "inherit";

}

</script>

 

</body>

 

</html>

Output:
M
A
K
A
N

Artikel ini didedikasikan kepada: Rizal Rafly Mardiansyah, Rizky Permatasari, Sabrina Nur Yusrina, Safira Arbella Aurell Urrofik, dan Salsabila Ade Putri.
Location: Kota Semarang, Jawa Tengah, Indonesia

5 komentar untuk "flexFlow Style HTML DOM dan Fungsinya"

  1. AnonimJumat, 08 Juli 2022 pukul 07.48.00 WIB

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

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

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

      Hapus
  2. AnonimSelasa, 09 Agustus 2022 pukul 20.32.00 WIB

    Apa yang dimaksud dengan properti fleFlow Style DOM pada HTML?

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

      Properti flexFlow merupakan properti yang digunakan untuk menetapkan atau mengembalikan nilai panjang item yang relatif terhadap nilai item fleksibel lainnya pada wrap yang sama.

      Hapus
  3. AnonimSelasa, 09 Agustus 2022 pukul 20.33.00 WIB

    Properti flexDirection merupakan properti yang digunakan untuk menentukan arah item fleksibel, dimana properti ini berguna untuk menentukan apakah suatu item fleksibel harus dilakukan wrap atau tidak.

    BalasHapus

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 -