Template Wordpress

Tutorial CSS Flexbox untuk Pemula (Dengan Contoh Interaktif)

Dalam contoh ini, satu-satunya CSS terkait flexbox yang diterapkan adalah display: flex. Ruang yang Anda lihat di antara item flex adalah margin kecil yang telah saya tambahkan untuk kejelasan. Nanti, saya akan membahas berbagai cara untuk melakukan space flex item menggunakan fitur flexbox.

Apa yang Anda lihat terjadi saat Anda mengaktifkan dan menonaktifkan wadah fleksibel? Pertama, penting untuk diperhatikan bahwa semua elemen, termasuk container dan turunannya, adalah

elemen. Ini berarti semuanya adalah elemen level blok secara default. Dalam tutorial CSS flexbox ini, saya terutama akan membahas perilaku properti flexbox pada elemen level blok, karena itulah kasus penggunaan yang paling umum.

Secara default, elemen blok ditempatkan di bawah konten sebelumnya, jadi item ditumpuk secara vertikal. Saat display: flex diaktifkan, namun, elemen-elemennya sejajar secara horizontal sambil tetap mempertahankan dimensi dan margin yang ditentukan.

Memahami wadah fleksibel

Seperti yang ditunjukkan demo awal, container flex secara default akan menampilkan turunan flexnya secara horizontal. Inilah yang disebut sebagai file sumbu utama dari wadah fleksibel. Nanti, saya akan menunjukkan cara menampilkan elemen secara vertikal dalam wadah fleksibel. Dalam hal ini, item akan diletakkan di atas apa yang disebut sebagai file sumbu silang.

Diagram berikut menunjukkan dua sumbu ini:

Seperti yang ditunjukkan, sumbu silang mengalir tegak lurus dengan sumbu utama. Dan penting untuk dicatat bahwa meskipun blok non-fleksibel diletakkan secara visual dalam arah yang sama dengan sumbu silang, secara teknis hal itu tidak memenuhi syarat sebagai sumbu silang flexbox hingga penampung disetel ke display: flex.

Properti Flexbox untuk wadah

Dalam tutorial CSS flexbox ini, pertama, saya akan membahas properti berbeda yang dapat Anda terapkan ke wadah fleksibel. Nanti, saya akan menunjukkan kepada Anda bagaimana menargetkan item flex.

Dengan membagi tutorial CSS flexbox ini dengan cara ini, Anda akan dapat dengan mudah mereferensikan fitur yang berbeda tergantung pada apakah Anda ingin melakukan sesuatu yang lebih universal untuk semua item sebagai grup melalui wadah fleksibel atau jika Anda ingin menargetkan flex. item itu sendiri.

Menentukan arah wadah fleksibel: arah-fleksibel

Seperti dibahas, wadah fleksibel dapat memiliki elemen yang mengalir baik secara vertikal (pada sumbu silang) atau horizontal (sepanjang sumbu utama). Untuk menentukan arah, Anda dapat menggunakan properti flex-direction, yang mengambil salah satu dari empat nilai, defaultnya adalah row.

.flex-container {display: flex; arah-fleksibel: baris; }

Berikut rincian setiap nilai untuk arah-fleksibel:

baris – Elemen diratakan secara horizontal di sepanjang sumbu utama dalam mode penulisan dokumen saat ini. row-reverse – Nilai ini juga ada pada sumbu utama tetapi kebalikan dari mode penulisan saat ini. kolom – Sesuai dengan namanya, ini mengalirkan item fleksibel sepanjang sumbu silang (vertikal), dengan mempertimbangkan mode penulisan kolom-kebalikan saat ini – Sama seperti kolom tetapi dibalik

Anda dapat melihat semua nilai dalam demo interaktif berikut:

Sumber Artikel

WP Tips