Isi kandungan:

Bagaimanakah anda menggunakan Flexbox dan grid?
Bagaimanakah anda menggunakan Flexbox dan grid?

Video: Bagaimanakah anda menggunakan Flexbox dan grid?

Video: Bagaimanakah anda menggunakan Flexbox dan grid?
Video: APA ITU FLEXBOX? | Bagian 1 - Pendahuluan 2024, November
Anonim

Kami telah menyusun elemen sebagai baris dan lajur di web sejak kami digunakan jadual untuk susun atur. Kedua-duanya flexbox dan grid adalah berdasarkan konsep ini. Flexbox adalah yang terbaik untuk menyusun elemen sama ada dalam satu baris atau satu lajur. Grid adalah yang terbaik untuk menyusun elemen dalam berbilang baris dan lajur.

Selepas itu, seseorang juga mungkin bertanya, bolehkah anda menggunakan Flexbox dan grid bersama-sama?

Kebanyakannya No. Grid adalah lebih baru daripada Flexbox dan mempunyai sedikit sokongan penyemak imbas. mereka boleh kerja bersama-sama : a grid item boleh menjadi a kotak lentur bekas. A lentur item boleh menjadi a grid bekas.

Begitu juga, adakah grid CSS lebih baik daripada Flexbox? Grid CSS adalah untuk susun atur 2D. Ia berfungsi dengan kedua-dua baris dan lajur. Flexbox berfungsi lebih baik dalam satu dimensi sahaja (sama ada baris ATAU lajur). Ia akan menjadi lebih menjimatkan masa dan membantu jika anda menggunakan kedua-duanya pada masa yang sama.

Sehubungan itu, apakah grid Flexbox?

Flexbox dibuat untuk susun atur satu dimensi dan Grid dibuat untuk susun atur dua dimensi. Ini bermakna jika anda meletakkan item dalam satu arah (contohnya tiga butang di dalam pengepala), maka anda harus menggunakan Flexbox : Ia akan memberi anda lebih fleksibiliti daripada CSS Grid.

Bilakah anda tidak boleh mengambil Flexbox?

Bila tidak menggunakan flexbox

  1. Jangan gunakan flexbox untuk susun atur halaman. Sistem grid asas menggunakan peratusan, lebar maksimum dan pertanyaan media ialah pendekatan yang lebih selamat untuk mencipta reka letak halaman responsif.
  2. Jangan tambah display:flex; kepada setiap div kontena tunggal.
  3. Jangan gunakan flexbox jika anda mempunyai banyak trafik dari IE8 dan IE9.

Disyorkan: