Mengatur Posisi HTML Menggunakan justifyContent Style DOM
Properti justifyContent Style DOM pada HTML digunakan untuk menentukan perataan item secara horizontal ketika properti tersebut tidak mampu untuk digunakan pada semua ruang yang tersedia. Properti justifyContent digunakan untuk mengatur posisi dari suatu elemen. Secara default, item akan diposisikan pada bagian awal dari container.
Sebelum memahami lebih dalam materi tentang Mengatur Posisi HTML Menggunakan justifyContent Style DOM, terlebih dahulu pelajari materi tentang: Isolation Style HTML DOM dan Fungsinya, Mengatur Panjang HTML Menggunakan Height Style DOM, dan Mengatur Ukuran Huruf HTML Menggunakan fontSizeAdjust Style DOM.
Sintak:
Property Values:
Return Values: Berfungsi untuk mengembalikan sebuang string yang merepresentasikan properti justifyContent dari suatu elemen.
- Digunakan untuk mengembalikan nilai properti justifyContent: object.style.justifyContent
- Digunakan untuk mengatur nilai properti justifyContent: object.style.justifyContent = "flex-start|flex-end|center|space-between|space-around|initial|inherit"
Property Values:
- flex-start: Digunakan untuk menentukan perataan item flex yang dimulai dari bagian awal container.
- flex-end: Digunakan untuk menentukan perataan item flex yang dibuat dibagian akhir dari container.
- center: Digunakan untuk menentukan perataan item flex pada bagian center dari container.
- space-between: Item flex ditempatkan dengan event spasi, dimana item didorong ke bagian awal dan bagian akhir.
- space-around: Item flex ditempatkan dengan spasi yang sama dari setiap bagian sudut.
- space-evenly: Item flex ditempatkan dengan spasi yang sama diantar keduanya, tetapi spasi bagian corner-nya berbeda.
- initial: Item ditempatkan sesuai dengan nilai default-nya.
- inherit: Item ditempatkan sesuai dengan nilai turunan yang didapatkan dari elemen parent.
Return Values: Berfungsi untuk mengembalikan sebuang string yang merepresentasikan properti justifyContent dari suatu elemen.
Contoh: Mendeskripsikan nilai properti space-between.
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style justifyContent
DOM pada HTML
</title>
<style>
#MKK1
{
width:500px;
display:flex;
height: 80px;
border:2px solid black;
background-color:white;
justify-content: space-around;
}
#MKK1 div
{
width: 60px;
height: 80px;
}
</style>
</head>
<body>
<center>
<h1
style = "color:green;width:40%;">
Blog Elfan
</h1>
<h2>
Properti Style justifyContent
DOM
</h2>
<div id = "MKK1">
<!-- src ="..." merupakan
pintasan dari URL gambar-->
<div>
<img
src ="..."
width = "60px"
height = "80px">
</div>
<div>
<img
src ="..."
width = "60px"
height = "80px">
</div>
<div>
<img
src ="..."
width = "60px"
height = "80px">
</div>
<div>
<img
src ="..."
width = "60px"
height = "80px">
</div>
</div>
<button
type = "button"
onclick = "bonns()">
Submit
</button>
<!-- Script untuk menggunakan
style -->
<script>
function bonns()
{
document.getElementById("MKK1").style.justifyContent=
"space-between";
}
</script>
</center>
</body>
</html>
Baca Juga:
Contoh: Mendeskripsikan nilai properti flex-start.
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style justifyContent
DOM
</title>
<style>
#LL2
{
width:500px;
display:flex;
height: 80px;
border:2px solid black;
background-color:white;
justify-content: space-around;
}
#LL2 div
{
width: 60px;
height: 80px;
}
</style>
</head>
<body>
<center>
<h1
style = "color:green;width:40%;">
Blog Elfan
</h1>
<h2>
Properti Style justifyContent
DOM
</h2>
<div id = "LL2">
<!-- src = "..." berisi URL
gambar-->
<div>
<img
src = "..."
width = "60px"
height = "80px">
</div>
<div>
<img
src = "..."
width = "60px"
height = "80px">
</div>
<div>
<img
src = "..."
width = "60px"
height = "80px">
</div>
<div>
<img
src = "..."
width = "60px"
height = "80px">
</div>
</div>
<button
type = "button"
onclick = "ll2s()">
Submit
</button>
<!-- Script untuk menggunakan
style -->
<script>
function ll2s()
{
document.getElementById("LL2").style.justifyContent=
"flex-start";
}
</script>
</center>
</body>
</html>
Mengatur posisi elemen dalam halaman web adalah salah satu hal yang sangat penting dalam desain antarmuka. Dalam HTML dan CSS, ada berbagai cara untuk mengatur posisi elemen agar tampak teratur dan sesuai dengan keinginan. Salah satu cara yang sering digunakan untuk mengatur posisi elemen dalam sebuah kontainer adalah dengan menggunakan properti style yang disebut justifyContent.
justifyContent adalah salah satu properti dari model kotak atau tata letak flexbox. Flexbox merupakan sebuah model tata letak dalam CSS yang memudahkan pengaturan posisi elemen dalam satu dimensi, baik itu secara horizontal maupun vertikal. Sebagai properti dalam flexbox, justifyContent digunakan untuk mengatur distribusi ruang kosong di antara elemen-elemen yang ada di dalam kontainer flex, baik secara horizontal (sepanjang sumbu utama) atau vertikal (sepanjang sumbu silang).
Salah satu alasan kenapa justifyContent menjadi pilihan utama dalam desain antarmuka adalah karena fleksibilitasnya. Dengan hanya menggunakan beberapa properti CSS, pengaturan posisi elemen bisa dilakukan dengan mudah dan cepat. Posisi elemen di dalam sebuah kontainer dapat disesuaikan dengan kebutuhan, tanpa harus menulis kode yang rumit. justifyContent bekerja dengan cara mendistribusikan ruang kosong di antara elemen-elemen yang ada di dalam kontainer tersebut.
Secara garis besar, justifyContent bekerja pada elemen yang memiliki sifat flex, yaitu elemen kontainer yang diberi nilai display flex atau inline-flex. Ketika sebuah kontainer diberikan tampilan flex, maka elemen-elemen di dalamnya akan mengikuti aturan flexbox, dan justifyContent akan mengatur distribusi ruang kosong di antara elemen-elemen tersebut.
Ada beberapa nilai yang dapat digunakan dengan justifyContent, yang masing-masing akan mengubah cara elemen-elemen di dalam kontainer ditempatkan. Nilai pertama yang dapat digunakan adalah flex-start. Dengan menggunakan nilai ini, elemen-elemen di dalam kontainer akan ditempatkan pada awal sumbu utama. Hal ini berarti bahwa elemen-elemen tersebut akan terletak di sisi kiri (jika menggunakan sumbu horizontal) atau di sisi atas (jika menggunakan sumbu vertikal) dari kontainer.
Selanjutnya, ada nilai center. Ketika menggunakan nilai ini, elemen-elemen di dalam kontainer akan diposisikan di tengah-tengah kontainer, baik secara horizontal maupun vertikal. Nilai center sangat berguna ketika ingin memastikan bahwa elemen-elemen di dalam kontainer memiliki jarak yang sama dari kedua sisi, sehingga elemen-elemen tersebut tampak simetris dan terpusat.
Nilai lain yang dapat digunakan adalah flex-end. Dengan menggunakan nilai flex-end, elemen-elemen di dalam kontainer akan ditempatkan pada akhir sumbu utama. Jika sumbu utama horizontal, maka elemen-elemen akan terletak di sisi kanan kontainer. Jika sumbu utama vertikal, maka elemen-elemen akan terletak di sisi bawah kontainer. Nilai ini berguna ketika ingin mengumpulkan elemen-elemen di ujung kontainer.
Terdapat pula nilai space-between, yang memungkinkan ruang kosong di antara elemen-elemen di dalam kontainer didistribusikan secara merata. Dengan menggunakan nilai ini, elemen-elemen pertama dan terakhir akan ditempatkan di sisi-sisi kontainer, sementara ruang kosong yang tersisa akan dibagi secara merata di antara elemen-elemen lainnya. Ini adalah nilai yang sering digunakan ketika ingin menempatkan elemen-elemen dengan jarak yang seragam, seperti dalam menu navigasi horizontal.
Nilai berikutnya adalah space-around, yang mirip dengan space-between, namun dengan perbedaan pada distribusi ruang kosong. Ketika menggunakan space-around, ruang kosong yang ada akan dibagi merata di sekitar setiap elemen, termasuk di sisi kiri dan kanan elemen pertama serta sisi atas dan bawah elemen terakhir. Dengan demikian, elemen-elemen akan mendapatkan jarak yang lebih seimbang dari satu sama lain, dengan ruang kosong yang cukup di kedua sisi.
Nilai terakhir yang dapat digunakan dengan justifyContent adalah space-evenly. Dengan menggunakan nilai ini, ruang kosong di antara elemen-elemen akan didistribusikan dengan cara yang sangat merata. Tidak hanya elemen-elemen akan memiliki jarak yang sama satu sama lain, tetapi ruang kosong yang ada di sisi-sisi kontainer juga akan memiliki ukuran yang sama. Nilai ini cocok digunakan ketika ingin memastikan bahwa elemen-elemen di dalam kontainer memiliki jarak yang konsisten, baik di antara elemen-elemen maupun di sepanjang batas kontainer itu sendiri.
Penting untuk diingat bahwa justifyContent hanya akan berpengaruh pada sumbu utama dari kontainer. Dalam model flexbox, sumbu utama adalah garis utama tempat elemen-elemen ditempatkan, yang secara default akan bersifat horizontal. Namun, sumbu utama dapat diubah menjadi vertikal dengan mengubah nilai properti flexDirection. Jika sumbu utama adalah horizontal, maka justifyContent akan mengatur posisi elemen-elemen secara horizontal, sedangkan jika sumbu utama adalah vertikal, maka justifyContent akan mengatur posisi elemen-elemen secara vertikal.
Meskipun justifyContent sangat berguna untuk mengatur posisi elemen di dalam kontainer, penggunaannya tidak selalu dibutuhkan. Terkadang, elemen-elemen dalam kontainer sudah cukup diatur dengan menggunakan properti lain seperti alignItems atau alignSelf. Namun, justifyContent tetap menjadi pilihan utama dalam situasi dimana pengaturan posisi elemen-elemen harus dilakukan dengan efisien dan mudah, tanpa melibatkan terlalu banyak properti atau aturan CSS tambahan.
Sebagai contoh, ketika membuat tampilan antarmuka yang responsif dan dinamis, justifyContent sangat membantu dalam mengatur posisi elemen-elemen agar tetap proporsional dan rapi, meskipun ukuran layar atau kontainer berubah. Ini sangat berguna dalam pengembangan aplikasi atau situs web yang memerlukan penyesuaian otomatis terhadap berbagai perangkat dan ukuran layar.
Secara keseluruhan, justifyContent adalah salah satu alat yang sangat berguna dalam pengembangan halaman web. Dengan menggunakan properti ini, elemen-elemen di dalam kontainer dapat ditempatkan dengan mudah dan efisien, baik itu untuk mendistribusikan ruang kosong di antara elemen-elemen, memusatkan elemen-elemen di tengah kontainer, atau mengatur posisi elemen-elemen di sisi-sisi kontainer. Properti ini memberi fleksibilitas dalam desain antarmuka, memungkinkan pengaturan elemen yang lebih presisi dan konsisten.
Dengan menggunakan justifyContent, desainer dan pengembang web dapat menciptakan pengalaman pengguna yang lebih baik. Kontainer yang diatur dengan rapi, baik secara horizontal maupun vertikal, meningkatkan keterbacaan dan kegunaan sebuah halaman web. Sebagai contoh, tampilan elemen yang teratur tidak hanya memberikan estetika yang menyenangkan, tetapi juga membantu pengguna untuk lebih mudah berinteraksi dengan elemen-elemen tersebut.
Salah satu keuntungan besar menggunakan justifyContent dalam desain adalah kemampuannya untuk menangani distribusi ruang kosong dengan cara yang sederhana namun efektif. Ketika ruang kosong didistribusikan dengan baik, elemen-elemen tidak akan saling berdesakan atau tumpang tindih, sehingga halaman akan terlihat lebih rapi. Hal ini sangat penting, terutama ketika bekerja dengan konten yang memiliki ukuran atau bentuk yang berbeda-beda, karena properti ini memastikan bahwa jarak antar elemen tetap terjaga meskipun ukuran elemen berubah.
Dengan fleksibilitas yang ditawarkan oleh justifyContent, desain responsif menjadi lebih mudah untuk diterapkan. Desain responsif adalah suatu pendekatan yang memungkinkan tampilan web untuk beradaptasi dengan baik pada berbagai ukuran layar, mulai dari perangkat seluler hingga desktop. Ketika halaman web diakses melalui perangkat yang lebih kecil, elemen-elemen di dalam kontainer dapat disusun ulang dengan menggunakan justifyContent, sehingga tampilan web tetap teratur tanpa harus menulis kode yang rumit atau banyak aturan CSS tambahan.
Ketika bekerja dengan halaman yang memiliki banyak elemen, justifyContent dapat membantu untuk mengelompokkan elemen-elemen yang memiliki kesamaan atau tujuan yang sama. Sebagai contoh, dalam sebuah menu navigasi, elemen-elemen yang mewakili bagian-bagian dari situs web dapat disusun dengan menggunakan nilai space-between, yang memungkinkan setiap item menu memiliki jarak yang konsisten dan seimbang di sepanjang kontainer. Ini memberikan tampilan yang bersih dan mudah dipahami oleh pengguna, sehingga dapat dengan mudah menavigasi situs web.
Keuntungan lain dari menggunakan justifyContent adalah kemudahan dalam mengubah posisi elemen-elemen tanpa harus mengubah struktur HTML atau menggunakan elemen tambahan. Dengan hanya mengubah nilai dari properti justifyContent, posisi elemen-elemen dapat diubah dengan cepat dan mudah. Ini sangat bermanfaat saat menginginkan variasi desain yang fleksibel, baik itu dalam berbagai perangkat atau tampilan yang berbeda. Pengaturan posisi yang efisien seperti ini memudahkan pengembang untuk menciptakan desain yang konsisten tanpa harus menulis kode yang berulang-ulang atau kompleks.
Tidak hanya itu, justifyContent juga memungkinkan kontrol yang lebih besar terhadap elemen-elemen di dalam kontainer ketika bekerja dengan animasi atau transisi. Dalam beberapa kasus, transisi antar elemen yang teratur dapat menciptakan pengalaman pengguna yang lebih lancar dan dinamis. Misalnya, saat elemen-elemen berpindah posisi atau ukuran secara halus, dengan justifyContent yang teratur, perpindahan elemen-elemen tersebut akan terlihat lebih mulus dan tidak mengganggu struktur keseluruhan halaman.
Penggunaan justifyContent juga dapat diterapkan dalam berbagai konteks desain web. Dalam pembuatan antarmuka aplikasi, misalnya, elemen-elemen kontrol seperti tombol atau form input dapat ditempatkan dengan sangat rapi menggunakan justifyContent. Elemen-elemen seperti ini, jika dibiarkan tidak teratur, bisa membuat tampilan aplikasi terasa kacau dan sulit digunakan. Oleh karena itu, pengaturan posisi yang tepat dengan menggunakan justifyContent akan membantu meningkatkan pengalaman pengguna dan memastikan bahwa interaksi dengan aplikasi atau situs web berjalan dengan baik.
Dalam beberapa kasus, kontainer dengan justifyContent juga dapat digunakan untuk menciptakan efek visual tertentu. Sebagai contoh, dengan memanfaatkan nilai space-evenly, elemen-elemen dalam kontainer dapat ditempatkan dengan jarak yang seragam, menciptakan tampilan yang simetris dan seimbang. Efek visual seperti ini bisa digunakan untuk menonjolkan elemen-elemen penting, seperti tombol aksi atau pilihan menu utama. Dengan menambahkan nilai justifyContent yang sesuai, kontainer dapat menciptakan ruang visual yang lebih terbuka dan menyenangkan bagi mata.
Secara keseluruhan, justifyContent adalah alat yang sangat berguna dalam pengembangan desain web yang efisien dan fungsional. Properti ini menawarkan kemudahan dalam pengaturan posisi elemen-elemen dalam sebuah kontainer, serta memberikan fleksibilitas dalam menciptakan tampilan yang dinamis dan responsif. Keberadaan justifyContent memberikan pengembang kemampuan untuk menciptakan desain yang tidak hanya estetis, tetapi juga intuitif dan mudah digunakan. Dengan memanfaatkan semua potensi yang ditawarkan oleh properti ini, desain antarmuka dapat dibuat lebih rapi, terorganisir, dan siap untuk menghadapi tantangan penggunaan di berbagai perangkat dan ukuran layar.
Referensi Tambahan:
- 4 Value Properti listStyleImage Style DOM pada HTML
- 4 Value Properti listStylePosition Style DOM pada HTML
- 5 Value Properti listStyleType DOM pada HTML
- 5 Value Properti Margin Style DOM pada HTML
- 5 Contoh Properti marginBottom Style DOM pada HTML
- 5 Value Properti marginLeft Style DOM pada HTML
- 5 Value Properti marginRight Style DOM pada HTML
Artikel ini akan dibaca oleh: Annisathina Hermy Utami, Anugrahaning Dyah Safitri, Aqza Pradipta, Ar Hinza Ramadhani Putra Purwoko, dan Ardiana Aulia Secha Anisya.
5 komentar untuk "Mengatur Posisi HTML Menggunakan justifyContent Style DOM"
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 -
Jenis browser apa saja yang dapat digunakan oleh para pengembang untuk mengaktifkan properti justifyContent Style DOM pada elemen HTML?
BalasHapusBerikut ini adalah beberapa jenis browser yang biasa digunakan oleh para pengembang untuk mengaktifkan properti justifyContent Style DOM pada elemen HTML:
Hapus1. Google Chrome
2. Internet Explorer 12.0
3. Firefox
4. Opera
Apa yang dimaksud dengan properti justifyContent Style DOM pada HTML?
BalasHapusProperti justifyContent Style DOM pada HTMl merpuakan properti yang digunakan untuk menyelaraskan items container fleksibel ketika items tersebut tidak menggunakan semua ruang yang tersedia pada sumbu utama atau pada main-axis secara horizontal.
HapusProperti justifyContent Style DOM pada HTMl merpuakan properti yang digunakan untuk mendapatkan dan menetapkan cara menyelaraskan item container fleksibel ketika item tersebut menggunakan semua ruang yang tersedia secara horizontal.
Hapus