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.

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, Memeriksa Nilai Lebar HTML Menggunakan Width Screen, dan Memeriksa Resolusi Warna HTML Menggunakan pixelDepth Screen.

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

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>

<button

onclick="changePos()">

Change alignItems property

</button>

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

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>

Change alignItems property

</button>

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

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>

<button

onclick="changePos()">

Change alignItems property

</button>

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

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>

<button

onclick="changePos()">

Change alignItems property

</button>

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

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>

<button

onclick="changePos()">

Change alignItems property

</button>

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

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>

<button

onclick="changePos()">

Change alignItems property

</button>

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

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>

<button

onclick="changePos()">

Change alignItems property

</button>

function changePos()

{

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

// Pengaturan alignItems ke

// inherit dari parent div

elem.style.alignItems = 'inherit';

}

</script>

</body>

</html>

Referensi Tambahan:

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

Location: Semarang, Kota Semarang, Jawa Tengah, Indonesia

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

AnonimRabu, 06 April 2022 pukul 13.14.00 WIB
Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti alignItems Style DOM pada HTML?
BalasHapus
Balasan
AnonimSelasa, 19 April 2022 pukul 08.46.00 WIB
Apa fungsi properti alignItems Style DOM pada HTML?
BalasHapus
Balasan

Tambahkan komentar

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 -

E-SISTEM:	Bahasa Pemrograman:
open_in_newE-RAPORT open_in_newE-PERPUS open_in_newE-LITERASI open_in_newE-KONSELING	open_in_newBahasa HTML open_in_newBahasa C open_in_newBahasa Java open_in_newBahasa C++
Materi Penelitian:	Administrasi Siswa:
open_in_newKlasifikasi Penelitian open_in_newPenelitian Tindakan Kelas open_in_newStatistika Penelitian open_in_newContoh Skripsi	open_in_newNilai dan Arsip open_in_newPerbaikan Data open_in_newKatalog Siswa open_in_newBuku Digital
Referensi Umum:	Magic
open_in_newMapel Informatika open_in_newLogo Instansi dan Organisasi open_in_newArtikel open_in_newTools dan Game	Mystery Box

PENELITIAN.ID

Mengatur Item Rataan HTML Menggunakan alignItems Style DOM

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

Menu Halaman Statis