Diskusi Rizki Hibatuloh

Rizki Hibatuloh
Ditanyakan pada: Mengatur Urutan Element Dengan Flex Direction

Jenis-jenis flex-direction

maaf kak mau bertanya. di dalam flex-direction kan ada beberapa jenisnya ya seperti tadi ada coloumn,row,dll. Nah kan ada inherit dan initial,setelah saya coba kok sama saja hasilnya ya kak. Perbedaannya apa ya kak? terimakasih sebelumnya.

3 Jawaban

Bantu Jawab
Avatar
Muhammad Fakhry Burhanuddin

2 bulan yang lalu

Kalau "inherit" element akan mewarisi nilai dari parent, sedangkan "initial" element akan mempunyai nilai awal atau default.

Untuk prakteknya bisa lihat codepen berikut: https://codepen.io/Muhammad-Fakhry-Burhanuddin/pen/OJrzGOp

Referensi:

  1. https://www.w3schools.com/cssref/css_inherit.php
  2. https://www.w3schools.com/cssref/css_initial.php
  3. https://www.digitalocean.com/community/tutorials/css-inherit-initial-unset
  4. https://developer.mozilla.org/en-US/docs/Web/CSS/initial_value
  5. https://developer.mozilla.org/en-US/docs/Web/CSS/inherit
Rizki Hibatuloh

okee kak bisa di pahami,terimakasih kak untuk infonya

Avatar
BroKoding

2 bulan yang lalu

Halo kak, flex-direction adalah properti css yang digunakan untuk mengontrol arah penempatan elemen fleksibel (flex items) dalam sebuah kontainer fleksibel (flex container). Properti ini mempengaruhi tata letak elemen-elemen dalam kontainer fleksibel, terutama dalam hal orientasi dan urutan tampilan elemen.

Berikut adalah opsi nilai untuk properti flex-direction:

  1. row: Sebagai nilai default. Elemen-elemen fleksibel ditempatkan dari kiri ke kanan dalam baris.
  2. row-reverse: Elemen-elemen fleksibel ditempatkan dari kanan ke kiri dalam baris.
  3. column: Elemen-elemen fleksibel ditempatkan dari atas ke bawah dalam kolom.
  4. column-reverse: Elemen-elemen fleksibel ditempatkan dari bawah ke atas dalam kolom.
Avatar
Agustinus Pardamean Lumban Tobing

2 bulan yang lalu

Tentu, saya akan menjelaskannya dengan mudah dipahami:

  1. inherit: Nilai ini mengambil nilai dari "flex-direction" dari elemen induk (parent) yang mengatur elemen tersebut. Dengan kata lain, elemen tersebut akan mengikuti arah flex dari elemen di atasnya dalam hierarki.

  2. initial: Nilai ini mengatur "flex-direction" ke nilai awal (default) yang telah ditentukan oleh browser. Ini berarti elemen tersebut akan memiliki arah flex yang biasanya adalah "row" (horizontal), tetapi ini dapat bervariasi tergantung pada browser.

Perbedaan utama antara keduanya adalah sumber nilai yang digunakan:

  • inherit mengambil nilai dari elemen induk (parent), sehingga akan mengikuti arah flex dari elemen di atasnya dalam hierarki.
  • initial mengatur ke nilai default yang ditentukan oleh browser, tidak memperhitungkan nilai dari elemen induk.

Jadi, jika Anda ingin mengendalikan arah flex secara langsung, Anda dapat mengatur nilai row, column, atau nilai lainnya yang sesuai dengan kebutuhan Anda. Jika Anda menggunakan inherit, itu akan mengikuti nilai dari elemen yang menjadi induknya, sementara initial akan mengatur ke nilai default yang ditetapkan oleh browser.