8 Contoh Penggunaan Properti alignContent Style DOM pada HTML

Properti DOM Style alignContent merupakan properti yang digunakan untuk menentukan nilai rataan teks atau item dari sebuah container fleksibel dimana item tersebut tidak digunakan pada semua ruang yang tersedia pada cross-axis.

Sintak:
  • untuk mendapatkan properti alignContent: object.style.alignContent
  • untuk mengatur properti alignContent: object.style.alignContent = "stretch | center | flex-start | flex-end | space-between | space-around | initial | inherit"

Property Value:
  • stretch: digunakan untuk melakukan stretch atau peregangan item supaya sesuai dengan container.
  • center: digunakan untuk menempatkan item ditengah pada posisi container.
  • flex-start: digunakan untuk memposisikan item pada bagian awal dari container.
  • flex-end: digunakan untuk memposisikan item di bagian akhir dari container.
  • space-between: digunakan untuk memposisikan item dengan even space diantara baris, dimana item pertama akan diposisikan pada baris pertama dan item terakhir akan diposisikan pada baris terakhir dan item lainnya akan menempati sisa ruang yang tersedia pada container.
  • space-around: digunakan untuk memposisi item dengan space yang sama dengan space yang ada disekitarnya.
  • initial: digunakan untuk mengatur properti alignContent ke nilai default-nya.
  • inherit: berisi turunan nilai properti dari properti parent-nya.

Return Value: berfungsi untuk mengembalikan sebuah nilai string yang merepresentasikan properti align-content dari suatu elemen.

Contoh: menggunakan nilai stretch.

<!DOCTYPE html>

<html>


<head>


<style>

.main 

{

width: 250px;

height: 300px;

border: 1px solid;

display: flex;

flex-flow: row wrap;

/* mengatur space-around untuk 

mengopservasi dampak dari 

'stretch'*/

align-content: space-around;}

 

.main div 

{

width: 250px;

height: 70px;

font-size: 2rem;

text-align: center;}

</style>


<title>

Properti DOM Style 

alignContent

</title>


</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

DOM Style alignContent

</b>

 

<p>

Klik tombol untuk mengubah 

nilai dari alignContent ke 

"stretch".

</p>

 

<div class="main">

 

<div 

style="background-color:green;">

Blog

</div>

 

<div 

style="background-color:lightgreen;">

Guru

</div>

 

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

TIK

</div>

 

</div>

 

<button 

onclick="changeAlign()">

Change alignContent

</button>

 

<script>

function changeAlign() 

{

document.querySelector('.main').style.alignContent =

"stretch";

}

</script>

 

</body>

 

</html>


Contoh: menggunakan nilai center.

<!DOCTYPE html>

<html>

 

<head>


<style>

.main 

{

width: 250px;

height: 300px;

border: 1px solid;

display: flex;

flex-flow: row wrap;}

 

.main div 

{

width: 250px;

height: 70px;

font-size: 2rem;

text-align: center;}

</style>


<title>

Properti DOM Style 

alignContent

</title>


</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

DOM Style alignContent

</b>

 

<p>

Klik tombol untuk mengubah 

nilai dari alignContent ke 

"center"

</p>

 

<div class="main">

 

<div 

style="background-color:green;">

Blog

</div>

 

<div 

style="background-color:lightgreen;">

Guru

</div>

 

<div 

style="background-color:green;">

TIK

</div>

 

</div>

 

<button 

onclick="changeAlign()">

Change alignContent

</button>

 

<script>

function changeAlign() 

{

document.querySelector('.main').style.alignContent =

"center";

}

</script>

 

</body>

 

</html>


Contoh: menggunakan nilai flex-start.

<!DOCTYPE html>

<html>

 

<head>


<style>

.main 

{

width: 250px;

height: 300px;

border: 1px solid;

display: flex;

flex-flow: row wrap;}

 

.main div 

{

width: 250px;

height: 70px;

font-size: 2rem;

text-align: center;}

</style>


<title>

Properti DOM Style 

alignContent

</title>


</head>

 

<body>

 

<h1 

style="color: green">

Blog

</h1>

 

<b>

DOM Style alignContent

</b>

 

<p>

Klik tombol untuk mengubah 

nilai dari alignContent ke 

"flex-start"

</p>

 

<div class="main">

 

<div 

style="background-color:green;">

Blog

</div>

 

<div 

style="background-color:lightgreen;">

Guru

</div>

 

<div 

style="background-color:green;">

TIK

</div>

 

</div>

 

<button 

onclick="changeAlign()">

Change alignContent

</button>

 

<script>

function changeAlign() 

{

document.querySelector('.main').style.alignContent =

"flex-start";

}

</script>

 

</body>

 

</html>


Contoh: menggunakan nilai flex-end.

<!DOCTYPE html>

<html>

 

<head>


<style>

.main 

{

width: 250px;

height: 300px;

border: 1px solid;

display: flex;

flex-flow: row wrap;}

 

.main div 

{

width: 250px;

height: 70px;

font-size: 2rem;

text-align: center;}

</style>


<title>

Properti DOM Style 

alignContent

</title>


</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

DOM Style alignContent

</b>

 

<p>

Klik tombol untuk mengubah 

nilai dari alignContent ke 

"flex-end"

</p>

 

<div class="main">

 

<div 

style="background-color:green;">

Blog

</div>

 

<div 

style="background-color:lightgreen;">

Guru

</div>

 

<div 

style="background-color:green;">

TIK

</div>

 

</div>

 

<button 

onclick="changeAlign()">

Change alignContent

</button>

 

<script>

function changeAlign() 

{

document.querySelector('.main').style.alignContent =

"flex-end";

}

</script>

 

