7 Contoh Penggunaan Properti alignItems Style DOM pada HTML

Properti Style alignItems DOM pada HTML digunakan untuk mengatur atau mengembalikan nilai default dari rataan pada item yang terdapat di dalam container fleksibel.

Sintak:
  • digunakan untuk mendapatkan properti alignItems: object.style.alignItems
  • digunakan untuk mengatur properti alignItems: object.style.alignItems = "stretch|center|flex-start|flex-end|baseline|initial|inherit"

Property Value:
  • stretch: digunakan untuk melakukan stretch pada item agar bersesuaian dengan container, properti strectch merupaka nilai default dari properti alignItems.
  • center: digunakan untuk mengarahkan item ke posisi tengah pada container.
  • flex-start: digunakan untuk memposisikan item pada bagian awal dari container.
  • flex-end: digunakan untuk memposisikan item pada bagian akhir dari container.
  • baseline: digunakan untuk memposisikan item pada bagian baris dasar dari container.
  • initial: digunakan untuk mengatur porperti alignItems ke nilai default-nya.
  • inherit: berfungsi untuk menurunkan nilai properti dari nilai parent-nya.

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

Value properti yang telah dijelaskan sebelumnya akan diterapkan pada contoh sebagai berikut.

Contoh: penggunaan nilai stretch.

<!DOCTYPE html>

<html 

lang="en">

 

<head>

 

<title>

Properti DOM Style alignItems

</title>

 

<style>

.main 

{

width: 200px;

height: 150px;

border: solid;

display: flex;

/* mengatur align-items ke 

posisi tengah untuk 

mengobservasi dampak dari 

nilai stretch */

align-items: center;}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti DOM Style alignItems

</b>

 

<p>

Klik tombol untuk mengubah 

properti alignItems ke 

'stretch'.

</p>

 

<div class="main">

 

<div 

style="background-color:lightblue;">

Item 1 

</div>

 

<div 

style="background-color:lightgreen;">

Item 2 

</div>

 

<div 

style="background-color:lightsalmon;">

Item 3 

</div>

 

<div 

style="background-color:lightyellow;">

Item 4 

</div>

 

</div>

 

<button 

onclick="changePos()">

Change alignItems property

</button>

 

<script>

function changePos() 

{

elem = document.querySelector('.main');

// pengaturan alignItems ke 

// stretch

elem.style.alignItems = 'stretch';

}

</script>

 

</body>

 

</html>


Contoh: penggunaan nilai center.

<!DOCTYPE html>

<html 

lang="en">

 

<head>

 

<title>

Properti DOM Style alignItems

</title>

 

<style>

.main 

{

width: 200px;

height: 150px;

border: solid;

display: flex;}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti DOM Style alignItems

</b>

 

<p>

Klik tombol untuk mengubah 

properti alignItems ke 

'center'.

</p>

 

<div class="main">

 

<div 

style="background-color:lightblue;">

Item 1 

</div>

 

<div 

style="background-color:lightgreen;">

Item 2 

</div>

 

<div 

style="background-color:lightsalmon;">

Item 3 

</div>

 

<div 

style="background-color:lightyellow;">

Item 4 

</div>

 

</div>

 

<button onclick="changePos()">

Change alignItems property

</button>

 

<script>

function changePos() 

{

elem = document.querySelector('.main');

// Pengaturan alignItems ke 

// center

elem.style.alignItems = 'center';

}

</script>

 

</body>

 

</html>


Contoh: penggunaan nilai flex-start.

<!DOCTYPE html>

<html 

lang="en">

 

<head>

 

<title>

Properti DOM Style alignItems

</title>

 

<style>

.main 

{

width: 200px;

height: 150px;

border: solid;

display: flex;}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti DOM Style alignItems

</b>

 

<p>

Klik tombol untuk mengubah 

properti alignItems ke 

'flex-start'.

</p>

 

<div class="main">

 

<div 

style="background-color:lightblue;">

Item 1 

</div>

 

<div 

style="background-color:lightgreen;">

Item 2 

</div>

 

<div 

style="background-color:lightsalmon;">

Item 3 

</div>

 

<div 

style="background-color:lightyellow;">

Item 4 

</div>

 

</div>

 

<button 

onclick="changePos()">

Change alignItems property

</button>

 

<script>

function changePos() 

{

elem = document.querySelector('.main');

// Pengaturan alignItems ke 

// flex-start

elem.style.alignItems = 'flex-start';

}

</script>

 

</body>

 

</html>


Contoh: penggunaan nilai flex-end.

<!DOCTYPE html>

<html 

lang="en">

 

<head>

 

<title>

Properti DOM Style alignItems

</title>

 

<style>

.main 

