Daftar Isi:

Bagaimana Anda menggunakan Flexbox dan grid?
Bagaimana Anda menggunakan Flexbox dan grid?

Video: Bagaimana Anda menggunakan Flexbox dan grid?

Video: Bagaimana Anda menggunakan Flexbox dan grid?
Video: CSS GRID | #1 Apa itu CSS GRID? 2024, November
Anonim

Kami telah mengatur elemen sebagai baris dan kolom di web sejak kami digunakan tabel untuk tata letak. Keduanya flexbox dan grid didasarkan pada konsep ini. kotak fleksibel terbaik untuk mengatur elemen baik dalam satu baris, atau satu kolom. kisi-kisi terbaik untuk mengatur elemen dalam beberapa baris dan kolom.

Selanjutnya, orang mungkin juga bertanya, dapatkah Anda menggunakan Flexbox dan grid bersama-sama?

Sebagian besar Tidak. kisi-kisi jauh lebih baru dari kotak fleksibel dan memiliki sedikit dukungan browser. Mereka bisa kerja bersama : A kisi-kisi barang bisa menjadi kotak fleksibel wadah. A melenturkan barang bisa menjadi kisi-kisi wadah.

Demikian juga, apakah kisi CSS lebih baik daripada Flexbox? kisi CSS adalah untuk tata letak 2D. Ia bekerja dengan baris dan kolom. kotak fleksibel bekerja lebih baik dalam satu dimensi saja (baik baris ATAU kolom). Boleh jadi lagi menghemat waktu dan membantu jika Anda menggunakan keduanya secara bersamaan.

Oleh karena itu, apa itu kisi Flexbox?

kotak fleksibel dibuat untuk tata letak satu dimensi dan kisi-kisi dibuat untuk tata letak dua dimensi. Ini berarti bahwa jika Anda meletakkan item dalam satu arah (misalnya tiga tombol di dalam header), maka Anda harus menggunakan kotak fleksibel : Ini akan memberi Anda lebih banyak fleksibilitas daripada CSS kisi-kisi.

Kapan Anda tidak boleh mengonsumsi Flexbox?

Kapan tidak menggunakan flexbox

  1. Jangan gunakan flexbox untuk tata letak halaman. Sistem kisi dasar yang menggunakan persentase, lebar maksimum, dan kueri media adalah pendekatan yang jauh lebih aman untuk membuat tata letak halaman yang responsif.
  2. Jangan tambahkan display:flex; ke setiap div wadah tunggal.
  3. Jangan gunakan flexbox jika Anda memiliki banyak lalu lintas dari IE8 dan IE9.

Direkomendasikan: