Lompat ke konten Lompat ke sidebar Lompat ke footer

Mengatur Item Rataan HTML Menggunakan alignItems Style DOM

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

7 Contoh Penggunaan Properti alignItems Style DOM pada HTML
Ilustrasi alignItems HTML

Sebelum memahami lebih dalam materi tentang Mengatur Item Rataan HTML Menggunakan alignItems Style DOM, terlebih dahulu pelajari materi tentang: Menentukan Nilai Rataan Teks HTML alignContent Style DOM [klik], Memeriksa Nilai Lebar HTML Menggunakan Width Screen [klik], dan Memeriksa Resolusi Warna HTML Menggunakan pixelDepth Screen [klik].

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 Values:
  • 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 Values: berfungsi untuk mengembalikan sebuah nilai string, yang merepresentasikan properti align-items dari suatu elemen.

Baca Juga:

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>


Artikel ini didedikasikan kepada: Dani Alfian, Da'Ani Zulfa Nisfatullaili, Denny Wahyu Pramudya, Deo Budhi Anggitlistio, dan Devi Anggraeni Kuastutik.

5 komentar untuk "Mengatur Item Rataan HTML Menggunakan alignItems Style DOM"

  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

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 -