Pada tutorial ini, Anda akan belajar bagaimana membangun struktur contoh untuk proyek web Anda dengan menggunakan layout Flexbox dalam CSS dan HTML. Kami akan membahas alat Debugging bawaan dari Visual Studio Code yang berhubungan dengan Microsoft Edge, dan mengambil langkah-langkah pertama untuk mengaktifkan layout Flexbox. Flexbox adalah sistem tata letak yang kuat yang membantu Anda membuat tata letak kompleks dengan susunan elemen yang fleksibel dengan usaha minimal.
Hasil Utama
- Dengan Flexbox, Anda dapat menyusun elemen secara horizontal dan vertikal.
- Alat Pengembang Microsoft Edge dapat diintegrasikan langsung ke dalam Visual Studio Code.
- Flex-Direction memengaruhi penataan elemen Flex.
Panduan Langkah demi Langkah
Pertama-tama, Anda akan menginstal alat Microsoft Edge Tools di Visual Studio Code. Cari "Microsoft Edge Tools for VS Code" di Ekstensi dan instal.
Setelah ekstensi terinstal, Anda harus pergi ke opsi Debugging. Klik "Run and Debug," lalu "create a launch.json file." Hal ini akan membantu Anda mengkonfigurasi setelan Anda.
Pada file konfigurasi yang baru dibuat ini, tambahkan konfigurasi baru untuk "Microsoft Edge Tools." Pastikan untuk menetapkan alamat lokal sebagai localhost:3000, karena kami menjalankan server pada port ini dari Terminal.
Sekarang saatnya untuk memulai proyek Anda. Pindah ke subdirektori yang benar dan jalankan perintah npm run dev. Kemudian buka localhost:3000 di browser Anda.
Setelah halaman dimuat, Anda dapat mengaktifkan Alat Pengembang Microsoft Edge dengan mengklik tombol yang sesuai di Visual Studio Code. Ini akan membuka Alat Pengembang langsung di sebelah editor Anda.
Sekarang Anda dapat melihat struktur aplikasi Anda. Kami memiliki kontainer (div) yang membawa kelas "Flex Container." Di dalam kontainer ini, terdapat empat elemen DIV, masing-masing memiliki kelas "Flex Child" dan mewakili konten teks 1, 2, 3, dan 4.
Kontainer Flex saat ini hanya didefinisikan dengan lebar 400 piksel dan tinggi 200 piksel, sedangkan Anak Flex didefinisikan dengan lebar 100 piksel dan tinggi 50 piksel. Meskipun saat ini tidak ada yang diatur dengan Flexbox, tetapi mereka ditampilkan dalam daftar vertikal.
Untuk menggunakan Flexbox, Anda perlu menambahkan atribut CSS display: flex; untuk Kontainer Flex dan menyimpannya. Dengan ini, Anda akan melihat pengaturan Anak secara otomatis berubah dan sekarang mereka ditampilkan secara berdampingan.
Jika Anda ingin menyusun kembali Anak Flex secara vertikal, Anda dapat menggunakan properti flex-direction. Atur flex-direction: column; untuk Kontainer Flex agar Anak Flex diatur kembali secara vertikal.
Anda akan melihat bahwa Anak Flex kini diatur kembali secara vertikal. Jika Anda menyesuaikan tinggi dan lebar, mereka akan terlihat seolah-olah terintegrasi dalam satu blok, meskipun tampilannya bukanlah sebuah blok tetapi menggunakan mode Flex.
Itulah tinjauan dasar tentang layout Flexbox. Kami telah membahas properti penting dan melihat dampaknya dalam video. Di tutorial mendatang, kami akan menjelajahi lebih lanjut fitur-fitur dari Flexbox dan apa yang dapat Anda lakukan dengan sistem layout yang kuat ini.
Ringkasan
Pada tutorial ini, Anda telah mempelajari bagaimana membangun struktur sederhana dengan Flexbox dalam CSS. Anda telah mengintegrasikan Alat Pengembang Microsoft Edge di dalam Visual Studio Code dan melakukan langkah-langkah awal untuk mengaktifkan layout Flex. Masih banyak kemungkinan yang ada di depan Anda, yang akan kita tinjau lebih lanjut dalam video berikutnya.
Pertanyaan Umum
Bagaimana cara mengaktifkan Flexbox dalam CSS?Anda dapat mengaktifkan Flexbox dengan mengatur display: flex; untuk kontainer.
Apa itu flex-direction?flex-direction menentukan penataan Anak Flex, baik secara horizontal (row) maupun vertikal (column).
Bagaimana cara mengintegrasikan Alat Pengembang Microsoft Edge di dalam Visual Studio Code?Cukup cari "Microsoft Edge Tools for VS Code" di Bilah Ekstensi dan instal.