{

width: 200px;

height: 150px;

border: solid;

display: flex;}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti DOM Style alignItems

</b>

 

<p>

Klik tombol untuk mengubah 

properti alignItems ke 

'flex-end'.

</p>

 

<div class="main">

 

<div 

style="background-color:lightblue;">

Item 1 

</div>

 

<div 

style="background-color:lightgreen;">

Item 2 

</div>

 

<div 

style="background-color:lightsalmon;">

Item 3 

</div>

 

<div 

style="background-color:lightyellow;">

Item 4 

</div>

 

</div>

 

<button 

onclick="changePos()">

Change alignItems property

</button>

 

<script>

function changePos() 

{

elem = document.querySelector('.main');

// Pengaturan alignItems ke 

// flex-end

elem.style.alignItems = 'flex-end';

}

</script>

 

</body>

 

</html>


Contoh: penggunaan nilai baseline.

<!DOCTYPE html>

<html 

lang="en">

 

<head>

 

<title>

Properti DOM Style alignItems

</title>

 

<style>

.main 

{

width: 200px;

height: 150px;

border: solid;

display: flex;}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti DOM Style alignItems

</b>

 

<p>

Klik tombol untuk mengubah 

properti alignItems ke 

'baseline'.

</p>

 

<div class="main">

 

<div 

style="background-color:lightblue;">

Item 1 

</div>

 

<div 

style="background-color:lightgreen;">

Item 2 

</div>

 

<div 

style="background-color:lightsalmon;">

Item 3 

</div>

 

<div 

style="background-color:lightyellow;">

Item 4 

</div>

 

</div>

 

<button 

onclick="changePos()">

Change alignItems property

</button>

 

<script>

function changePos() 

{

elem = document.querySelector('.main');

// Pengaturan alignItems ke 

baseline

elem.style.alignItems = 'baseline';

}

</script>

 

</body>

 

</html>


Contoh: penggunaan nilai initial yang berfungsi untuk mengatur properti ke nilai default-nya.

<!DOCTYPE html>

<html 

lang="en">

 

<head>

 

<title>

Properti DOM Style alignItems

</title>

 

<style>

.main 

{

width: 200px;

height: 150px;

border: solid;

display: flex;

/* Pengaturan align-items ke 

center untuk mengamati dampak 

dari penggunaan initial value 

*/

align-items: center;}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti DOM Style alignItems

</b>

 

<p>

Klik tombol untuk mengubah 

properti alignItems ke 

'initial'.

</p>

 

<div class="main">

 

<div 

style="background-color:lightblue;">

Item 1 

</div>

 

<div 

style="background-color:lightgreen;">

Item 2 

</div>

 

<div 

style="background-color:lightsalmon;">

Item 3 

</div>

 

<div 

style="background-color:lightyellow;">

Item 4 

</div>

 

</div>

 

<button 

onclick="changePos()">

Change alignItems property

</button>

 

<script>

function changePos() 

{

elem = document.querySelector('.main');

// Pengaturan alignItems ke 

// initial

elem.style.alignItems = 'initial';

}

</script>

 

</body>

 

</html>


Contoh: penggunaan nilai inherit yang berfungsi untuk mengatur posisi sesuai dengan elemen parent-nya.

<!DOCTYPE html>

<html 

lang="en">

 

<head>

 

<title>

Properti DOM Style alignItems

</title>

 

<style>

.main 

{

width: 200px;

height: 150px;

border: solid;

display: flex;}

 

#parent 

{

/* Pengaturan parent div 

align-items ke flex-end */

align-items: flex-end;}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti DOM Style alignItems

</b>

 

<p>

Klik tombol untuk mengubah 

properti alignItems ke 

'inherit'.

</p>

 

<div id="parent">

 

<div class="main">

 

<div 

style="background-color:lightblue;">

Item 1 

</div>

 

<div 

style="background-color:lightgreen;">

Item 2 

</div>

 

<div 

style="background-color:lightsalmon;">

Item 3 

</div>

 

<div 

style="background-color:lightyellow;">

Item 4 

</div>

 

</div>

 

</div>

 

<button 

onclick="changePos()">

Change alignItems property

</button>

 

<script>

function changePos() 

{

elem = document.querySelector('.main');

// Pengaturan alignItems ke 

// inherit dari parent div

elem.style.alignItems = 'inherit';

}

</script>

 

</body>

 

</html>

Komentar

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

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

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

    BalasHapus
    Balasan
    1. Properti style alignItems DOM pada HTML digunakan untuk menentukan perataan default pada item dalam container fleksibel.

      Tip: gunakan properti align-self dari setiap item untuk mengganti properti align-items.

      Hapus
    2. Properti alignItems berfungsi untuk menentukan perataan default ke item yang berada dalam flexible.

      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