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

Menentukan Nilai Rataan Teks HTML alignContent Style DOM

Dipublikasikan Oleh: elfanmauludi 5 komentar
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.


Sebelum memahami lebih dalam materi tentang Menentukan Nilai Rataan Teks HTML alignContent Style DOM, terlebih dahulu pelajari materi tentang: Memeriksa Nilai Lebar HTML Menggunakan Width Screen, Memeriksa Resolusi Warna HTML Menggunakan pixelDepth Screen, dan Memeriksa Panjang HTML Menggunakan Height Screen.

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

Property Values:
  • 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>



Rataan konten adalah salah satu aspek penting dalam pengaturan tata letak elemen-elemen dalam dokumen HTML. Untuk meraih tampilan yang lebih rapi dan terstruktur, pengaturan tata letak sering kali melibatkan penyusunan elemen-elemen dalam sebuah wadah atau kontainer, dimana pengaturan posisi elemen-elemen ini berperan sangat penting dalam menciptakan pengalaman visual yang menyenangkan bagi pengunjung situs web. Salah satu properti yang digunakan dalam pengaturan rataan konten ini adalah properti alignContent pada gaya dokumen objek model DOM HTML. Properti ini mengatur bagaimana baris-baris dalam sebuah wadah diatur sepanjang sumbu lintang ketika ruang di dalam wadah tersebut lebih besar dari ukuran total elemen yang ada.

Secara teknis, properti ini digunakan dalam konteks model kotak fleksibel, yang dapat ditemukan pada elemen-elemen yang memiliki display fleksibel atau grid. AlignContent mengatur jarak antar baris pada kontainer fleksibel atau grid, bergantung pada nilai yang diberikan untuk properti ini. Dengan menggunakan properti alignContent, nilai sumbu vertikal dapat disesuaikan dengan kebutuhan, tergantung dari bagaimana elemen-elemen kontainer perlu diatur.

Ketika ruang yang ada lebih besar daripada elemen yang terletak di dalamnya, nilai dari alignContent akan menentukan bagaimana elemen-elemen ini akan diletakkan pada ruang kosong yang tersedia. Properti ini mempengaruhi tata letak ketika ada banyak elemen dalam sebuah kontainer yang memiliki lebih dari satu baris, tetapi tidak mempengaruhi elemen-elemen yang hanya terletak dalam satu baris saja.

Terdapat beberapa nilai yang dapat digunakan untuk mengatur alignContent sesuai dengan kebutuhan tata letak. Salah satunya adalah nilai flex-start. Dengan menggunakan nilai ini, baris-baris akan diletakkan pada bagian atas ruang kosong yang ada dalam kontainer. Sebaliknya, dengan menggunakan nilai flex-end, baris-baris akan diletakkan di bagian bawah ruang kosong dalam kontainer. Kedua nilai ini memberi pengaturan rataan konten yang jelas, memudahkan pemanfaatan ruang sesuai dengan keinginan.

Selain itu, nilai lain yang digunakan adalah center, yang akan menempatkan baris-baris pada pusat ruang kosong, dengan jarak yang merata di kedua sisi. Nilai space-between mengatur jarak antar baris untuk merata sepanjang ruang kosong yang ada. Dalam hal ini, jarak antar baris akan dihitung secara otomatis, sehingga elemen-elemen tersebut tersebar rata tanpa ada jarak berlebih di bagian awal dan akhir ruang kosong. Sementara itu, nilai space-around menambahkan jarak antar baris dengan cara yang berbeda. Dalam hal ini, setiap baris akan dipisahkan oleh jarak yang sama, tetapi akan ada ruang yang lebih besar di antara baris pertama dan kedua serta di antara baris terakhir dan ruang akhir.

Selain nilai-nilai tersebut, ada juga nilai stretch, yang memungkinkan baris-baris untuk memanfaatkan seluruh ruang yang tersedia. Dengan menggunakan nilai ini, baris-baris akan diperluas secara otomatis untuk mengisi ruang kosong yang ada, memberikan tampilan yang lebih padat dan lebih penuh. Nilai ini sangat berguna ketika ruang kosong harus digunakan sepenuhnya tanpa ada celah antar elemen.

Tentukan nilai alignContent yang paling sesuai untuk layout yang diinginkan. Nilai-nilai ini memungkinkan pengaturan posisi elemen-elemen dalam ruang kosong secara fleksibel, memberikan berbagai kemungkinan dalam menciptakan tampilan yang sesuai dengan tujuan desain. Penggunaan yang tepat dari properti alignContent akan meningkatkan kualitas desain situs web, menciptakan tampilan yang seimbang dan terorganisir.

Namun, penting untuk memahami bahwa properti ini hanya berfungsi pada kontainer dengan elemen-elemen yang memiliki sifat fleksibel, seperti yang ditemukan pada properti display: flex atau display: grid. Properti ini tidak akan memberikan efek apa pun pada elemen-elemen yang tidak memiliki sifat tersebut. Selain itu, properti alignContent hanya berfungsi ketika ada lebih dari satu baris elemen dalam kontainer. Jika kontainer hanya berisi satu baris elemen, properti ini tidak akan berpengaruh pada pengaturan tata letaknya.

