Mengembangkan Tata Letak Responsif dengan Flexbox di CSS & HTML (Tutorial)

Inilah yang akan kamu temui dalam kursus Flexbox di CSS dan HTML.

Apa itu tata letak Flexbox dan mengapa sebaiknya kita menggunakannya?

Di sini proyek akan dimulai, di mana kemudian akan dilakukan pekerjaan lebih lanjut.

Saya akan memperkenalkan struktur contoh dan kemampuan debugging yang terintegrasi di VS-Code dengan alat MS Edge. Selain itu, dalam video ini, untuk pertama kalinya, tata letak Flexbox diaktifkan dan arahnya diatur.

Bagaimana cara membagi ruang secara merata atau dalam proporsi tertentu dalam tata letak Flexbox?

Sebuah latihan kecil di mana tidak mungkin untuk menghindari sedikit matematika (sederhana).

Saya memperkenalkan tata letak horizontal dengan dua sisi bar, yang responsif dan menyesuaikan dengan lebar.

Elemen anak dapat diatur oleh kontainer flex sepanjang sumbu lintang. Di sini saya akan menunjukkan cara mengaturnya.

Tidak hanya pada kontainer, kita juga bisa mengatur penataan semua elemen anak, dengan align-self kita juga dapat menyesuaikannya secara berbeda pada elemen-elemen individu.

Latihan kecil tentang penataan individual dengan sebuah dadu.

Tidak hanya sepanjang sumbu cross dapat diatur dalam sebuah Flex-Container, tetapi juga banyak yang dapat diatur sepanjang sumbu utama dalam penataan. ;-)

Sebuah contoh kecil bagaimana cara menggunakan penjajaran sepanjang sumbu utama dengan sangat baik untuk tata letak umum.

Siapa yang ingin fleksibel, juga harus bisa menentukan ukuran elemen anak secara independen dari lebar atau tinggi konkret. Untungnya, ada properti flex-basis- yang memungkinkan hal tersebut. Saat Anda mengubah flex-direction, lebar bisa menjadi tinggi dan sebaliknya. 

Dalam seberapa banyak sebuah elemen akan tumbuh ketika ada lebih banyak ruang daripada yang ditentukan oleh flex-basis? Ini bisa diatur secara spesifik dengan flex-grow.

Seberapa banyak sebuah elemen harus menyusut ketika ruang yang tersedia kurang dari yang ditentukan oleh flex-basis? Ini dapat disesuaikan secara spesifik dengan flex-shrink. 

Elemen anak dapat mengecil tidak hanya ketika ruangnya berkurang, tetapi juga dapat dipatahkan oleh kontainer. Cara mengontrol hal ini dengan flex-wrap, saya tunjukkan dalam video ini.

flex-direction dan flex-wrap bisa digabungkan dalam properti flex-flow. Hal ini bahkan masuk akal jika hanya ingin mengatur flex-direction, karena flex-flow lebih pendek. ;-)

Sebuah tugas tentang flex-wrap.

Jarak harus kadang-kadang ada, agar tidak membuat mata manusia tidak nyaman. Untungnya, ada properti CSS gap yang dapat melakukan hal ini dengan sempurna pada elemen-elemen anak dari sebuah Flex-Container.

Tata letak harus diatur, terutama pada antarmuka web, karena harus mudah digunakan. Kadang-kadang urutan juga harus ditetapkan secara individual, tanpa memindahkan elemen dalam DOM. Untuk itu, properti CSS order sangat cocok, yang memungkinkan pengguna untuk dengan mudah mengubah urutan tampilan elemen.

Mari kita lihat apakah kalian telah memahami urutan ini. Di sini bahkan ada kesempatan kedua untuk mencapai hasil yang sama, tapi kalian pasti juga akan menyadari hal tersebut.

Sangat sering terjadi bahwa seseorang ingin mencentangkan elemen dan terutama teks secara horizontal dan vertikal (!). Apa yang dulu sulit sebelum menggunakan Flexbox, sekarang menjadi sangat mudah.

Siapa yang tidak kenal, 3-colom? Jika ini masih disesuaikan dengan ruang yang tersedia, tidak banyak lagi yang kurang untuk desain responsif.

Apakah ada situs web tanpa formulir? Jika iya, maka tidak banyak. Itu sebabnya sangat penting untuk menyusunnya dengan menarik, yang untungnya tidak masalah dengan Flexbox.

Sangat sering kita harus berurusan dengan tata letak bertingkat, tetapi dengan Flex Layout, bahkan hal-hal seperti itu bukan lagi tantangan besar.

Saat ini, ada klien obrolan web seperti pasir di pantai dan dengan chatbot KI, lebih banyak lagi telah ditambahkan. Namun, bagaimana cara mewujudkan obrolan dengan Flexbox? Itu yang akan saya tunjukkan dalam video ini.

Sekarang ini, sejak era Web 2.0, hampir setiap situs web memiliki galeri. Dalam video ini, saya akan menjelaskan bagaimana tata letak seperti itu dapat diimplementasikan dengan sangat baik menggunakan Flexbox.

Sekarang seharusnya semuanya jelas tentang Tata Letak Flex. Terakhir, saya akan menjelaskan apa yang seharusnya Anda pelajari, apa yang masih bisa Anda lakukan, dan apa saja pilihan Tata Letak CSS yang bagus.