perbedaan antara align-item dan align-content

plss jawab sama contohnya juga terus penjelasannya
saya masih bingung kalau align-item sama align-content kan seperti sama aja
terus perbedaan nya apa
avatar GHAZTHISKC119

Ditanyakan oleh @GHAZTHISKC119

5 Kontribusi 0 Poin

Login untuk menanggapi


Jawaban

Langsung aja saya kasih linknya gan.
https://www.w3schools.com/cssref/css3_pr_align-content.asp
https://www.w3schools.com/cssref/css3_pr_align-items.asp
Pada dasarnya memang mirip dan mungkin hasilnya bakal sama untuk banyak kasus. Agak susah jelasinnya, mending langsung lihat contoh penggunaannya di link di atas.
avatar ChronoJava

Dijawab oleh @ChronoJava

40 Kontribusi 21 Poin

Login untuk menanggapi


Ada 6 property yang hampir mirip. justify-items, justify-content, justify-self, align-items, align-content, align-self.

Aku sendiri memahami property tersebut sebagai berikut.

1. Semua justify mengatur element secara horizontal (atas-bawah).

2. Semua align mengatur element secara vertikal (kanan-kiri).

3. Semua -content mengatur hubungan child element dengan child element lainya yang berada dalam jangkauan flex. Contoh dalam satu div dengan flex ada 3 div, maka kita mengatur hubungan antar 3 div itu dengan properti ini.

4. Semua -items mengatur hubungan seluruh child element dengan parent elementnya. Contoh, dalam satu div dengan flex ada 3 div, maka dengan properti ini kita mengatur hubungan antar 3 div tersebut dengan div yang punya flex.

5. Semua items mengatur hubungan salah satu child element dengan parent elementnya. Contoh dalam satu div dengan flex ada 3 div, maka dengan properti ini kita bisa mengatur hubungan antar salah satu dari 3 div itu dengan parent elementnya.

Dengan pemahaman ini,

justify-content berarti kita mengatur secara horizontal hubungan antar child element dalam flex. Contoh,
+
+
+
Dengan ini kita bisa mengatur apakah 3 + tersebut berjarak, berdempetan di tengah atau di bawah atau di atas.

justify-items berarti kita mengatur secara horizontal hubungan child element dengan child element dengan parent element.
+++
Dengan ini kita bisa mengatur apakah 3 + itu berada di tengah parent, di atas, bawah atau di mana.

align-content berarti kita mengatur secara vertikal apakah hubungan antar child element.
+   +   +
Dengan ini kita bisa mengatur apakah 3 + tersebut berjarak, berdempetan di tengah, bawah atau atas.

align-items berarti kita mengatur secara vertikal hubungan antar child element dengan parent element.
   +
   +
   +
Dengan ini kita bisa mengatur apakah 3 + tersebut berada di tengah parent, kanan, atau kiri.
avatar fahmiburhan

Dijawab oleh @fahmiburhan

1 Kontribusi 1 Poin

  • itu gak terbalik bro @fahmiburhan yang justify sama yang align soalnya waktu saya coba justify itu kiri kanan dan align itu atas bawah - @GHAZTHISKC119

Login untuk menanggapi


Login untuk gabung berdiskusi