Penting juga untuk memerhatikan bagaimana properti ini berinteraksi dengan properti lainnya. Misalnya, properti alignItems dan justifyContent juga mempengaruhi posisi elemen-elemen dalam kontainer fleksibel. Sementara alignItems mengatur posisi elemen-elemen sepanjang sumbu tegak, justifyContent mengatur posisi elemen-elemen sepanjang sumbu mendatar. Keduanya dapat bekerja bersama dengan alignContent untuk menciptakan tata letak yang optimal.

Selain itu, pengaturan ukuran elemen dalam kontainer juga mempengaruhi penggunaan properti ini. Sebagai contoh, jika elemen-elemen dalam kontainer memiliki ukuran tetap, hasil dari pengaturan alignContent dapat berbeda dibandingkan dengan ketika elemen-elemen tersebut memiliki ukuran yang fleksibel. Dengan elemen-elemen fleksibel, seperti yang menggunakan flex-grow atau flex-shrink, tata letak akan lebih responsif terhadap pengaturan nilai alignContent, karena elemen-elemen tersebut dapat mengubah ukuran untuk mengisi ruang yang tersedia.

Dalam konteks penggunaan properti alignContent dalam desain situs web, perhatian terhadap kebutuhan pengaturan ruang dan pengaturan jarak antar elemen menjadi sangat penting. Setiap pilihan nilai akan mempengaruhi keseluruhan tata letak dan memberikan pengalaman visual yang berbeda bagi pengguna. Oleh karena itu, eksperimen dengan nilai-nilai yang berbeda akan sangat membantu dalam mencapai tampilan yang optimal.

Dengan menguasai cara penggunaan alignContent, pengaturan tata letak elemen-elemen dalam dokumen HTML dapat dilakukan dengan lebih efektif. Hal ini memungkinkan pencapaian desain yang lebih fleksibel dan sesuai dengan berbagai kebutuhan, baik itu untuk desain situs web yang sederhana maupun yang kompleks. Ketelitian dalam memilih nilai yang tepat dan memahami interaksi antar properti lain akan memberi dampak besar pada hasil akhir tata letak yang diinginkan.

Kesimpulannya, penggunaan alignContent dalam pengaturan tata letak kontainer fleksibel merupakan alat yang sangat berguna untuk menciptakan desain yang rapi dan terorganisir. Pengaturan rataan konten yang tepat akan memastikan elemen-elemen dalam kontainer tersusun dengan cara yang sesuai, mengoptimalkan penggunaan ruang dan menciptakan tampilan yang lebih estetis. Pemahaman yang mendalam tentang nilai-nilai yang tersedia dan bagaimana nilai tersebut mempengaruhi tata letak secara keseluruhan akan sangat berguna bagi perancang situs web yang ingin menghasilkan desain yang responsif dan efektif.

Melanjutkan pembahasan tentang penggunaan properti alignContent pada gaya dokumen objek model (DOM) dalam HTML, penting untuk mengeksplorasi beberapa aspek lanjutan yang berkaitan dengan praktik penggunaan properti ini dalam berbagai konteks desain. Salah satu hal yang perlu diperhatikan adalah hubungan antara alignContent dengan elemen-elemen yang berada di dalam wadah kontainer fleksibel.

Dalam banyak kasus, pengaturan tata letak kontainer fleksibel melibatkan berbagai elemen yang dapat berubah ukuran, baik berdasarkan konten yang ada di dalamnya maupun berdasarkan pengaturan fleksibilitas ukuran. Elemen-elemen ini sering kali dipengaruhi oleh properti seperti flex-grow dan flex-shrink, yang memungkinkan elemen-elemen untuk menyesuaikan ukurannya tergantung pada ruang yang tersedia. Dalam konteks ini, pengaturan alignContent akan berperan untuk memastikan bahwa baris-baris yang terbentuk tetap terdistribusi secara merata atau sesuai dengan tujuan desain.

Namun, meskipun penggunaan properti ini cukup fleksibel dan memberikan banyak kontrol terhadap tata letak, ada batasan tertentu yang perlu diperhatikan. Sebagai contoh, meskipun alignContent memungkinkan pengaturan rataan vertikal bagi elemen-elemen dalam wadah fleksibel, pengaruhnya hanya terasa jika ada lebih dari satu baris elemen yang terdapat di dalamnya. Jika semua elemen disusun dalam satu baris saja, pengaturan alignContent tidak akan memiliki efek yang berarti.

Hal ini mengingat bahwa properti alignContent berfungsi untuk mengatur jarak antar baris ketika ada lebih dari satu baris elemen dalam kontainer. Oleh karena itu, penting untuk merancang layout dengan mempertimbangkan jumlah elemen dan bagaimana elemen-elemen tersebut akan tersebar dalam ruang yang ada. Dalam beberapa kasus, pengaturan ulang elemen untuk memaksimalkan penggunaan ruang atau merancang ulang ukuran elemen dapat memberikan hasil yang lebih optimal.