</body>

 

</html>


Contoh: menggunakan nilai space-between.

<!DOCTYPE html>

<html>

 

<head>

 

<style>

.main 

{

width: 250px;

height: 300px;

border: 1px solid;

display: flex;

flex-flow: row wrap;}

 

.main div 

{

width: 250px;

height: 70px;

font-size: 2rem;

text-align: center;}

</style>

 

<title>

Properti DOM Style 

alignContent

</title>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

DOM Style alignContent

</b>

 

<p>

Klik tombol untuk mengubah 

nilai dari alignContent ke 

"space-between"

</p>

 

<div class="main">

 

<div 

style="background-color:green;">

Blog

</div>

 

<div 

style="background-color:lightgreen;">

Guru

</div>

 

<div 

style="background-color:green;">

TIK

</div>

 

</div>

 

<button 

onclick="changeAlign()">

Change alignContent

</button>

 

<script>

function changeAlign() 

{

document.querySelector('.main').style.alignContent =

"space-between";

}

</script>

 

</body>

 

</html>


Contoh: menggunakan nilai space-around.

<!DOCTYPE html>

<html>

 

<head>

 

<style>

.main 

{

width: 250px;

height: 300px;

border: 1px solid;

display: flex;

flex-flow: row wrap;}

 

.main div 

{

width: 250px;

height: 70px;

font-size: 2rem;

text-align: center;}

</style>

 

<title>

Properti DOM Style 

alignContent

</title>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

DOM Style alignContent

</b>

 

<p>

Klik tombol untuk mengubah 

nilai dari alignContent ke 

"space-around"

</p>

 

<div class="main">

 

<div 

style="background-color:green;">

Blog

</div>

 

<div 

style="background-color:lightgreen;">

Guru

</div>

 

<div 

style="background-color:green;">

TIK

</div>

 

</div>

 

<button 

onclick="changeAlign()">

Change alignContent

</button>

 

<script>

function changeAlign() 

{

document.querySelector('.main').style.alignContent =

"space-around";

}

</script>

 

</body>

 

</html>


Contoh: menggunakan nilai initial.

<!DOCTYPE html>

<html>

 

<head>

 

<style>

.main 

{

width: 250px;

height: 300px;

border: 1px solid;

display: flex;

flex-flow: row wrap;

/* mengatur space-around untuk 

mengobservasi dampak dari 

'initial' */

align-content: space-around;}

 

.main div 

{

width: 250px;

height: 70px;

font-size: 2rem;

text-align: center;}

</style>

 

<title>

Properti DOM Style 

alignContent

</title>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

DOM Style alignContent

</b>

 

<p>

Klik tombol untuk mengubah 

nilai dari alignContent ke 

"initial".

</p>

 

<div class="main">

 

<div 

style="background-color:green;">

Blog

</div>

 

<div 

style="background-color:lightgreen;">

Guru

</div>

 

<div 

style="background-color:green;">

TIK

</div>

 

</div>

 

<button 

onclick="changeAlign()">

Change alignContent

</button>

 

<script>

function changeAlign() 

{

document.querySelector('.main').style.alignContent =

"initial";

}

</script>

 

</body>

 

</html>


Contoh: menggunakan nilai inherit.

<!DOCTYPE html>

<html>

 

<head>

 

<style>

#parent 

{

/* Mengatur align-content dari 

parent untuk mengobservasi 

dampak dari 'inherit' */

align-content: flex-end;}

 

.main 

{

width: 250px;

height: 300px;

border: 1px solid;

display: flex;

flex-flow: row wrap;}

 

.main div 

{

width: 250px;

height: 70px;

font-size: 2rem;

text-align: center;}

</style>

 

<title>

Properti DOM Style 

alignContent

</title>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

DOM Style alignContent

</b>

 

<p>

Klik tombol untuk mengubah 

nilai dari alignContent ke 

"inherit".

</p>

 

<div id="parent">

 

<div class="main">

 

<div 

style="background-color:green;">

Blog

</div>

 

<div 

style="background-color:lightgreen;">

Guru

</div>

 

<div 

style="background-color:green;">

TIK

</div>

 

</div>

 

</div>

 

<button 

onclick="changeAlign()">

Change alignContent

</button>

 

<script>

function changeAlign() 

{

document.querySelector('.main').style.alignContent =

"inherit";

}

</script>

 

</body>

 

</html>

Komentar

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

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

      Hapus
  2. Apa fungsi properti alignmentContent Style DOM pada HTML?

    BalasHapus
    Balasan
    1. Properti alignContent style DOM HTML berfungsi untuk menyelaraskan item container fleksibel ketika item tidak menggunakan semua ruang yang tersedia pada sumbu vertikal.

      Catatan: gunakan properti justifyContent untuk menyetarakan item pada sumbu horizontal, dimana pada penggunaannya harus terdapat beberapa baris item lain agar properti ini memiliki efek pada dokumen yang ditampilkan.

      Hapus
    2. Properti style alignmentContent merupakan properti yang digunakan untuk menyelaraskan item dalam flexbox atau grid.

      Hapus

Posting Komentar

*Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung. :D

*Jika terdapat typo, link bermasalah, dan lain sebagainya, pengunjung dapat melaporkan permasalahan tersebut melalui WA: +62-896-2514-6106




~ Ikatlah Ilmu dengan Memostingkannya ~

Referensi Tambahan:

Enkapsulasi pada Java

2 Jenis Utama Kegiatan Penelitian Berdasarkan Waktunya, Crosssectional Salah Satunya

6 Contoh Program Method Overloading pada Java

3 Jenis Utama Looping pada Java

Perbedaan stdio.h dan stdlib.h pada Bahasa C