Fronted CSS from Website Development Path MySkill.id
Display Property
Sumber gambar: https://web.dev/learn/css/layout/
Display property melakukan dua hal, yaitu menentukan apakah model box diterapkan untuk bertindak sebagai inline atau block.
Inline
Elemen inline berperilaku seperti kata-kata dalam sebuah kalimat. Elemen inline duduk bersebelahan dengan arah yang sejajar. Elemen seperti <span> dan <strong> biasanya digunakan untuk menata potongan teks di dalam elemen yang mengandung seperti <p> atau paragraf yang default-nya sebaris. Elemen inline membiarkan whitespace yang ada di sekitarnya.
Kita tidak bisa secara langsung menentukan dimensi lebar dan tinggi untuk elemen inline, tetapi elemen tersebut akan mengabaikan setiap margin dan padding pada tingkat block yang ada di sekitarnya.
Block
Elemen block tidak duduk berdampingan. Mereka membentuk sebuah garis baru khusus untuk diri mereka sendiri. Kecuali diubah kode CSS lainnya.
Elemen block akan mengisi ruang sesuai dimensi sebaris. Sehingga mencakup lebar penuh horizontal. Pada semua sisi elemen block akan diterapkan margin.
Flex
Property display juga menentukan bagaimana child element harus berperilaku. Contohnya, saat kita mengatur properti tampilan menjadi display: flex, ini juga mengubah turunannya menjadi item yang dapat diatur secara fleksibel. Hal ini memungkinkan penggunaan properti flex untuk mengendalikan penyelarasan, pengaturan, dan aliran konten.
Flexbox and Grid
Flexbox
lexbox adalah sistem pengaturan tata letak untuk mengatur elemen-elemen dalam satu dimensi. Tata letak ini dapat mengatur elemen-elemen sepanjang satu sumbu, baik secara horizontal atau vertikal. Secara default, flexbox akan menyelaraskan child element di samping satu sama lain, dalam arah online, dan meregangkannya ke arah block. Sehingga semuanya memiliki ketinggian yang sama.
Pada gambar di atas, item akan tetap pada sumbu yang sama dan tidak terbungkus ketika kehabisan ruang. Sebaliknya, mereka akan berusaha untuk berada dalam satu baris yang sama satu sama lain. Perilaku ini dapat dimodifikasi menggunakan properti align-items, justify-content, dan flex-wrap.
Grid
Grid hampir mirip dengan flexbox, tetapi dirancang untuk mengontrol tata letak multi-sumbu alih-alih tata letak sumbu tunggal (ruang vertikal atau horizontal).
Grid memungkinkan kita untuk menulis rules tata letak pada elemen yang memiliki display: grid dan memperkenalkan beberapa cara baru untuk penataan gaya tata letak (layout style), seperti fungsi repeat() dan minmax().
Satu unit yang berguna adalah unit fr yang menggunakan ruang yang tersisa. Kita dapat membuat 12 kolom dengan celah di antara setiap item, dengan 3 properti CSS.
Properti grid-row dan grid-column memberikan instruksi pada elemen pertama dalam grid untuk menempati mulai dari kolom pertama hingga kolom keempat, serta dari baris pertama hingga baris ketiga.
Flow Layout
Inline Block
Menggunakan inline-block memberikan kita kotak yang memiliki beberapa sifat mirip dengan elemen level block, tetapi tetap sejajar dengan teks.
Floats
Properti float menginstruksikan elemen untuk “floating” ke arah yang ditentukan. Pada gambar di atas, terdapat sebuah foto yang diinstruksikan untuk melayang ke kiri. Kemudian masih memungkinkan sibling element-nya untuk membungkus atau wrap di sekitarnya. Kita dapat juga menginstruksikan elemen untuk float ke kiri, kanan, atau inherit.
Multicolumn Layout
Apabila kita memiliki daftar elemen yang sangat panjang, seperti daftar semua negara di dunia, pasti akan mengakibatkan banyak scroll. Hal ini akan membuat space berlebihan pada halaman. Kita juga bisa mengarahkan elemen untuk float ke sisi kiri, kanan, atau mengikuti sifat inherit.
Learn more via: https://myskill.id/course/css-layout