Meskipun demikian, pengaturan nilai yang tepat untuk alignContent tetap penting untuk memperoleh kontrol penuh atas posisi dan jarak antar elemen. Misalnya, ketika menggunakan nilai space-evenly, seluruh ruang kosong dalam kontainer akan dibagi dengan jarak yang merata antara setiap baris. Dalam desain situs web, teknik ini sering kali digunakan untuk menciptakan efek keseimbangan visual yang menyenangkan. Ini sangat efektif ketika diinginkan agar setiap baris memiliki jarak yang konsisten satu sama lain.

Selain itu, penggunaan properti alignContent tidak terbatas hanya pada desain situs web statis. Dalam desain responsif, dimana tampilan situs web harus disesuaikan dengan berbagai ukuran perangkat, properti ini juga memiliki peran yang penting. Desainer dapat mengatur alignContent untuk memastikan elemen-elemen tetap teratur dan rapi meskipun ruang yang tersedia berubah. Misalnya, dalam tampilan layar kecil seperti pada perangkat seluler, pengaturan nilai alignContent dapat disesuaikan agar elemen-elemen tetap terjaga jaraknya, sehingga desain situs tetap terlihat baik meskipun ada perubahan ukuran layar.

Di sisi lain, penggunaan alignContent dalam konteks grid juga memberikan keunggulan tambahan. Ketika bekerja dengan grid, elemen-elemen tidak hanya disusun secara vertikal dan horizontal, tetapi juga mengisi ruang secara lebih terorganisir dengan kolom dan baris. Dalam hal ini, alignContent bekerja sama dengan properti lainnya, seperti justifyContent, untuk memberikan kontrol penuh terhadap posisi elemen-elemen dalam grid. Pengaturan jarak antar baris dalam grid akan lebih efisien jika alignContent diatur dengan benar, memungkinkan elemen-elemen untuk terdistribusi dengan lebih baik dan menciptakan kesan keteraturan yang lebih jelas.

Selain grid dan kontainer fleksibel, pengaturan rataan konten juga penting dalam desain elemen-elemen seperti form atau tombol yang memiliki banyak konten di dalamnya. Dalam kasus ini, alignContent dapat digunakan untuk menjaga jarak antar elemen input atau tombol sehingga tampilan form lebih rapi dan lebih mudah dibaca oleh pengguna. Setiap elemen dalam form akan diatur agar memiliki jarak yang tepat, memberi ruang yang cukup di antara elemen untuk mempermudah pengguna dalam berinteraksi.

Untuk mengoptimalkan penggunaan properti ini, desainer perlu memahami cara kerja setiap nilai dari alignContent dan bagaimana nilai tersebut berinteraksi dengan elemen-elemen lainnya dalam wadah kontainer. Eksperimen dengan nilai yang berbeda sangat disarankan untuk menemukan hasil terbaik yang sesuai dengan tujuan desain.

Secara keseluruhan, alignContent adalah properti yang sangat berguna dalam menciptakan tampilan yang terorganisir dan terstruktur dengan baik dalam halaman web. Dengan pemahaman yang baik tentang cara kerjanya dan bagaimana memanfaatkan nilai-nilai yang tersedia, desain situs web dapat dioptimalkan untuk memberikan pengalaman visual yang menyenangkan dan responsif bagi pengguna, baik pada perangkat desktop maupun seluler. Properti ini memberi fleksibilitas besar dalam pengaturan tata letak elemen-elemen, serta dapat digunakan dalam berbagai konteks untuk memastikan bahwa ruang yang ada digunakan secara efisien dan sesuai dengan desain yang diinginkan.

Dengan demikian, properti alignContent memainkan peran yang sangat penting dalam memastikan bahwa elemen-elemen dalam wadah fleksibel atau grid diletakkan dengan cara yang sesuai, serta memberikan kendali penuh atas rataan konten dalam ruang kosong. Penggunaan yang bijaksana dari properti ini akan menghasilkan desain yang lebih bersih, lebih teratur, dan lebih responsif, menciptakan pengalaman yang lebih baik bagi pengguna.

Artikel ini akan dibaca oleh: Danang Setyo Handoko, Dani Alfian, Da'Ani Zulfa Nisfatullaili, Denny Wahyu Pramudya, dan Deo Budhi Anggitlistio.
Location: Semarang, Kota Semarang, Jawa Tengah, Indonesia

5 komentar untuk "Menentukan Nilai Rataan Teks HTML alignContent Style DOM"

  1. AnonimRabu, 06 April 2022 pukul 12.25.00 WIB

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

    BalasHapus
    Balasan
    1. AnonimRabu, 06 April 2022 pukul 12.26.00 WIB

      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. AnonimSelasa, 19 April 2022 pukul 08.42.00 WIB

    Apa fungsi properti alignmentContent Style DOM pada HTML?

    BalasHapus
    Balasan
    1. AnonimSelasa, 19 April 2022 pukul 08.43.00 WIB

      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. AnonimSelasa, 19 April 2022 pukul 08.44.00 WIB

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

      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 -