NEW
Font size
WorksheetsTailwindCSS Flexbox dan Grid dengan Pert-5
Total questions: 20
Worksheet time: 10mins
Apa itu Flexbox?
Flexbox adalah model tata letak dalam HTML
Flexbox digunakan untuk membuat animasi CSS
Flexbox adalah model tata letak dalam CSS yang memungkinkan Anda untuk merancang tata letak kompleks dengan lebih mudah dengan memberikan cara yang lebih efisien untuk menyusun dan mendistribusikan ruang di antara item-item dalam sebuah kontainer, bahkan ketika ukurannya tidak diketahui atau dinamis.
Flexbox hanya berfungsi pada browser tertentu
Apa fungsi utama dari Flexbox?
Menyusun item dalam kontainer dan menyesuaikan ukuran serta posisi item.
Mengatur warna latar belakang elemen
Membuat animasi pada elemen
Menyusun elemen dalam bentuk tabel
Apa yang dimaksud dengan container dalam Flexbox?
Container dalam Flexbox adalah elemen yang berperan sebagai wadah utama untuk mengatur tata letak dari elemen-elemen anak di dalamnya.
Container dalam Flexbox adalah elemen yang berperan sebagai kendaraan
Container dalam Flexbox adalah elemen yang berperan sebagai alat musik
Container dalam Flexbox adalah elemen yang berperan sebagai tempat sampah
Apa yang dimaksud dengan item dalam Flexbox?
Item dalam Flexbox adalah elemen yang diatur menggunakan properti justify-content: center.
Item dalam Flexbox adalah elemen yang diatur menggunakan properti align-items: flex-start.
Item dalam Flexbox adalah elemen yang diatur menggunakan properti display: grid.
Item dalam Flexbox adalah setiap elemen anak dari container Flexbox yang diatur menggunakan properti display: flex.
Apa saja properti dasar dalam Flexbox?
align-content
flex-grow
display, flex-direction, justify-content, align-items, flex-wrap
display-flex
Bagaimana cara membuat item menjadi fleksibel dalam Flexbox?
Dengan menambahkan properti 'rigid' pada item tersebut
Dengan menetapkan nilai 'flex' pada item tersebut, seperti 'flex: 1;' untuk memberikan fleksibilitas yang merata.
Dengan memberikan nilai 'static' pada item tersebut
Dengan mengatur item sebagai 'fixed' dalam Flexbox
Apa itu Grid Layout?
Grid Layout adalah sistem tata letak dalam CSS yang memungkinkan pengembang untuk mendesain halaman web dalam format grid, sehingga lebih mudah membuat tata letak yang kompleks.
Grid Layout adalah teknik desain grafis yang hanya digunakan dalam pengembangan aplikasi mobile.
Grid Layout adalah sistem tata letak dalam HTML yang memungkinkan pengembang untuk membuat animasi halaman web.
Grid Layout adalah metode pengaturan elemen dalam CSS yang tidak memungkinkan pengembang untuk membuat tata letak yang kompleks.
Apa keuntungan menggunakan Grid Layout?
Grid Layout memungkinkan pembuatan tata letak website yang responsif dan kompleks dengan mudah.
Grid Layout tidak mendukung responsifitas pada website
Grid Layout sulit untuk dipelajari dan digunakan
Grid Layout hanya cocok untuk tampilan desktop
Apa yang dimaksud dengan grid container?
Grid container adalah elemen yang hanya dapat memiliki satu child element.
Grid container adalah elemen yang tidak dapat diatur menggunakan CSS Grid Layout.
Grid container adalah elemen yang tidak mendukung responsif layout.
Grid container adalah elemen yang memiliki child elements yang akan diatur menggunakan CSS Grid Layout.
Apa yang dimaksud dengan grid item?
Grid item adalah bagian dari flexbox container.
Grid item adalah bagian dari suatu grid container yang ditempatkan di dalam grid area.
Grid item adalah area kosong di dalam grid container.
Grid item adalah elemen luar grid container.
Bagaimana cara membuat grid container dalam CSS?
display: grid;
grid-template: columns;
grid: display;
display: flex;
Bagaimana cara menentukan grid item pada grid container?
Dengan mengatur posisi elemen secara acak pada grid container.
Dengan menggunakan properti grid-area pada setiap elemen grid item.
Dengan menggunakan properti grid-column dan grid-row pada setiap elemen grid item.
Dengan menambahkan properti grid-item pada setiap elemen grid container.
Apa itu grid template columns?
Grid template columns adalah elemen HTML yang digunakan untuk membuat tabel.
Grid template columns adalah properti CSS yang mengatur warna latar belakang grid.
Grid template columns adalah fungsi JavaScript untuk mengatur tata letak halaman web.
Grid template columns adalah properti CSS yang mendefinisikan jumlah dan ukuran kolom dalam tata letak grid.
Apa itu grid template rows?
Grid template rows adalah elemen HTML yang digunakan untuk membuat tabel grid.
Grid template rows adalah properti CSS yang mendefinisikan ukuran baris dalam tata letak grid.
Grid template rows adalah properti CSS yang mengatur warna latar belakang grid.
Grid template rows adalah fungsi JavaScript untuk mengatur tata letak grid.
Bagaimana cara membuat grid area pada Grid Layout?
Menggunakan properti grid-area di CSS
Menggunakan properti area-grid di CSS
Menggunakan tag
Menggunakan fungsi createGridArea() di JavaScript
Apa fungsi dari properti justify-content dalam Flexbox?
Menentukan posisi vertikal dari elemen dalam container Flexbox.
Menentukan posisi horizontal dari elemen dalam container Flexbox.
Menentukan jarak antara elemen-elemen dalam container Flexbox.
Menentukan penempatan elemen-elemen dalam container Flexbox sehubungan dengan sumbu utama.
Apa itu flex-wrap dalam Flexbox?
Flex-wrap adalah properti CSS yang mengatur pembungkusan elemen dalam container Flexbox.
Flex-wrap adalah properti CSS yang mengatur warna latar belakang elemen Flexbox.
Flex-wrap adalah fungsi JavaScript untuk mengatur tata letak elemen dalam Flexbox.
Flex-wrap adalah properti CSS yang mengatur penempatan elemen-elemen dalam container Flexbox.
Apa fungsi dari properti align-items dalam Flexbox?
Menentukan posisi vertikal dari elemen dalam container Flexbox.
Menentukan posisi horizontal dari elemen dalam container Flexbox.
Menentukan jarak antara elemen-elemen dalam container Flexbox.
Menentukan penempatan elemen-elemen dalam container Flexbox sehubungan dengan sumbu silang.
Apa keuntungan menggunakan Flexbox dalam desain web?
Memungkinkan pembuatan tata letak yang responsif dengan mudah.
Tidak mendukung responsifitas pada tata letak web.
Sulit untuk dipelajari dan digunakan.
Hanya cocok untuk tampilan mobile.
Bagaimana cara membuat item menjadi fleksibel dalam Flexbox?
Dengan menambahkan properti 'rigid' pada item tersebut
Dengan menetapkan nilai 'flex' pada item tersebut, seperti 'flex: 1;' untuk memberikan fleksibilitas yang merata.
Dengan memberikan nilai 'static' pada item tersebut
Dengan mengatur item sebagai 'fixed' dalam Flexbox
